Core Web Vitals

Vad är Core Web Vitals?

Core Web Vitals (CWV) är en uppsättning av tre mätvärden som Google använder för att mäta den tekniska användarupplevelsen på en webbplats. De lanserades 2020 och har sedan 2021 varit en officiell rankningsfaktor. Dåliga Core Web Vitals kan sänka dina placeringar på Google, medan bra resultat ger en konkurrensfördel.

De tre Core Web Vitals

LCP (Largest Contentful Paint)

Mäter laddningshastigheten – specifikt hur lång tid det tar innan det största synliga innehållselementet (vanligtvis en hero-bild eller ett stort textblock) har renderats fullständigt.

• Bra: Under 2,5 sekunder
• Behöver förbättras: 2,5–4,0 sekunder
• Dåligt: Över 4,0 sekunder

INP (Interaction to Next Paint)

Ersatte FID (First Input Delay) i mars 2024. Mäter reaktionshastigheten — hur snabbt sidan reagerar visuellt på användarinteraktioner som klick, tryck och tangentbordsinmatning under hela besöket.

• Bra: Under 200 millisekunder
• Behöver förbättras: 200–500 millisekunder
• Dåligt: Över 500 millisekunder

CLS (Cumulative Layout Shift)

Mäter visuell stabilitet – hur mycket sidinnehållet oväntat flyttar sig under inläsningen.

• Bra: Under 0,1
• Behöver förbättras: 0,1–0,25
• Dåligt: Över 0,25

Varför är CWV viktigt för din webbshop?

• Googles ranking: CWV är en officiell rankningsfaktor. Två sidor med samma innehåll och relevans – den med bättre CWV rankas högre.
• Konverteringsgrad: Snabba, stabila sidor ger bättre konverteringar. Google har dokumenterat att en förbättring av LCP med 100 ms kan öka konverteringarna med upp till 2 %.
• Användarupplevelse: Långsamma sidor, knappar som inte reagerar och en instabil layout frustrerar kunderna och driver dem till konkurrenterna.
• Avvisningsfrekvens: 53 % av mobilbesökarna lämnar en sida som tar mer än 3 sekunder att ladda.

Så här förbättrar du CWV

LCP-optimering

• Optimera bilder (WebP-format, rätt storlek, lazy loading för bilder under vikningen)
• Minimera CSS och JavaScript som blockerar rendering
• Använd CDN för att leverera statiska filer snabbare
• Förladda den viktigaste bilden (hero-bilden)

INP-optimering

• Minimera JavaScript-körning och undvik långa uppgifter (>50 ms)
• Uppskjut eller använd lazy-load för tredjepartsscript (chatt, analysverktyg, pixlar)
• Använd requestAnimationFrame för visuella uppdateringar

CLS-optimering

• Ange alltid dimensioner (bredd/höjd) för bilder och videor
• Reservera utrymme för dynamiskt innehåll (banners, annonser)
• Använd font-display: swap med preload för webbtypsnitt

Mätverktyg

• Google Search Console: Rapporten Core Web Vitals visar data för hela din webbplats baserat på verkliga användardata.
• PageSpeed Insights: Detaljerad analys av enskilda sidor med konkreta förbättringsförslag.
• Chrome DevTools (Lighthouse): Labbaserad prestandagranskning med detaljerade mätvärden.
• Web Vitals Extension: Chrome-tillägg som visar CWV i realtid.