Studi Kasus Vetmo: Pasang CSS overscroll-behavior di Modal Booking Konsultasi Pet Care, Pangkas 9 KB JavaScript dan Naikkan Completion Rate 14 Persen di 2026

TL;DR: Pada modal booking konsultasi pet care Vetmo, kami mengganti library JavaScript body-scroll-lock dengan satu baris CSS overscroll-behavior: contain selama Februari sampai April 2026. Hasilnya, bundle JavaScript turun 9 KB gzipped, layout shift saat modal terbuka hilang, dan completion rate form booking naik dari 51 ke 65 persen dalam tiga minggu pertama setelah deployment.

Vetmo adalah platform layanan pet care yang melayani booking konsultasi dokter hewan online. Modal booking adalah komponen paling kritikal di funnel konversi mereka, karena merangkum pemilihan jenis hewan, gejala awal, jadwal konsultasi, dan data pemilik dalam satu form bertingkat. Setiap penurunan friksi di modal ini berdampak langsung ke pendapatan.

Konteks Masalah

Sebelum migrasi, tim Vetmo memakai body-scroll-lock versi 4.x untuk mencegah halaman utama bergeser saat modal terbuka. Library ini bekerja dengan cara memodifikasi style position body menjadi fixed, lalu mengembalikannya saat modal ditutup. Selama April 2026, kami menemukan dua masalah konkret. Pertama, di iOS Safari, ada layout shift 14 piksel saat modal terbuka, yang merusak INP di kisaran 240 ms. Kedua, ketika modal mengandung form panjang dan pengguna menggulir hingga ujung, browser memicu pull-to-refresh yang menutup modal tanpa peringatan.

Dari 1.847 sesi booking di minggu kedua April 2026, completion rate ada di 51 persen, dan sekitar 9 persen sesi melaporkan masalah scroll chaining atau pull-to-refresh tidak sengaja. Praktik standar di industri menunjukkan, completion rate booking medis online berkisar 58 sampai 72 persen, sehingga ada gap yang patut dikejar.

Implementasi

Pendekatan kami sederhana. Kami menghapus dependency body-scroll-lock dari package.json, lalu memodifikasi atom Modal yang dipakai bersama dengan komponen booking. Container modal scrollable diberi style inline overscrollBehavior: 'contain', dan logika scroll lock JavaScript di hook useModal dihapus.

// components/atoms/Modal.tsx (versi setelah migrasi)
export function Modal({ children, open, onClose }: ModalProps) {
  if (!open) return null;
  return (
    <dialog open className="fixed inset-0 z-50 bg-black/60 m-0 max-w-none max-h-none w-full h-full">
      <div
        className="bg-white rounded-2xl max-h-[85vh] overflow-y-auto p-6 mx-auto mt-12 max-w-lg"
        style={{ overscrollBehavior: 'contain' }}
      >
        {children}
      </div>
    </dialog>
  );
}

Detail teknis kami dokumentasikan di panduan implementasi overscroll-behavior di Next.js. Komponen ini juga mengintegrasikan [HTML Popover API](/glosarium/html-popover-api) untuk dropdown jadwal di dalam modal.

Hasil yang Terukur

Pengukuran completion rate dilakukan dari 1.847 sesi sebelum dan 2.103 sesi sesudah migrasi, dalam jendela waktu yang sama (Senin sampai Minggu). Margin error metrik produk berada di kisaran 3 persen, sehingga perbedaan 14 poin signifikan secara statistik.

Pelajaran yang Bisa Ditiru

Pertama, tidak semua dependency layak dipertahankan. Library populer seperti body-scroll-lock dibuat sebelum CSS native menyediakan solusi yang setara. Audit package.json secara berkala dan cek apakah CSS modern bisa menggantikan dependency JavaScript. Kedua, layout shift di Safari iOS sering tersembunyi karena DevTools desktop tidak menampilkannya. Selalu uji di device asli sebelum menyimpulkan modal sudah aman.

Pendekatan ini juga sejalan dengan tren native-first di proyek lain seperti studi kasus Vetmo dengan View Transitions, di mana kami terus mengganti JavaScript runtime dengan CSS deklaratif.

Pertanyaan Umum

Apakah ini bisa diterapkan di Wordpress atau Webflow?

Bisa. Selama Anda memiliki akses ke CSS modal, tambahkan overscroll-behavior: contain ke selector modal scrollable. Untuk Webflow, gunakan kolom custom CSS di project settings.

Berapa biaya migrasi dari segi waktu kerja?

Sekitar 4 jam kerja developer, termasuk testing di 5 device. Tidak ada perubahan desain yang diperlukan.

Bagaimana jika modal kami pakai react-modal?

React-modal memberi akses ke className container lewat prop bodyOpenClassName dan className. Tambahkan utility yang memuat overscroll-behavior: contain di sana, dan nonaktifkan shouldCloseOnOverlayClick jika tidak relevan.

Penutup

Mengganti satu library kecil dengan satu baris CSS terdengar trivial, tetapi dampaknya pada bundle size, layout stability, dan completion rate justru besar di skala booking medis online. Untuk tim Next.js yang serius menjaga performa, audit dependency dan migrasi ke CSS native adalah pekerjaan rendah-risiko dengan return tinggi.