Kolm Core Web Vitals'i 2026. aastal

Google mõõdab leheküljekogemuse jaoks kolme peamist välimõõdikut. Igal on lävi „Hea" tulemusele:

• Largest Contentful Paint (LCP) — aeg suurima nähtava elemendi renderdamiseks. Hea: alla 2,5 sekundi.
• Interaction to Next Paint (INP) — reageerimine kõigile kasutaja interaktsioonidele (asendas FID märtsis 2024). Hea: alla 200 ms.
• Cumulative Layout Shift (CLS) — visuaalne stabiilsus laadimise ajal. Hea: alla 0,1.

Nõusolekuriba, mis blokeerib renderdamise, käivitab laadimisel rasket JavaScript'i või sisestab hiliseid paigutusmuutusi, võib lükata mis tahes neist „Vajab parandamist" või „Kehv" vahemikku — ja Google kasutab 28 päeva väliteavet päriselt Chrome'i kasutajatelt, nii et mööduvad probleemid muutuvad püsivateks edetabeli signaalideks.

Kuidas nõusolekuribad kahjustavad LCP-d

Largest Contentful Paint käivitub tavaliselt kangelaspildil või pealkirjal. Mitmed nõusolekumustrid lükkavad seda tarbetult edasi:

Renderdamist blokeerivad CMP-skriptid

CMP laadimine sünkroonselt dokumendi päisest peatab HTML-i parsimise, kuni skript laaditakse alla ja täidetakse. Kui CMP on aeglasel CDN-il või külmal vahemälul, võite LCP-le globaalselt lisada 200–800 ms.

Kangelast kattev riba

Kui nõusolekuriba on paigutatud modaalse ülekattena LCP-elemendile, mõõdavad brauserid ikkagi LCP kaetud elemendist. Kui aga riba on suurim joonistatud element, saab sellest LCP-kandidaat — ja kui see renderdatakse JavaScript'i kaudu pärast lehe laadimist, on LCP kunstlikult kõrge.

Lahendus: asünkroonne laadimine väikese sisemise Bootstrap'iga

Laadige täielik CMP asünkroonselt (`async` või `defer`), ainult väikese sisemise skriptiga algse riba kuvamiseks. Eesmärgiks bootstrap väiksem kui 5 KB pakkitult. Täielik käitumusloogika, tarnijate loendid ja UI-kroom saavad laisk-laadida pärast esimest joonistamist.

Kuidas nõusolekuribad kahjustavad INP-d

Interaction to Next Paint mõõdab halvimat reageerimisaega kõigi klikkide, puudutuste ja klahvivajutuste üle seansi jooksul. Küpsiste nõusoleku interaktsioonid on sageli kasutaja esimene interaktsioon — nii et aeglane Nõustu-nupp rikub tulemuse.

Raske töö Nõustumise korral

Paljud CMP-d täidavad nõustumise korral sünkroonset tööd: laadivad 40+ tarnijaskripti, kirjutavad localStorage-i, käivitavad dataLayer sündmused, käivitavad Google Consent Mode uuendused. Kui see ületab 200 ms, kannatab INP.

Lahendus: tööde järjekorda seadmine pärast joonistamist

Nõustu-kliki korral peitke riba kohe ja ajastage raske töö `requestIdleCallback` või `setTimeout(0)` abil. Kasutaja näeb riba kohest kadumist; tarnijaskriptid laadivad taustal ilma interaktsiooni blokeerimata.

Kuidas nõusolekuribad kahjustavad CLS-i

Cumulative Layout Shift jälgib ootamatuid visuaalseid liikumisi. Ribad on klassikaline CLS allikas, kui need süstitakse DOM-i pärast sisu joonistamist.

Hiline riba süstimine

Kui riba ilmub 800 ms pärast LCP-d, lükkab see sisu alla ja tekitab paigutuse nihke. Isegi väike riba võib käivitada 0,1+ CLS-skoori, kui see mõjutab suurt osa vaateakna.

Küpsiste eelistuste vidin uuesti renderdab

Jaluse eelistuste vidinad, mis laadivad tarnija logosid asünkroonselt, võivad kogu jaluse mitu korda ümber kujundada, mis suurendab CLS-i.

Lahendus: ruumi reserveerimine ette

Kasutage CSS-i riba ruumi reserveerimiseks esimesest joonistamisest — fikseeritud kõrgusega kohatäide, `min-height` jalusel või alt fikseeritud riba, mis ei lüka sisu edasi. Kaasaegsed CMP-d peaksid pakkuma karbist välja CLS-vaba konfiguratsiooni.

Google Consent Mode V2 ja jõudlus

Consent Mode V2 lubab Google'i siltidel töötada küpsisevabas olekus enne nõusolekut, edastades signaale `gtag('consent', 'default', {...})` kaudu. See on suurepärane mõõtmise järjepidevuse jaoks, kuid gtag.js teek ise on 50–90 KB. Laadige see asünkroonselt ja määrake vaikeväärtused nii varakult kui võimalik, et vältida võistlustingimusi.

• Seadke vaikeväärtused enne gtag laadimist — pange nõusoleku vaikekutse päisesse, enne gtag.js skripti.
• Kasutage `analytics_storage: 'denied'` vaikimisi — minimeerib enne nõusolekut kogutud andmeid.
• Uuendage Nõustumise korral requestIdleCallback kaudu — vältige põhilõime blokeerimist.

CMP mõju mõõtmine Core Web Vitals'ile

Ärge arvake — mõõtke. Kasutage neid tööriistu oma riba mõju kvantifitseerimiseks:

• PageSpeed Insights — väliteavet Chrome UX Reportist koos labori Lighthouse auditiga. Võrrelge tulemusi CMP skriptiga ja ilma.
• Web Vitals Chrome'i laiendus — reaalajas LCP, INP, CLS ülekate kohaliku testimise ajal.
• WebPageTest.org — filmiriba ja kose vaade, mis näitab täpselt, millal riba renderdatakse ja mida see blokeerib.
• Search Console Core Web Vitals'i aruanne — 28 päeva väliteave URL-mustri järgi rühmitatud. Kontrollige, kas teie ribaga maandumislehed saavad erineva tulemuse kui lehed ilma ribata.

Kuidas FlexyConsent kiirena püsib