Ang Tatlong Core Web Vitals sa 2026

Sinusukat ng Google ang tatlong pangunahing sukatan sa larangan para sa karanasan sa pahina. Ang bawat isa ay may threshold para sa "Mabuting" pagganap:

• Largest Contentful Paint (LCP) — oras para i-render ang pinakamalaking nakikitang elemento. Mabuti: wala pang 2.5 segundo.
• Interaction to Next Paint (INP) — responsiveness sa lahat ng pakikipag-ugnayan ng user (pinalitan ang FID noong Marso 2024). Mabuti: wala pang 200ms.
• Cumulative Layout Shift (CLS) — visual na katatagan sa panahon ng pag-load. Mabuti: wala pang 0.1.

Ang isang banner ng consent na naghaharangan ng pag-render, nagpapatakbo ng mabigat na JavaScript sa pag-load, o naglalagay ng huli na mga pagbabago sa layout ay maaaring magtulak sa alinman sa mga ito sa banda ng "Kailangan ng Pagpapabuti" o "Mahirap" — at gumagamit ang Google ng 28-araw na data sa larangan mula sa mga totoong gumagamit ng Chrome, kaya ang mga pansamantalang isyu ay nagiging mga permanenteng signal ng ranggo.

Paano Sinisira ng Mga Banner ng Consent ang LCP

Ang Largest Contentful Paint ay karaniwang nagpapalabas sa isang larawan ng bayani o headline. Maraming mga pattern ng consent ang nagpapabagal nito nang hindi kinakailangan:

Mga Script ng CMP na Naghiharangan ng Pag-render

Ang pag-load ng CMP nang sabay-sabay mula sa ulo ng dokumento ay nagtigil ng pag-parse ng HTML hanggang sa ma-download at maipatupad ang script. Kung ang CMP ay naka-host sa mahinang CDN o malamig na cache, maaari kang magdagdag ng 200-800ms sa LCP nang pandaigdigan.

Banner na Sumasaklaw sa Bayani

Kung ang banner ng consent ay nakaposisyon bilang isang modal na overlay na sumasaklaw sa elemento ng LCP, susukat pa rin ang mga browser ng LCP mula sa nasaklaw na elemento. Gayunpaman, kung ang banner ay ang pinakamalaking naipintang elemento, ito ay nagiging kandidato ng LCP — at kung ito ay ini-render sa pamamagitan ng JavaScript pagkatapos ng pag-load ng pahina, ang LCP ay artipisyal na mataas.

Ayos: Async na Pag-load na may Maliit na Inline Bootstrap

I-load ang buong CMP nang asynchronous (`async` o `defer`), na may maliit na inline na script lamang para sa paunang pagpapakita ng banner. Target ang isang bootstrap na mas maliit sa 5KB na naka-gzip. Ang buong lohika ng gawi, mga listahan ng vendor, at UI chrome ay maaaring mag-lazy-load pagkatapos ng unang pintura.

Paano Sinisira ng Mga Banner ng Consent ang INP

Sinusukat ng Interaction to Next Paint ang pinakamasamang oras ng pagtugon sa lahat ng mga pag-click, tap, at pindutin ng key sa panahon ng isang session. Ang mga pakikipag-ugnayan ng cookie consent ay madalas na ang unang pakikipag-ugnayan na ginagawa ng isang gumagamit — kaya ang isang mahinang pindutan ng Tanggapin ay nagpapahamak sa marka.

Mabigat na Gawain sa Pagtanggap

Maraming CMP ang nagpapatupad ng synchronous na gawain sa Pagtanggap: naglo-load ng 40+ na script ng vendor, nagsusulat sa localStorage, nagpapalabas ng mga kaganapan ng dataLayer, nag-trigger ng mga update ng Google Consent Mode. Kung ito ay lalampas sa 200ms, magdurusa ang INP.

Ayos: Ipila ang Gawain Pagkatapos ng Pintura

Sa pag-click ng Tanggapin, agad na itago ang banner at iskedyul ang mabigat na gawain gamit ang `requestIdleCallback` o `setTimeout(0)`. Nakikita ng gumagamit ang banner na agad na nawawala; ang mga script ng vendor ay nag-lo-load sa background nang hindi hinaharangan ang pakikipag-ugnayan.

Paano Sinisira ng Mga Banner ng Consent ang CLS

Sinusubaybayan ng Cumulative Layout Shift ang hindi inaasahang visual na paggalaw. Ang mga banner ay isang klasikong pinagmumulan ng CLS kapag sila ay naka-inject sa DOM pagkatapos na ma-paint ang nilalaman.

Huli na Pag-inject ng Banner

Kung ang banner ay lilitaw 800ms pagkatapos ng LCP, itutulak nito ang nilalaman pababa at magbibigay ng layout shift. Kahit ang isang maliit na banner ay maaaring mag-trigger ng 0.1+ na marka ng CLS kung ito ay nakakaapekto sa malaking bahagi ng viewport.

Mga Re-Render ng Cookie Preference Widget

Ang mga footer preference widget na nag-lo-load ng mga logo ng vendor nang asynchronous ay maaaring mag-reflow ng buong footer nang maraming beses, na nagpaparami ng CLS.

Ayos: Mag-reserve ng Espasyo nang Maaga

Gamitin ang CSS upang magreserba ng espasyo ng banner mula sa pinakaunang pintura — fixed-height na placeholder, `min-height` sa footer, o isang banner na nakaayos sa ibaba na hindi nagtutulak ng nilalaman. Ang mga modernong CMP ay dapat mag-alok ng no-CLS na configuration na out of the box.

Google Consent Mode V2 at Pagganap

Pinapayagan ng Consent Mode V2 ang mga Google tag na tumakbo sa isang walang-cookie na estado bago ang consent, na nagpapasa ng mga signal sa pamamagitan ng `gtag('consent', 'default', {...})`. Ito ay mahusay para sa pagpapatuloy ng pagsukat, ngunit ang gtag.js library mismo ay 50-90KB. I-load ito nang asynchronous at itakda ang mga default nang maaga hangga't maaari upang maiwasan ang mga kondisyon ng lahi.

• Itakda ang mga default bago mag-load ng gtag — ilagay ang default na tawag sa consent sa ulo, bago ang script ng gtag.js.
• Gamitin ang `analytics_storage: 'denied'` bilang default — pinipigilan ang data na nakolekta bago ang consent.
• I-update sa Pagtanggap sa pamamagitan ng requestIdleCallback — iwasan ang pagharang sa pangunahing thread.

Pagsukat ng Epekto ng CMP sa Core Web Vitals

Huwag hulaan — sukat. Gamitin ang mga tool na ito upang masukat ang epekto ng iyong banner:

• PageSpeed Insights — data sa larangan mula sa Chrome UX Report kasama ang laboratoryo ng Lighthouse audit. Ihambing ang mga marka na may at walang script ng CMP.
• Web Vitals Chrome extension — real-time na LCP, INP, CLS overlay sa panahon ng lokal na pagsubok.
• WebPageTest.org — filmstrip at waterfall view na nagpapakita nang eksakto kung kailan nag-render ang banner at kung ano ang hinaharangan nito.
• Search Console Core Web Vitals report — 28-araw na data sa larangan na nakagrupo ayon sa pattern ng URL. Suriin kung ang mga landing page na may iyong banner ay may iba't ibang marka kaysa sa mga pahina na wala.

Paano Nananatiling Mabilis ang FlexyConsent