Webb & prestanda

Core Web Vitals 2026: LCP, CLS och INP förklarade för beslutsfattare

av Mattias Pettersson

Google har ett nytt favoritspel. De kallar det "Core Web Vitals" — tre måttstockar för hur snabb och responsiv din webbsajt är.

Dessa tre saker påverkar din Google-rankning. De påverkar konverteringsgraden. Och de är specifika.

Här är vad varje mått betyder, varför Google bryr sig, och vad du kan göra åt det utan att behöva vara programmerare.

Varför spelar Core Web Vitals roll?

Google sa 2021: "Vi använder dessa tre mål för att bedöma webbsajters kvalitet. Sajter som inte når dem rangerar sämre än sajter som gör det."

Praktisk påverkan:

  • En långsam sajt kan hamna på andra sidan Google-resultat
  • En långsam sajt konverterar sämre (studier visar: 0,5 sekund extra latens = 7% färre konverteringar)
  • Google ger samma möjlighet till alla — det är inte svårare för en småbyrå än för Volvo

Två år senare har miljoner webbsajter gjort något åt det. Du borde också.

De tre måtten

1. LCP — Largest Contentful Paint

Vad betyder det: Hur lång tid det tar innan du ser det viktigaste innehållet på sidan.

Tänk dig att du klickar på en länk. Sidan börjar ladda. Först ser du en vit skärm. Sedan en header. Sedan en rubrik. Sedan en bild. Sedan lite text.

LCP är tiden tills "huvudbilden" eller "rubrikbilden" är synlig och renderad. Det är ofta en stor bild eller en H1-rubrik.

Gränsvärde: Under 2,5 sekunder för ett gott betyg.

Vad som bromsar LCP:

  • Stora bilder som inte är optimerade (en 2 MB JPG från mobilen istället för en 150 KB WebP)
  • Externa skript som laddar långsamt (Google Analytics-script, reklamskript, chat-widgets)
  • Långsam serverrespons (över 0,5 sekunder)
  • Dålig mobil-anslutning (4G från ett tåg)

Konkret exempel: Din sajt visar en stor hero-bild. Den är 5 MB JPG. Det tar 8 sekunder att ladda. LCP = 8 sekunder. Gränsvärde är 2,5. Misslyckad.

Hur du fixar det:

  • Komprimera bilder (använd WebP eller AVIF istället för JPG/PNG)
  • Använd en bildoptimerings-tjänst (CloudFlare, Imgix, eller din hosting-providers inbyggda bildoptimering)
  • Flytta CSS/JS som inte är kritisk längre ned på sidan
  • Se till att din server svarar på under 500 ms

2. CLS — Cumulative Layout Shift

Vad betyder det: Hoppar innehållet omkring när sidan laddar?

Du läser en artikel. Mitt i en mening dyker en annons upp från sidan och sänker all text nedåt. Irriterande. Det är CLS.

Gränsvärde: Under 0,1 (dvs maximalt 10% av skärmbredden får flytta sig).

Vad som orsakar dålig CLS:

  • Annonser som laddas långsamt
  • Bilder utan dimensioner (HTML vet inte hur stor bilden blir förrän den är laddad)
  • Inbäddade videos utan förifylld höjd
  • Web Fonts som byts ut när de är laddade (texten hoppar ett par pixlar)

Konkret exempel: Din sidmall säger <img src="hero.jpg"> men inte hur stor bilden är. Browsern reserverar ingen plats. Innehållet under skjuts uppåt. När bilden sedan laddas hoppar allt nedåt. Shift registreras. CLS blir dålig.

Hur du fixar det:

  • Lägg till width och height på alla <img>-taggar
  • Använd aspect-ratio CSS för videos och inbäddningar
  • Ladda in annonser långt ned på sidan (eller inte alls)
  • Web Fonts: se till att fallback-font och final-font är ungefär samma storlek

3. INP — Interaction to Next Paint

Vad betyder det: Hur fort sidan reagerar när du klickar på någonting.

Du fyller i ett kontaktformulär. Du klickar "Skicka". Vänta på respons. 3 sekunder senare ändras sidan. Det är dålig INP.

Det ersatte ett äldre mått som hette FID (First Input Delay) i mars 2024. Varför? FID mätte bara initiala fördröjningen. INP mäter hela vägen fram till att något faktiskt syns på skärmen.

Gränsvärde: Under 200 millisekunder för ett gott betyg.

Vad som orsakar dålig INP:

  • JavaScript-kod som körs i huvudtråden (blocking the main thread)
  • Stora och komplicerade beräkningar
  • Långsam API-respons

