Studi Kasus Vetmo: Pasang CSS View Transitions untuk Navigasi Profil Hewan, Pangkas 41 KB JavaScript dan Naikkan Booking Konsultasi 18 Persen di 2026

TL;DR: Vetmo, platform pet care Indonesia yang melayani konsultasi dokter hewan online, mengganti library Framer Motion di flow navigasi profil hewan dengan [CSS View Transitions API](/glosarium/css-view-transitions). Hasil per Mei 2026: bundle JavaScript halaman profil turun 41 KB, persepsi loading 35 persen lebih cepat di 4G, dan konversi booking konsultasi naik 18 persen dalam 28 hari.

Saat me-review halaman profil hewan Vetmo di akhir Maret 2026, saya menemukan satu pola yang sering terjadi di startup pet care: flow Daftar Hewan ke Detail Hewan ke Booking Konsultasi memakai 47 KB animasi Framer Motion plus orchestration sendiri. Pengukuran lapangan menunjukkan LCP halaman ini menyentuh 3,1 detik di Snapdragon 4-series, kelas perangkat dominan pemilik hewan kelas menengah Indonesia.

Hipotesis: mengganti library animasi dengan CSS View Transitions API akan memangkas bundle tanpa mengorbankan feel premium yang jadi diferensiator Vetmo.

Diagnosis: Animasi Mahal di Halaman dengan Niat Konversi Tinggi

Halaman profil hewan adalah titik konversi: di sinilah pemilik memutuskan booking konsultasi. Jeda 600 ms karena animasi yang mahal terbukti menurunkan konversi 12 sampai 18 persen di benchmark Vetmo Q1 2026. Lihat pengukuran INP sebelum perubahan: 218 ms, persis di ambang merah Google.

Eksekusi: Tiga Langkah Pengganti Library

Pertama, kami hapus impor motion/react di tiga komponen profil. Kedua, tambahkan ke globals.css:

@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 280ms;
  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}

.pet-photo { view-transition-name: pet-photo; }
.pet-name  { view-transition-name: pet-name; }

Ketiga, di komponen PetCard, tambahkan style={{ viewTransitionName: 'pet-photo-' + id }} agar foto setiap hewan punya track animasi sendiri. Pendekatan ini menjaga konsistensi morf dari list ke detail.

Hasil Pengukuran 28 Hari

Hubungan kausal booking dengan View Transitions bersifat asosiatif, bukan murni eksperimental. Tetapi dalam window 28 hari tanpa perubahan campaign acquisition, korelasi sangat kuat. Lihat analisis perceived performance dari Nielsen Norman Group untuk konteks teoretis.

Pelajaran untuk Brand Pet Care Lain

Industri pet care Indonesia sangat kompetitif di acquisition cost. Setiap 100 ms penghematan loading di halaman profil setara 1 sampai 2 persen lift konversi, berdasarkan benchmark Vetmo Q1 2026. View Transitions menyediakan jalan pintas tanpa investasi tim engineering jangka panjang.

Pertanyaan Umum

Apakah pelajaran ini berlaku untuk e-commerce parfum atau fashion?

Ya, terutama untuk halaman list-ke-detail produk. Studi kasus serupa di Nalesha menunjukkan pola yang sama.

Berapa lama implementasi memakan waktu?

Vetmo memakai 1,5 hari developer untuk tiga komponen. Sebagian besar waktu habis di audit View Transition naming, bukan koding.

Apakah tetap butuh Framer Motion?

Untuk gesture drag dan multi-touch di komponen lain, ya. Vetmo menyisakan Framer Motion di komponen swiper kalender booking.

Apakah ada risiko regresi di Safari iOS lama?

Safari di bawah 18 melewati animasi tanpa error. Pengguna iPhone lama tetap mendapat navigasi instan, sekadar tanpa morf.

Penutup: Audit Library Animasi Sebelum Audit Campaign

Sebelum menaikkan budget iklan, audit bundle JavaScript halaman konversi utama. Sering kali, perubahan teknis kecil seperti pindah ke primitive CSS modern memberi lift konversi yang melebihi optimasi campaign. Vetmo menjadi contoh bahwa platform Anda mungkin punya headroom konversi yang belum tergarap.