Sedan 2021 är Core Web Vitals officiella rankingsignaler hos Google. I praktiken betyder det: om din sajt är seg, så syns du sämre — oavsett hur bra ditt innehåll är. Den här guiden går igenom de tre Core Web Vitals-måtten på riktigt, vilka verktyg du ska använda, och de fixar som ger störst effekt på minst tid.
Vad är Core Web Vitals?
Core Web Vitals är Googles försök att mäta vad användarna upplever, inte bara vad servern svarar. De tre måtten:
| Förkortning | Vad det mäter | "Bra" enligt Google |
|---|---|---|
| LCP (Largest Contentful Paint) | Hur snabbt största synliga elementet laddas | Under 2.5 s |
| INP (Interaction to Next Paint) | Hur snabbt sajten reagerar på klick/tap | Under 200 ms |
| CLS (Cumulative Layout Shift) | Hur mycket sidan hoppar medan den laddas | Under 0.1 |
Google kollar på 75:e percentilen av riktiga besökarmätningar — inte bara på dina egna tester. Det betyder att tre av fyra besökare måste få "Bra"-värden för att Google ska räkna sidan som godkänd.
LCP – Largest Contentful Paint
LCP mäter när det största synliga elementet på sidan har renderat klart. Det är oftast en hero-bild, en stor rubrik, eller ett bakgrundsblock.
Vanliga orsaker till dålig LCP
- Stora okomprimerade bilder (oftast den enskilt största orsaken)
- Långsam serverrespons (TTFB över 600 ms)
- Render-blockerande JavaScript och CSS högt upp i
<head> - Externa font-files som blockerar rendering
- Saknad CDN, särskilt för internationell trafik
Så fixar du LCP
- Komprimera och konvertera bilder. Använd WebP eller AVIF, sätt explicit
widthochheight, ochloading="lazy"på bilder under folden — men inte på LCP-bilden. - Preload den största bilden. Lägg
<link rel="preload" as="image" href="...">i head:en för hero-bilden så browsern börjar hämta den direkt. - Servera bilder från CDN. Vercel, Cloudflare och andra CDN:er ger dig automatiskt nedladdning från geografiskt närmaste server.
- Förbättra serverresponsen. Använd cache (ISR, edge-cache eller liknande), och undvik tunga DB-frågor på första requesten.
- Skjut upp icke-kritisk JavaScript.
deferellerasyncpå script-taggar gör att rendering inte väntar på dem.
INP – Interaction to Next Paint
INP ersatte det gamla FID-måttet i mars 2024. Det mäter hela latensen från att användaren klickar tills sidan visar något nytt — inklusive eventuell väntan på huvudtråden.
Vanliga orsaker till dålig INP
- Tunga tredjepartsskript (analytics, chatwidgets, annonser)
- Klientside-rendering som blockerar huvudtråden vid varje klick
- Stora bundles utan code-splitting
- Event-handlers som gör tunga synkrona operationer
Så fixar du INP
- Lazy-loada tredjepartsskript. Ladda chat-widgets och liknande efter sidan är klar (
requestIdleCallbackeller efter användarinteraktion). - Code-splita din JavaScript. Använd dynamic imports (
import()) för att skjuta upp kod som inte behövs på första vyn. - Använd
useDeferredValueellerstartTransitioni React för att låta browsern andas mellan tunga updates. - Begränsa tredjeparts-cookies och tracker-scripts. Varje extern domän kostar ms.
- Minska DOM-storleken. Sidor med 3 000+ element är alltid sega vid interaktion.
CLS – Cumulative Layout Shift
CLS mäter hur mycket sidan hoppar medan den laddas. Det irriterande som händer när du försöker klicka på en knapp som plötsligt flyttar sig.
Vanliga orsaker till dålig CLS
- Bilder utan
widthochheight(browsern vet inte hur mycket plats de behöver) - Annonser och embeds som dyker upp sent
- Typsnitt som byter storlek vid laddning (FOIT/FOUT)
- Innehåll som infogas dynamiskt ovanför det som redan visas
- Cookie-banners utan reserverad plats
Så fixar du CLS
- Ange dimensioner på alla bilder och iframes.
width="800" height="450"reserverar plats även innan filen laddat. - Reservera utrymme för annonser och embeds med en min-height på containern.
- Använd
font-display: optionalellerswapmed matchande size. Eller pre-loada custom fonts. - Visa cookie-banners som overlay istället för att skjuta ner innehåll.
Läs vår fördjupning om bildoptimering för SEO för konkreta verktyg och format.
Verktyg du behöver känna till
| Verktyg | Vad det visar | Pris |
|---|---|---|
| PageSpeed Insights | LCP/INP/CLS för enskild sida, både lab och field | Gratis |
| Google Search Console → Core Web Vitals | Sajt-bred status, vilka URL:er som har problem | Gratis |
| Chrome DevTools → Lighthouse | Lokal audit med rekommendationer | Gratis |
| Chrome DevTools → Performance | Tidsspecifika trace-data för INP-felsökning | Gratis |
| WebPageTest | Detaljerad kaskad-vy, multipla locations | Gratis (limited) |
| Vercel Analytics / Speed Insights | Real-user-mätningar från egen trafik | Ingår i Vercel Pro |
Snabbtipset: kör PageSpeed Insights på en sida en gång. Notera värdena. Implementera de tre största fixarna. Mät igen efter en vecka när Google har samlat tillräckligt med field-data.
Field data vs lab data – viktigt att förstå
PageSpeed Insights visar två typer av siffror:
- Lab data: Googles syntetiska test, körs på en simulerad medium-end mobil med 4G-anslutning. Konsistent men inte representativt för dina riktiga användare.
- Field data (CrUX): Anonyma mätningar från riktiga Chrome-användare som besökt din sajt de senaste 28 dagarna. Det är det här Google använder för ranking.
Du kan ha bra lab-data men dålig field-data om dina riktiga användare är på sämre nätverk eller äldre mobiler. Field-data är källan till sanningen.
Vanliga misstag
- Testar bara desktop. Google indexerar mobile-first. Mobilvärdena är de som räknas.
- Optimerar för Lighthouse-score 100 istället för field-data. Lighthouse är ett indikativt mått, inte en rankingsignal.
- Glömmer fonts. Externa fonts blockerar både LCP och CLS. Self-host:a eller använd font-display korrekt.
- Ignorerar tredjepartsskript. Ett enda tungt analytics-script kan döda INP på hela sajten.
- Tror att caching räcker. Cache hjälper TTFB, men löser inte CLS eller INP.
Snabb-prioritering: vad du ska fixa först
Om du bara har en timme att lägga på Core Web Vitals — kör i denna ordning:
- Konvertera de fem största bilderna till WebP och sätt explicit
width/height. (Fixar både LCP och CLS.) - Preloada hero-bilden på de viktigaste sidorna.
- Skjut upp icke-kritiska tredjepartsskript till efter sidladdning.
- Verifiera att Google Search Console inte rapporterar "Behöver förbättras" på mobil.
Det löser oftast 70 procent av problemen.
Kopplingen till resten av din SEO
Snabb sajt är en av många rankingsignaler — men en av få där fel ger direkt skada. Bra Core Web Vitals förstärker effekten av allt annat: bra innehåll rankar ännu högre när sidan är snabb. Läs vår guide om teknisk SEO för helheten, och Google ranking-faktorerna 2026 för det större perspektivet.
Och kom ihåg: en sajt som laddar snabbt ger inte bara bättre ranking. Den konverterar bättre också — så fixarna betalar sig dubbelt.
Logga in på Ranqo om du vill se hur AI kan producera SEO-optimerat innehåll till din snabba sajt.