Studi Kasus Vetmo: Pasang CLS Budget di Booking Page Turunkan Bounce 28 Persen 2026
TL;DR: Halaman booking Vetmo (klinik hewan online) sempat punya CLS 0,32 di mobile, jauh di atas threshold Google. Setelah menerapkan CLS budget 0,05 lewat reservasi dimensi gambar, reservasi space banner, dan preload font, CLS turun ke 0,06 dalam 60 hari dan bounce rate halaman booking turun 28 persen. Studi kasus ini cocok untuk marketer yang ingin paham bagaimana metrik teknis berdampak pada konversi nyata.
Beberapa bulan lalu, tim Vetmo (klinik hewan online) datang ke saya dengan keluhan klasik: trafik booking page sehat, tapi rasio booking selesai stagnan di angka rendah. Setelah audit awal, masalahnya bukan di copy atau pricing, tapi di CLS (Cumulative Layout Shift) yang sangat tinggi.
CLS di halaman booking Vetmo saat itu menyentuh 0,32 di mobile dengan koneksi 4G. Bandingkan dengan target Google di bawah 0,1. Praktiknya, pengguna sering tap tombol "Pilih Dokter" tapi yang ter-trigger malah tombol "Pilih Layanan" yang baru saja muncul di atasnya. Frustrasi, bounce.
Konteks Awal: Bottleneck CLS di Booking Page
Untuk konteks, Vetmo adalah platform booking konsultasi dokter hewan online dengan trafik mayoritas mobile (78% sesi). Halaman booking-nya berisi 3 komponen yang bermasalah:
- Galeri foto dokter (8 gambar) tanpa atribut width/height
- Banner promo dinamis yang inject di atas form
- Font Google Fonts yang loading lambat dan trigger Flash of Unstyled Text
Setelah baseline pengukuran lewat PageSpeed Insights dan Chrome User Experience Report, kami sepakat target CLS 0,05, lebih ketat dari rekomendasi Google sebagai buffer.
Pendekatan: CLS Budget 0,05
Konsep CLS budget kami pinjam dari praktik [Agent Citation Decay Budget](/glosarium/agent-citation-decay-budget) yang biasa dipakai di AEO, tapi dalam konteks Core Web Vitals. Idenya: alokasikan jatah "izin bergeser" yang sangat ketat, dan tracking setiap komponen halaman supaya tidak ada yang melebihi jatah.
| Komponen | Sumber CLS | Solusi | Estimasi Kontribusi CLS |
|---|---|---|---|
| Galeri dokter | Gambar tanpa dimensi | Tambah width/height + next/image dengan fill | -0,14 |
| Banner promo | Inject di atas form | Reserve container min-height: 80px | -0,09 |
| Font Google | FOIT/FOUT | font-display: optional + preload | -0,03 |
| Modal konfirmasi | Pop-up tanpa overlay backdrop | Pakai backdrop fixed position | -0,01 |
Total perkiraan penghematan: 0,27. Realisasinya 0,26 (CLS akhir 0,06).
Eksekusi 60 Hari
Minggu 1-2: Audit semua gambar di booking page dan ganti <img> jadi next/image. Untuk dokter, kami pakai pendekatan responsive dengan sizes yang sesuai grid layout. Minggu 3-4: Refactor banner promo jadi komponen dengan tinggi tetap, kondisi null dirender sebagai placeholder kosong dengan height sama. Minggu 5-6: Migrasi font dari Google Fonts ke self-hosted dengan preload di <head> dan font-display: optional. Minggu 7-8: QA dan monitoring lewat web-vitals library, push data ke GA4.
Hasil
Setelah 60 hari pengukuran:
- CLS booking page: 0,32 → 0,06 (turun 81%)
- LCP (Largest Contentful Paint): 3,8 detik → 2,1 detik (efek samping dari
next/imageoptimization) - Bounce rate halaman booking: turun 28%
- Conversion rate booking selesai: naik 18% (dari 4,2% ke 5,0%)
Angka ini perlu disebut dengan caveat: kami juga merilis revamp UI booking di minggu 7, jadi 18% conversion uplift tidak murni dari CLS. Murni-CLS impact yang bisa diisolasi adalah 28% penurunan bounce.
Pertanyaan Umum
Apakah CLS budget bisa diterapkan di website non-Next.js?
Bisa. Konsepnya framework-agnostic. Yang penting setiap komponen punya estimasi kontribusi CLS yang ditrack, dan tim development punya disiplin tidak merilis komponen baru tanpa cek CLS impact.
Berapa lama hasil CLS perbaikan terlihat di Google Search Console?
GSC menggunakan data 28-hari rolling window. Jadi perbaikan minggu ini baru terlihat penuh di GSC dalam 4 minggu. Untuk hasil yang lebih cepat terlihat, pakai field data lewat Chrome User Experience Report (CrUX) atau monitoring real user lewat web-vitals library.
Apakah CLS perbaikan otomatis naikkan ranking?
Tidak otomatis. CLS bagian dari Page Experience signal yang merupakan tiebreaker, bukan ranking factor utama. Tapi CLS rendah hampir selalu menurunkan bounce dan menaikkan dwell time, yang secara tidak langsung sinyal positif untuk ranking.
Apakah teknik ini bisa dipakai untuk halaman produk e-commerce?
Sangat cocok. E-commerce sering punya CLS tinggi karena image gallery, review widget, dan recommendation carousel. Pendekatan CLS budget membuat tim aware budget visual sebelum tambah komponen baru.
Insight Aplikatif
Pelajaran dari proyek Vetmo: CLS bukan sekadar metrik teknis untuk developer. Setiap 0,1 penurunan CLS punya korelasi nyata dengan rasio konversi, terutama di halaman dengan call-to-action kritikal seperti booking dan checkout. Marketer yang paham CLS budget bisa lebih efektif berkolaborasi dengan developer dan menghindari false positive di A/B test (perubahan copy gagal bukan karena copy-nya, tapi karena layout shift bikin pengguna salah klik).
Artikel Terkait
Case Study
Studi Kasus Aris Setiawan: Pasang Agent Tool Degraded Mode di Asisten Konsultasi Hukum, Pangkas Sesi Gagal 47 Persen dan Hemat Biaya Inferensi 29 Persen Selama 35 Hari di 2026
Studi kasus pemasangan Agent Tool Degraded Mode di asisten konsultasi hukum Aris Setiawan. Sesi gagal turun 47 persen, biaya inferensi hemat 29 persen dalam 35 hari.
Case Study
Studi Kasus Ryandi Pratama: Naikkan AEO Snippet Coverage Elasticity Konten Personal Branding Finansial dari 0,38 ke 0,71 dan Lipat Duakan Sitasi Perplexity Selama 48 Hari di 2026
Bagaimana saya naikkan AEO Snippet Coverage Elasticity konten personal branding finansial Ryandi Pratama dari 0,38 ke 0,71 dalam 48 hari, sitasi Perplexity naik 2,1 kali.
Case Study
Studi Kasus Atmo LMS: Pasang Agent Tool Fallback Chain di Asisten Kurikulum, Pangkas Eskalasi Manusia 58 Persen dan Naikkan Completion Rate Modul 16 Persen di 2026
Bagaimana saya pasang Agent Tool Fallback Chain 3 langkah di asisten kurikulum Atmo LMS, hasilnya rasio eskalasi manusia turun 58 persen dan completion rate modul naik 16 persen.
Butuh website yang benar-benar bekerja?
Hubungi Vito untuk konsultasi gratis 15 menit.
WhatsApp Sekarang