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

TL;DR: Vetmo migrasi modal booking konsultasi pet care dari Framer Motion ke CSS transition-behavior: allow-discrete di Next.js 15. Bundle JavaScript modal turun 12 KB (dari 22 KB ke 9,8 KB), animasi entry 38 persen lebih responsif, completion rate booking naik 14 persen dalam 21 hari pasca-deploy. Pola ini menggantikan kebutuhan library animasi untuk modal sederhana.

Vetmo adalah platform pet care yang Vito Atmo bangun untuk klinik hewan independen di Indonesia. Modal booking konsultasi adalah komponen paling kritikal: pemilik hewan harus bisa pilih dokter, slot waktu, dan jenis layanan dalam satu alur cepat. Setiap hambatan, termasuk animasi modal yang lambat, langsung kelihatan di completion rate.

Saat audit Q1 2026, modal booking masih pakai pola lama Framer Motion plus useEffect untuk mengatur antrian entry-exit. Berat, tapi jalan. Sampai data menunjukkan ada peluang.

Masalah: Modal Berat untuk Use Case Sederhana

Pola lama modal booking Vetmo memakai Framer Motion sebagai dependency utama, plus state manager kecil untuk handle animating, entered, exiting. Total payload yang menyumbang ke halaman booking: sekitar 22 KB minified untuk komponen modal saja, belum hitung Framer runtime tambahan yang ikut tersedot ke chunk. Untuk modal yang hanya butuh fade-in plus skala kecil 0,98 ke 1, ini overkill. Konsep yang relevan dipelajari: CSS transition-behavior dan [HTML Popover API](/glosarium/html-popover-api).

Dari Real User Monitoring (RUM) di Maret 2026, latency animasi entry pertama modal booking rata-rata 145 ms pada perangkat mid-range Indonesia. Untuk konteks: ambang persepsi "instan" pada UI menurut riset Nielsen Norman Group berada di sekitar 100 ms.

Migrasi: Tiga Baris CSS Menggantikan Library

Pendekatan yang Vito pakai untuk migrasi:

Komponen Modal Booking yang baru tidak punya satu pun useEffect untuk animasi. Toggle state cukup pakai atribut popover HTML native plus class-based variant untuk varian tampilan (full-screen di mobile, centered di desktop). Referensi teknis: MDN: transition-behavior.

Hasil: Bundle Turun, Konversi Naik

Per data 21 hari pasca-deploy penuh (akhir April 2026):

• Bundle Modal Booking: 22 KB ke 9,8 KB (pangkas 12,2 KB atau 55 persen).
• Latency animasi entry pertama: 145 ms ke 90 ms (turun 38 persen, masuk ambang persepsi "instan").
• Time to Interactive halaman booking: 1,82 detik ke 1,54 detik (turun 15 persen).
• Completion rate booking konsultasi: 41 persen ke 47 persen (naik 14 persen relatif).
• Bounce rate modal: 12 persen ke 9 persen.

Angka completion rate ini spesifik ke konteks Vetmo (pet care, ticket size menengah, audiens pemilik hewan mainstream Indonesia). Tidak bisa di-generalize ke industri lain tanpa konteks serupa.

Pelajaran untuk Tim Lain

Tiga insight yang Vito catat dari migrasi ini:

1. Modal sederhana sering tidak butuh library animasi. CSS 2026 punya primitive yang cukup untuk 80-90 persen kasus modal di landing page bisnis.
2. Bundle reduction berkorelasi dengan konversi. Vetmo bukan kasus pertama yang lihat pola ini, tapi konsisten muncul di proyek client serupa.
3. Migrasi animasi bukan rewrite besar. Total effort migrasi modal Vetmo: 1,5 hari engineer plus 0,5 hari QA. ROI tinggi untuk effort rendah.

Konsep pendukung untuk eksplorasi lanjutan: AEO Paragraph Token Density untuk optimasi paragraf produk, dan Agent Token Budget Overflow untuk tim yang mulai bangun chatbot agen di alur booking.

Pertanyaan Umum

Kenapa tidak migrasi penuh ke HTML Popover API tanpa CSS animasi?

Popover API native handle show/hide, tapi tidak handle animasi. Kombinasi popover + transition-behavior: allow-discrete memberi kedua manfaat sekaligus.

Apakah ada risiko regresi UX setelah migrasi?

Risiko utama: Safari versi lama yang tidak mendukung @starting-style. Mitigasi di Vetmo: graceful degradation. Modal tetap berfungsi tanpa animasi entry pada Safari di iOS 16 ke bawah.

Berapa lama sampai dampak konversi terlihat?

Pada Vetmo, sinyal awal muncul dalam 7 hari. Konfirmasi statistical significance dalam 21 hari. Variasi tergantung volume trafik per halaman.

Penutup

Setiap kilobyte yang dipangkas dari bundle landing page tidak terjemahkan langsung jadi konversi. Tapi pada use case fungsional seperti modal booking, bundle yang lebih ringan memang berkorelasi dengan pengalaman yang lebih responsif, dan responsivitas berkorelasi dengan konversi. Vetmo adalah satu data point lagi yang mendukung pola itu.