Tiga Core Web Vitals di 2026

Google mengukur tiga metrik lapangan utama untuk pengalaman halaman. Masing-masing memiliki ambang batas untuk performa "Baik":

• Largest Contentful Paint (LCP) — waktu untuk merender elemen terbesar yang terlihat. Baik: di bawah 2,5 detik.
• Interaction to Next Paint (INP) — responsivitas terhadap semua interaksi pengguna (menggantikan FID pada Maret 2024). Baik: di bawah 200 md.
• Cumulative Layout Shift (CLS) — stabilitas visual selama pemuatan. Baik: di bawah 0,1.

Banner persetujuan yang memblokir rendering, menjalankan JavaScript berat saat pemuatan, atau menyuntikkan perubahan tata letak terlambat dapat mendorong salah satunya ke dalam band "Perlu Perbaikan" atau "Buruk" — dan Google menggunakan data lapangan 28 hari dari pengguna Chrome nyata, sehingga masalah sementara menjadi sinyal peringkat yang persisten.

Bagaimana Banner Persetujuan Merusak LCP

Largest Contentful Paint biasanya aktif pada gambar hero atau judul utama. Beberapa pola persetujuan menundanya secara tidak perlu:

Skrip CMP yang Memblokir Rendering

Memuat CMP secara sinkron dari kepala dokumen menghentikan penguraian HTML hingga skrip diunduh dan dieksekusi. Jika CMP dihosting pada CDN yang lambat atau memiliki cache dingin, Anda bisa menambahkan 200-800 md ke LCP secara global.

Banner Menutupi Hero

Jika banner persetujuan diposisikan sebagai overlay modal yang menutupi elemen LCP, browser masih akan mengukur LCP dari elemen yang tertutup. Namun, jika banner adalah elemen yang paling banyak dicat, banner menjadi kandidat LCP — dan jika dirender melalui JavaScript setelah pemuatan halaman, LCP menjadi tinggi secara artifisial.

Perbaikan: Pemuatan Async dengan Bootstrap Inline Kecil

Muat CMP penuh secara asinkron (`async` atau `defer`), hanya dengan skrip inline kecil untuk tampilan banner awal. Targetkan bootstrap yang lebih kecil dari 5KB terkompres. Logika perilaku penuh, daftar vendor, dan elemen UI dapat dimuat secara lazy setelah cat pertama.

Bagaimana Banner Persetujuan Merusak INP

Interaction to Next Paint mengukur waktu respons terburuk di semua klik, ketukan, dan penekanan tombol selama sesi. Interaksi persetujuan cookie sering kali merupakan interaksi pertama yang dilakukan pengguna — sehingga tombol Terima yang lambat merusak skor.

Pekerjaan Berat saat Terima

Banyak CMP mengeksekusi pekerjaan sinkron saat Terima: memuat 40+ skrip vendor, menulis ke localStorage, menembakkan acara dataLayer, memicu pembaruan Google Consent Mode. Jika ini melebihi 200 md, INP menderita.

Perbaikan: Antrean Pekerjaan Setelah Cat

Saat klik Terima, segera sembunyikan banner dan jadwalkan pekerjaan berat dengan `requestIdleCallback` atau `setTimeout(0)`. Pengguna melihat banner menghilang seketika; skrip vendor dimuat di latar belakang tanpa memblokir interaksi.

Bagaimana Banner Persetujuan Merusak CLS

Cumulative Layout Shift melacak gerakan visual yang tidak terduga. Banner adalah sumber CLS klasik ketika disuntikkan ke dalam DOM setelah konten dicat.

Injeksi Banner Terlambat

Jika banner muncul 800 md setelah LCP, banner mendorong konten ke bawah dan menghasilkan pergeseran tata letak. Bahkan banner kecil pun dapat memicu skor CLS 0,1+ jika memengaruhi sebagian besar area pandang.

Re-Render Widget Preferensi Cookie

Widget preferensi footer yang memuat logo vendor secara asinkron dapat mengalirkan ulang seluruh footer beberapa kali, menggabungkan CLS.

Perbaikan: Reservasi Ruang di Awal

Gunakan CSS untuk mereservasi ruang banner dari cat pertama — placeholder tinggi tetap, `min-height` di footer, atau banner yang dipasang di bagian bawah yang tidak mendorong konten. CMP modern harus menawarkan konfigurasi tanpa CLS secara bawaan.

Google Consent Mode V2 dan Performa

Consent Mode V2 memungkinkan tag Google berjalan dalam kondisi tanpa cookie sebelum persetujuan, mengirimkan sinyal melalui `gtag('consent', 'default', {...})`. Ini bagus untuk kesinambungan pengukuran, tetapi pustaka gtag.js itu sendiri berukuran 50-90KB. Muat secara asinkron dan tetapkan default sesegera mungkin untuk menghindari kondisi balapan.

• Tetapkan default sebelum gtag dimuat — letakkan panggilan default persetujuan di kepala, sebelum skrip gtag.js.
• Gunakan `analytics_storage: 'denied'` sebagai default — meminimalkan data yang dikumpulkan sebelum persetujuan.
• Perbarui saat Terima melalui requestIdleCallback — hindari pemblokiran utas utama.

Mengukur Dampak CMP pada Core Web Vitals

Jangan menebak — ukurlah. Gunakan alat-alat ini untuk mengukur dampak banner Anda:

• PageSpeed Insights — data lapangan dari Laporan Chrome UX ditambah audit Lighthouse lab. Bandingkan skor dengan dan tanpa skrip CMP.
• Ekstensi Chrome Web Vitals — overlay LCP, INP, CLS real-time selama pengujian lokal.
• WebPageTest.org — tampilan filmstrip dan air terjun yang menunjukkan dengan tepat kapan banner dirender dan apa yang diblokir.
• Laporan Core Web Vitals Search Console — data lapangan 28 hari yang dikelompokkan berdasarkan pola URL. Periksa apakah halaman arahan dengan banner Anda mendapat skor yang berbeda dari halaman tanpa banner.

Bagaimana FlexyConsent Tetap Cepat