Kolme Core Web Vital -mittaria vuonna 2026

Google mittaa kolmea ensisijaista kenttämittaria sivukokemukselle. Jokaisella on kynnys "Hyvä" suorituskykyyn:

• Largest Contentful Paint (LCP) — aika suurimman näkyvän elementin renderöimiseen. Hyvä: alle 2,5 sekuntia.
• Interaction to Next Paint (INP) — reagointi kaikkiin käyttäjävuorovaikutuksiin (korvasi FID:n maaliskuussa 2024). Hyvä: alle 200 ms.
• Cumulative Layout Shift (CLS) — visuaalinen vakaus latauksen aikana. Hyvä: alle 0,1.

Suostumusbanneri, joka estää renderöinnin, suorittaa raskaan JavaScript-koodin latauksen yhteydessä tai lisää myöhäisiä asettelu muutoksia, voi työntää minkä tahansa näistä "Tarvitsee parannusta" tai "Heikko" -alueelle — ja Google käyttää 28 päivän kenttätietoja oikeilta Chrome-käyttäjiltä, joten ohimenevät ongelmat muuttuvat pysyviksi sijoitussignaaleiksi.

Miten suostumusbannereissa vahingoitetaan LCP:tä

Largest Contentful Paint laukeaa yleensä sankarikuvassa tai otsikossa. Useat suostumusmallit viivästyttävät sitä tarpeettomasti:

Renderöinnin estävät CMP-skriptit

CMP:n lataaminen synkronisesti dokumentin otsikosta pysäyttää HTML-jäsentämisen, kunnes skripti ladataan ja suoritetaan. Jos CMP on hitaalla CDN:llä tai kylmässä välimuistissa, voit lisätä LCP:hen 200–800 ms globaalisti.

Sankarialueen peittävä banneri

Jos suostumusbanneri on sijoitettu modaaliseksi peittokuvakerroksi LCP-elementin päälle, selaimet mittaavat silti LCP peitetystä elementistä. Jos banneri kuitenkin on suurin maalattu elementti, siitä tulee LCP-ehdokas — ja jos se renderöidään JavaScript-koodin kautta sivun latauksen jälkeen, LCP on keinotekoisesti korkea.

Korjaus: Asynkroninen lataus pienellä inline-bootstrapilla

Lataa täydellinen CMP asynkronisesti (`async` tai `defer`), vain pienellä inline-skriptillä alkuperäistä bannerin näyttämistä varten. Tavoittele alle 5 KB gzip-pakattua bootstrapia. Koko käyttäytymislogiikka, toimittajalistat ja käyttöliittymäkuvake voidaan laiska-ladata ensimmäisen maalauksen jälkeen.

Miten suostumusbannereissa vahingoitetaan INP:tä

Interaction to Next Paint mittaa pahinta vasteaikaa kaikkien napsautusten, kosketusten ja näppäinpainallusten osalta istunnon aikana. Evästeiden suostumusvuorovaikutukset ovat usein käyttäjän ensimmäinen vuorovaikutus — joten hidas Hyväksy-painike tuhoaa pisteen.

Raskas työ Hyväksymisessä

Monet CMP:t suorittavat synkronisen työn Hyväksymisessä: lataavat 40+ toimittajaskriptiä, kirjoittavat localStorage:hen, laukaisevat dataLayer-tapahtumat, käynnistävät Google Consent Mode -päivitykset. Jos tämä ylittää 200 ms, INP kärsii.

Korjaus: Töiden jonotus maalauksen jälkeen

Hyväksy-napsautuksessa piilota banneri välittömästi ja ajoita raskas työ `requestIdleCallback` tai `setTimeout(0)` -menetelmällä. Käyttäjä näkee bannerin katoavan välittömästi; toimittajaskriptit latautuvat taustalla estämättä vuorovaikutusta.

Miten suostumusbannereissa vahingoitetaan CLS:ää

Cumulative Layout Shift seuraa odottamattomia visuaalisia liikkeitä. Bannerit ovat klassinen CLS-lähde, kun ne lisätään DOM:iin sisällön maalauksen jälkeen.

Myöhäinen bannerin lisääminen

Jos banneri ilmestyy 800 ms LCP:n jälkeen, se työntää sisällön alas ja aiheuttaa asettelu-siirtymän. Jopa pieni banneri voi laukaista yli 0,1 CLS-pistemäärän, jos se vaikuttaa suureen osaan näkymäalueesta.

Evästeasetuswidgetin uudelleenrenderöinnit

Alatunnisteen asetuswidgetit, jotka lataavat toimittajan logot asynkronisesti, voivat reflowata koko alatunnisteen useita kertoja, mikä kasvattaa CLS:ää.

Korjaus: Tilan varaaminen etukäteen

Käytä CSS:ää bannerin tilan varaamiseen ensimmäisestä maalauksesta lähtien — kiinteäkorkuinen paikkamerkki, `min-height` alatunnisteessa tai alhaalta kiinnitetty banneri, joka ei työnnä sisältöä. Nykyaikaisten CMP:iden pitäisi tarjota CLS-vapaa konfiguraatio suoraan paketista.

Google Consent Mode V2 ja suorituskyky

Consent Mode V2 antaa Google-tunnisteille mahdollisuuden toimia evästeetömässä tilassa ennen suostumusta, välittäen signaaleja `gtag('consent', 'default', {...})` -kautta. Tämä on hienoa mittauksen jatkuvuuden kannalta, mutta gtag.js-kirjasto itsessään on 50–90 KB. Lataa se asynkronisesti ja aseta oletusarvot mahdollisimman aikaisin kilpailuehtojen välttämiseksi.

• Aseta oletusarvot ennen gtag:n lataamista — sijoita suostumuksen oletuskutsu otsikkoon, ennen gtag.js-skriptiä.
• Käytä `analytics_storage: 'denied'` oletuksena — minimoi ennen suostumusta kerätyt tiedot.
• Päivitä Hyväksymisessä requestIdleCallback:n kautta — vältä pääsäikeen estämistä.

CMP:n vaikutuksen mittaaminen Core Web Vitals -mittareihin

Älä arvaa — mittaa. Käytä näitä työkaluja bannerin vaikutuksen kvantifioimiseksi:

• PageSpeed Insights — kenttätiedot Chrome UX Reportista sekä laboratorio-Lighthouse-tarkastus. Vertaa pisteitä CMP-skriptin kanssa ja ilman.
• Web Vitals Chrome -laajennus — reaaliaikainen LCP, INP, CLS -peittokuva paikallisen testauksen aikana.
• WebPageTest.org — filmstrip ja vesiputousnäkymä, joka näyttää tarkalleen, milloin banneri renderöityy ja mitä se estää.
• Search Console Core Web Vitals -raportti — 28 päivän kenttätiedot ryhmiteltyinä URL-mallin mukaan. Tarkista, saako bannerisi sisältävät laskeutumissivut erilaisia pisteitä kuin sivut ilman banneria.

Miten FlexyConsent pysyy nopeana