Konkret exempel: Du har 5 MB JavaScript som körs när sidan laddar. Det tar 2 sekunder att tolka och exekvera koden. Under dessa 2 sekunder kan du inte interagera. Du klickar en knapp. Ingenting händer. Vänta 2 sekunder. Sedan svar. INP = 2000 ms. Gränsvärde är 200 ms. Massivt misslyckad.

Varför denna ändring: JavaScript-tunga ramverk (React, Vue, Angular) började dominera webben. Många sajter använde så mycket JavaScript att de blev helt oreaktiva tills allt var laddat.

Google sa: "Vi bryr oss. Vi mäter detta nu."

Hur du fixar det:

  • Reducera JavaScript (behöver du verkligen React för en statisk sajt?)
  • Lazy-load JavaScript (ladda det bara när det behövs, inte direkt)
  • Minimera tredjepartsskript (Google Analytics, Hotjar, chat-widgets — de bromsar)
  • Optimera servern (långsam API-respons från servern = dålig INP)

Hur du mäter dessa

PageSpeed Insights

Gå till pagespeed.web.dev. Skriv in din URL. Vänta 30 sekunder. Du får tre tal:

  • Performance (0-100) — ofta dominerad av LCP
  • Accessibility (0-100)
  • Best Practices (0-100)
  • SEO (0-100)

Under "Core Web Vitals" ser du status för LCP, CLS och INP.

Viktigt: PageSpeed visar simulerade mätningar (en enhetlig testmiljö). Verkliga användarnas upplevelse kan skilja. En person på 4G från ett tåg upplever långsammare än en person på hemmafiber.

Google Search Console

Logga in på search.console.google.com. Gå till "Experience". Där ser du verklig data från Google Chrome-användare som besökt din sajt.

Detta är sanningen. Det är här du ser om dina Core Web Vitals är godkända eller misslyckade för riktiga användare.


Vad är en rimlig ambitionsnivå?

För en B2B-konsultwebbsajt (som Geekteq):

  • Mål: Lighthouse Performance 85+, Core Web Vitals "Godkänd" för minst 75% av användare
  • LCP: Mål 1,5-2 sekunder (gränsen är 2,5)
  • CLS: Mål under 0,05 (gränsen är 0,1)
  • INP: Mål under 100 ms (gränsen är 200 ms)

För en e-handelsplats (Shopify, WooCommerce):

  • Mål: Performance 75+
  • LCP, CLS, INP alla inom gränsen
  • Ofta svårare pga produktfilter, bilder, och tredjepartskod

För en blogg:

  • Mål: Performance 80+
  • Nästan alla CMS-bloggar kan uppnå detta utan stor insats

De vanligaste orsakerna till dåliga scores

Problem Orsak Lösning
Långsam LCP Stora bilder Komprimera, använd WebP
Långsam LCP Långsam server Migrera, cachea bättre
Dålig CLS Bilder utan höjd Lägg till width/height
Dålig CLS Annonser/widgets Flytta längre ned eller ta bort
Dålig INP Mycket JavaScript Reducera eller lazy-load
Dålig INP Långsam API Bättre cache, optimera databaser

Praktisk action plan

Vecka 1:

  1. Kör PageSpeed Insights på din startsida
  2. Notera vilka av LCP, CLS, INP som är röda (misslyckade)

Vecka 2:

  1. Prioritera det röda måttet
  2. Implementera en lösning (se tabellen ovan)
  3. Kör PageSpeed igen

Vecka 3-4:

  1. Monitorera med Search Console (ta ett par veckor innan data stabiliseras)
  2. Iterera på nästa röda mått

Många sajter kan gå från misslyckad till godkänd på 2-3 veckor genom att bara:

  • Komprimera bilder
  • Reducera JavaScript
  • Lägg till dimensioner på img-taggar

Slut-ord

Core Web Vitals är inte perfekta mål, men de är bättre än innan. De tvingar webbsajter att tänka på användarupplevelse istället för bara "coola funktioner".

Om din sajt är långsam:

  1. Mät den (PageSpeed Insights)
  2. Identifiera det värsta problemet (LCP, CLS eller INP)
  3. Fixa en sak åt gången
  4. Upprepa

Du behöver inte Lighthouse 100. Men 75+ Performance och godkänd på alla tre Core Web Vitals är realistiskt för nästan alla webbsajter.

Lycka till.

Tillbaka till bloggen Prata med oss

Relaterad tjänst

Behöver du hjälp med webbutveckling?

Webbutveckling