Telu Core Web Vitals ing 2026

Google ngukur telu metrik lapangan utama kanggo pengalaman halaman. Saben-saben nduweni ambang kanggo kinerja "Apik":

• Largest Contentful Paint (LCP) — wektu kanggo merender elemen sing paling gedhe sing katon. Apik: ing ngisor 2,5 detik.
• Interaction to Next Paint (INP) — responsivitas kanggo kabeh interaksi pangguna (ngganti FID ing Maret 2024). Apik: ing ngisor 200 md.
• Cumulative Layout Shift (CLS) — stabilitas visual nalika ngemot. Apik: ing ngisor 0,1.

Banner persetujuan sing mblokir rendering, njalanake JavaScript abot nalika ngemot, utawa nyuntikake owahan tata letak telat bisa nyurung salah sijine menyang band "Perlu Perbaikan" utawa "Elek" — lan Google nggunakake data lapangan 28 dina saka pangguna Chrome nyata, mula masalah sementara dadi sinyal rangking sing persisten.

Carane Banner Persetujuan Ngrusak LCP

Largest Contentful Paint biasane aktif ing gambar hero utawa judul utama. Sawetara pola persetujuan nundha kanthi ora perlu:

Skrip CMP sing Mblokir Rendering

Ngemot CMP kanthi sinkron saka kepala dokumen mungkasi parsing HTML nganti skrip diundhuh lan dieksekusi. Yen CMP diadani ing CDN sing alon utawa nduweni cache sing adhem, sampeyan bisa nambah 200-800 md menyang LCP kanthi global.

Banner Nutupi Hero

Yen banner persetujuan diposisikake minangka overlay modal sing nutupi elemen LCP, browser isih ngukur LCP saka elemen sing katutup. Nanging, yen banner iku elemen sing paling akeh dicat, dadi kandidat LCP — lan yen dirender liwat JavaScript sawise ngemot halaman, LCP dadi dhuwur kanthi artifisial.

Perbaikan: Ngemot Async kanthi Bootstrap Inline Cilik

Ngemot CMP lengkap kanthi asinkron (`async` utawa `defer`), mung kanthi skrip inline cilik kanggo tampilan banner awal. Targetake bootstrap sing luwih cilik saka 5KB dikompres. Logika perilaku lengkap, dhaftar vendor, lan UI chrome bisa lazy-load sawise cat pertama.

Carane Banner Persetujuan Ngrusak INP

Interaction to Next Paint ngukur wektu respons sing paling elek ing kabeh klik, tutul, lan pencet tombol sajrone sesi. Interaksi persetujuan cookie asring dadi interaksi pertama sing dilakoni pangguna — mula tombol Nampa sing alon ngrusak skor.

Kerja Abot nalika Nampa

Akeh CMP nglakoni kerja sinkron nalika Nampa: ngemot 40+ skrip vendor, nulis menyang localStorage, nembakake acara dataLayer, micu pembaruan Google Consent Mode. Yen iki ngluwihi 200 md, INP nandhang cilaka.

Perbaikan: Antri Kerja Sawise Cat

Nalika klik Nampa, langsung sembunyikake banner lan jadwalkake kerja abot kanthi `requestIdleCallback` utawa `setTimeout(0)`. Pangguna ndeleng banner ilang kanthi cepet; skrip vendor diundhuh ing latar mburi tanpa mblokir interaksi.

Carane Banner Persetujuan Ngrusak CLS

Cumulative Layout Shift nglacak gerakan visual sing ora dikarepake. Banner iku sumber CLS klasik nalika disuntikake menyang DOM sawise konten wis dicat.

Injeksi Banner Telat

Yen banner katon 800 md sawise LCP, nyurung konten menyang ngisor lan ngasilake owahan tata letak. Malah banner cilik bisa micu skor CLS 0,1+ yen mengaruhi bagean sing gedhe saka viewport.

Re-Render Widget Preferensi Cookie

Widget preferensi footer sing ngemot logo vendor kanthi asinkron bisa ngalirake maneh kabeh footer kaping pirang-pirang, nambah CLS.

Perbaikan: Reservasi Ruang ing Ngarepe

Gunakake CSS kanggo ngreservasi ruang banner saka cat pertama — placeholder dhuwur tetep, `min-height` ing footer, utawa banner sing dipasang ing ngisor sing ora nyurung konten. CMP modern kudu nawakake konfigurasi tanpa CLS kanthi gawan.

Google Consent Mode V2 lan Kinerja

Consent Mode V2 ngidini tag Google mlaku ing kondisi tanpa cookie sadurunge persetujuan, ngirim sinyal liwat `gtag('consent', 'default', {...})`. Iki apik kanggo kesinambungan pengukuran, nanging perpustakaan gtag.js dhewe duwe ukuran 50-90KB. Ngemot kanthi asinkron lan setel gawan sak cepete kanggo ngindhari kondisi balapan.

• Setel gawan sadurunge gtag diundhuh — lebokake panggilan gawan persetujuan ing kepala, sadurunge skrip gtag.js.
• Gunakake `analytics_storage: 'denied'` minangka gawan — ngecilake data sing diklumpukake sadurunge persetujuan.
• Perbarui nalika Nampa liwat requestIdleCallback — ngindhari mblokir thread utama.

Ngukur Dampak CMP ing Core Web Vitals

Aja nebak — ukur. Gunakake alat iki kanggo ngukur dampak banner sampeyan:

• PageSpeed Insights — data lapangan saka Laporan Chrome UX plus audit Lighthouse laboratorium. Bandhingake skor kanthi lan tanpa skrip CMP.
• Ekstensi Chrome Web Vitals — overlay LCP, INP, CLS real-time nalika tes lokal.
• WebPageTest.org — tampilan filmstrip lan air terjun sing nuduhake persis kapan banner dirender lan apa sing diblokir.
• Laporan Core Web Vitals Search Console — data lapangan 28 dina sing dikelompokake miturut pola URL. Priksa apa halaman landing kanthi banner sampeyan entuk skor sing beda karo halaman tanpa.

Carane FlexyConsent Tetep Cepet