De tre Core Web Vitals 2026

Google mäter tre primära fältmätvärden för sidupplevelse. Var och en har ett tröskelvärde för "Bra" prestanda:

• Largest Contentful Paint (LCP) — tid för att rendera det största synliga elementet. Bra: under 2,5 sekunder.
• Interaction to Next Paint (INP) — svarstid för alla användarinteraktioner (ersatte FID i mars 2024). Bra: under 200ms.
• Cumulative Layout Shift (CLS) — visuell stabilitet under laddning. Bra: under 0,1.

En samtyckesbanners som blockerar rendering, kör tunga JavaScript vid laddning, eller injicerar sena layoutändringar kan pusha något av dessa till bandet "Behöver förbättring" eller "Dåligt" — och Google använder 28-dagars fältdata från riktiga Chrome-användare, så övergående problem blir bestående rankningssignaler.

Hur samtyckesbanners skadar LCP

Largest Contentful Paint aktiveras vanligtvis på en herobilder eller rubrik. Flera samtyckesmönster fördröjer det i onödan:

Renderingsblockerande CMP-skript

Att ladda CMP synkront från dokumenthuvudet stoppar HTML-parsning tills skriptet har laddats ner och körts. Om CMP:n är hostad på ett långsamt CDN eller har kallt cache kan du lägga till 200-800ms på LCP globalt.

Banner som täcker hero-elementet

Om samtyckesbanners är positionerad som en modal overlay som täcker LCP-elementet, kommer webbläsare ändå att mäta LCP från det täckta elementet. Om bannern dock är det största målade elementet, blir det LCP-kandidaten — och om det renderas via JavaScript efter sidladdning är LCP artificiellt högt.

Fix: Asynkron laddning med liten inline bootstrap

Ladda hela CMP:n asynkront (`async` eller `defer`), med bara ett litet inline-skript för den initiala bannervisningen. Sikta på en bootstrap som är mindre än 5KB gzippad. Full beteendelogik, leverantörslistor och UI chrome kan lazy-laddas efter första rendering.

Hur samtyckesbanners skadar INP

Interaction to Next Paint mäter den sämsta svarstiden över alla klick, tryck och tangenttryckningar under en session. Cookiesamtyckesinteraktioner är ofta den första interaktionen en användare gör — så en långsam acceptknapp förstör poängen.

Tungt arbete vid Accept

Många CMP:er utför synkront arbete vid Accept: laddar 40+ leverantörsskript, skriver till localStorage, utlöser dataLayer-händelser, triggar uppdateringar av Google Consent Mode. Om detta överstiger 200ms lider INP.

Fix: Köa arbete efter rendering

Vid klick på Accept, dölj omedelbart bannern och schemalägg tungt arbete med `requestIdleCallback` eller `setTimeout(0)`. Användaren ser bannern försvinna omedelbart; leverantörsskript laddas i bakgrunden utan att blockera interaktion.

Hur samtyckesbanners skadar CLS

Cumulative Layout Shift spårar oväntad visuell rörelse. Banners är en klassisk källa till CLS när de injiceras i DOM efter att innehållet har renderats.

Sen bannerinjektion

Om bannern dyker upp 800ms efter LCP, trycks innehållet ner och genererar ett layoutskifte. Till och med en liten banner kan utlösa ett CLS-poäng på 0,1+ om den påverkar en stor del av viewporten.

Omrenderingar av widget för cookieinställningar

Inställningswidgets i sidfoten som asynkront laddar leverantörslogotyper kan reflöda hela sidfoten flera gånger, vilket förvärrar CLS.

Fix: Reservera plats i förväg

Använd CSS för att reservera bannerns utrymme från allra första rendering — platshållare med fast höjd, `min-height` på sidfoten, eller en bottenfast banner som inte tränger undan innehåll. Moderna CMP:er bör erbjuda en konfiguration utan CLS direkt ur lådan.

Google Consent Mode V2 och prestanda

Consent Mode V2 låter Googles taggar köra i ett cookielöst tillstånd före samtycke, och skickar signaler via `gtag('consent', 'default', {...})`. Det är utmärkt för mätkontinuitet, men gtag.js-biblioteket i sig är 50-90KB. Ladda det asynkront och ange standardvärden så tidigt som möjligt för att undvika rastillstånd.

• Ange standardvärden innan gtag laddas — placera standardanropet för samtycke i head, före gtag.js-skriptet.
• Använd `analytics_storage: 'denied'` som standard — minimerar data som samlas in före samtycke.
• Uppdatera vid Accept via requestIdleCallback — undvik blockering av huvudtråden.

Mäta CMP:s påverkan på Core Web Vitals

Gissa inte — mät. Använd dessa verktyg för att kvantifiera din banners påverkan:

• PageSpeed Insights — fältdata från Chrome UX Report plus labb-Lighthouse-granskning. Jämför poäng med och utan CMP-skriptet.
• Web Vitals Chrome extension — LCP, INP, CLS overlay i realtid under lokal testning.
• WebPageTest.org — filmremsa och vattenfallsvy som exakt visar när bannern renderas och vad den blockerar.
• Search Console Core Web Vitals report — 28-dagars fältdata grupperade efter URL-mönster. Kontrollera om landningssidor med din banner poängsätts annorlunda än sidor utan.

Hur FlexyConsent förblir snabbt