Studi Kasus Ryandi Pratama: CLS Budget Turunkan Cumulative Layout Shift dari 0,24 ke 0,06 dalam 19 Hari di Personal Brand Konsultan Pajak 2026

TL;DR: Dalam 19 hari, website personal brand Ryandi Pratama (konsultan pajak Jakarta) memangkas Cumulative Layout Shift dari 0,24 ke 0,06 dengan memasang CLS Budget per template, audit komponen pemicu shift, dan wrap next/image konsisten. Klik tombol "Jadwalkan Konsultasi" naik 14 persen dalam 30 hari pertama.

Studi ini menggambarkan bagaimana metrik CLS Budget bekerja di kasus nyata. Ryandi datang dengan keluhan klasik: banyak lead yang klik tombol salah, lalu kembali dan bounce. Setelah audit, akar masalahnya bukan copy, tetapi tata letak yang bergeser saat halaman load.

Konteks Awal

Website Ryandi dibangun dengan Next.js 14, di-hosting di Vercel, target audiens UMKM dan profesional. Sebelum intervensi, skor CrUX p75 menunjukkan:

LCP dan INP sudah aman, tetapi CLS merah karena hero image tanpa aspect-ratio, font swap dari Google Fonts, dan banner "Promo Konsultasi Gratis" yang muncul setelah 1,2 detik.

Intervensi 19 Hari

Fase 1 (hari 1-5): Tetapkan Budget dan Audit

Kami sepakati ambang 0,06 mobile dan 0,08 desktop. Sub-budget: Next.js Image CLS Budget 0,03, font 0,015, banner 0,02. Audit Chrome DevTools panel Performance menemukan tiga sumber dominan: hero image (kontribusi 0,11), font swap (0,06), banner promo (0,07).

Fase 2 (hari 6-12): Wrap Komponen dan Reserve Slot

Hero image dibungkus container relative aspect-[16/9] dengan fill dan priority. Font Inter di-preload via <link rel="preload"> dan dipakai dengan font-display: optional supaya tidak swap. Banner promo dipindah ke render SSR dengan tinggi tetap 72 px di mobile.

Fase 3 (hari 13-19): Pasang Gate dan Validasi

Lighthouse CI di GitHub Actions diaktifkan dengan assertion CLS di bawah 0,08. Tiga rilis berturut-turut lolos gate. Pengukuran CrUX hari ke-19 menunjukkan p75 CLS 0,06 mobile, 0,04 desktop. Pola sama yang kami pakai untuk klien lain seperti [studi kasus Aris Setiawan dengan LCP Budget](/artikel/studi-kasus-aris-setiawan-lcp-budget-personal-brand-2026).

Hasil Terukur

Data dikumpulkan dari Vercel Analytics, CrUX bulanan, dan tracking event GA4. Tracking rage click dipasang via Microsoft Clarity.

Pelajaran yang Bisa Diadaptasi

Pertama, CLS yang buruk sering tertutup oleh LCP dan INP yang sudah baik, padahal dampaknya ke konversi paling cepat. Kedua, budget per komponen lebih bertahan daripada audit sekali pakai. Ketiga, gate CI menjaga skor tetap aman saat tim menambah fitur baru. Pola ini bisa direplikasi untuk personal brand konsultan lain, seperti pernah kami terapkan di studi kasus Felicia Tan dengan INP Budget.

Pertanyaan Umum

Apakah hasil ini bisa direplikasi di template lain?

Bisa, asalkan baseline awal dan struktur komponen serupa. Untuk website e-commerce dengan grid produk besar, fase audit biasanya lebih panjang karena variabel lebih banyak.

Berapa biaya intervensi seperti ini?

Untuk personal brand satu halaman utama plus blog, rentang 19 hari kerja efektif. Biaya tergantung tim, tapi pengerjaan murni teknis tanpa redesign visual.

Apakah CLS akan tetap stabil setelah ditinggal?

Hanya jika gate CI dipertahankan. Tanpa gate, regresi muncul saat tim menambah widget atau banner baru.

Apakah perlu redesign untuk turunkan CLS?

Tidak. Kasus Ryandi tidak menyentuh visual, hanya wrapper dan reserve slot.

Penutup

CLS Budget bukan latihan teori. Angka di bawah 0,1 adalah perbedaan antara user yang klik benar dan user yang kembali. Mulai dari satu template paling sering dikunjungi, ukur baseline, pasang wrapper konsisten, dan kunci dengan gate CI.