Tiga Core Web Vitals pada 2026

Google mengukur tiga metrik lapangan utama untuk pengalaman halaman. Setiap satu mempunyai ambang untuk prestasi "Baik":

• Largest Contentful Paint (LCP) — masa untuk merender elemen terbesar yang kelihatan. Baik: kurang daripada 2.5 saat.
• Interaction to Next Paint (INP) — responsiviti kepada semua interaksi pengguna (menggantikan FID pada Mac 2024). Baik: kurang daripada 200ms.
• Cumulative Layout Shift (CLS) — kestabilan visual semasa pemuatan. Baik: kurang daripada 0.1.

Sepanduk persetujuan yang menyekat rendering, menjalankan JavaScript berat semasa pemuatan atau menyuntik perubahan susun atur lewat boleh menolak mana-mana daripada ini ke dalam jalur "Perlu Penambahbaikan" atau "Lemah" — dan Google menggunakan data lapangan 28 hari daripada pengguna Chrome sebenar, jadi isu sementara menjadi isyarat penarafan yang berterusan.

Cara Sepanduk Persetujuan Menjejaskan LCP

Largest Contentful Paint biasanya dicetuskan pada imej utama atau tajuk. Beberapa corak persetujuan melambatkannya tanpa perlu:

Skrip CMP yang Menyekat Rendering

Memuatkan CMP secara segerak dari kepala dokumen menghentikan penghuraian HTML sehingga skrip dimuat turun dan dilaksanakan. Jika CMP dihoskan pada CDN yang perlahan atau mempunyai cache sejuk, anda boleh menambah 200-800ms kepada LCP secara global.

Sepanduk Menutupi Elemen Utama

Jika sepanduk persetujuan diletakkan sebagai hamparan modal yang menutupi elemen LCP, pelayar tetap akan mengukur LCP dari elemen yang dilindungi. Walau bagaimanapun, jika sepanduk adalah elemen yang paling besar dicat, ia menjadi calon LCP — dan jika ia merender melalui JavaScript selepas pemuatan halaman, LCP adalah tinggi secara buatan.

Pembetulan: Pemuatan Async dengan Bootstrap Inline Kecil

Muatkan CMP penuh secara tidak segerak (async atau defer), dengan hanya skrip inline kecil untuk paparan sepanduk awal. Sasarkan bootstrap yang lebih kecil daripada 5KB dikompres. Logik tingkah laku penuh, senarai vendor dan UI chrome boleh dimuat secara malas selepas cat pertama.

Cara Sepanduk Persetujuan Menjejaskan INP

Interaction to Next Paint mengukur masa tindak balas terburuk merentasi semua klik, ketukan dan tekanan kekunci semasa sesi. Interaksi persetujuan kuki sering merupakan interaksi pertama yang dibuat pengguna — jadi butang Terima yang perlahan merosakkan skor.

Kerja Berat pada Terima

Banyak CMP melaksanakan kerja segerak pada Terima: memuatkan 40+ skrip vendor, menulis ke localStorage, mencetuskan peristiwa dataLayer, mencetuskan kemas kini Google Consent Mode. Jika ini melebihi 200ms, INP mengalami.

Pembetulan: Beratur Kerja Selepas Cat

Pada klik Terima, segera sembunyikan sepanduk dan jadualkan kerja berat dengan requestIdleCallback atau setTimeout(0). Pengguna melihat sepanduk hilang dengan serta-merta; skrip vendor dimuatkan di latar belakang tanpa menyekat interaksi.

Cara Sepanduk Persetujuan Menjejaskan CLS

Cumulative Layout Shift menjejaki pergerakan visual yang tidak dijangka. Sepanduk adalah sumber klasik CLS apabila ia disuntik ke dalam DOM selepas kandungan dicat.

Suntikan Sepanduk Lewat

Jika sepanduk muncul 800ms selepas LCP, ia menolak kandungan ke bawah dan menghasilkan anjakan susun atur. Malah sepanduk kecil boleh mencetuskan skor CLS 0.1+ jika ia mempengaruhi sebahagian besar viewport.

Render Semula Widget Keutamaan Kuki

Widget keutamaan footer yang memuatkan logo vendor secara tidak segerak boleh menyusun semula keseluruhan footer beberapa kali, menggandakan CLS.

Pembetulan: Tempah Ruang Sejak Awal

Gunakan CSS untuk menempah ruang sepanduk dari cat pertama — pemegang tempat ketinggian tetap, min-height pada footer atau sepanduk tetap bawah yang tidak menolak kandungan. CMP moden harus menawarkan konfigurasi tanpa-CLS daripada kotak.

Google Consent Mode V2 dan Prestasi

Consent Mode V2 membolehkan tag Google berjalan dalam keadaan tanpa kuki sebelum persetujuan, menghantar isyarat melalui gtag('consent', 'default', {...}). Ini bagus untuk kesinambungan pengukuran, tetapi perpustakaan gtag.js sendiri adalah 50-90KB. Muatkannya secara tidak segerak dan tetapkan lalai seawal mungkin untuk mengelakkan keadaan lumba.

• Tetapkan lalai sebelum gtag dimuatkan — letakkan panggilan lalai persetujuan di kepala, sebelum skrip gtag.js.
• Gunakan analytics_storage: 'denied' sebagai lalai — meminimumkan data yang dikumpul pra-persetujuan.
• Kemas kini pada Terima melalui requestIdleCallback — elakkan penyekatan utas utama.

Mengukur Impak CMP pada Core Web Vitals

Jangan teka — ukur. Gunakan alat ini untuk mengukur impak sepanduk anda:

• PageSpeed Insights — data lapangan dari Laporan Chrome UX ditambah audit Lighthouse makmal. Bandingkan skor dengan dan tanpa skrip CMP.
• Sambungan Chrome Web Vitals — hamparan LCP, INP, CLS masa nyata semasa ujian tempatan.
• WebPageTest.org — paparan filem dan air terjun yang menunjukkan dengan tepat bila sepanduk merender dan apa yang disekatnya.
• Laporan Core Web Vitals Search Console — data lapangan 28 hari dikumpulkan mengikut corak URL. Semak sama ada halaman pendaratan dengan sepanduk anda mendapat skor berbeza daripada halaman tanpa.

Cara FlexyConsent Kekal Pantas