Core Web Vitals 2026: så fixar du LCP, INP och CLS på riktigt

INP har varit officiell Core Web Vital i två år och tröskeln har skärpts. Här är vad som faktiskt flyttar nålen 2026 – med konkreta kodexempel.

Två år har gått sedan INP (Interaction to Next Paint) ersatte FID som Core Web Vital, och Googles december 2025-uppdatering skärpte hur metriken mäts på tunga interaktiva sidor. Det är dags att uppdatera din mentala modell för CWV.

Tröskelvärden 2026

Google klassar fortfarande mätvärdena i tre band, men "Good"-ribban är skarpare på vissa platformar:

Metric	Good	Needs improvement	Poor
LCP (Largest Contentful Paint)	≤ 2,5 s	2,5 – 4,0 s	> 4,0 s
INP (Interaction to Next Paint)	≤ 200 ms	200 – 500 ms	> 500 ms
CLS (Cumulative Layout Shift)	≤ 0,1	0,1 – 0,25	> 0,25

Mätningen sker på 75:e percentilen av riktiga användare (CrUX-data), inte i Lighthouse-labb. Det är därför en sajt som visar 95 i Lighthouse fortfarande kan ha "Poor" i Search Console.

LCP – det som faktiskt fungerar

LCP är nästan alltid en bild eller en hero-rubrik. Tre fixar som flyttar nålen mest:

Förladda LCP-bilden: <link rel="preload" as="image" href="hero.webp" fetchpriority="high"> direkt i <head>.
Ta bort lazy-load från hero-bilden. loading="lazy" på första bilden är klassiskt självskott.
Servera moderna format. AVIF eller WebP via <picture>. AVIF är ofta 30–50 % mindre än WebP.

På WordPress: aktivera AVIF via en image-optimerings-plugin eller en bild-CDN (t.ex. Cloudflare Images). På en React/TanStack-sajt: använd vite-imagetools eller en CDN som gör formatval automatiskt.

INP – den nya bossen

INP mäter den värsta interaktionen under sidans hela liv (klick, tangent, tap). Den brytkommer av en sak: lång main thread-blockering.

De tre vanligaste orsakerna:

Tunga tredjepartsskript som körs synkront. Chatt-widgets, CRM-pixlar och äldre Tag Manager-installationer. Ladda dem async eller efter requestIdleCallback.
Onödig React-re-render vid input. Använd useDeferredValue eller useTransition för dyra uppdateringar.
Stora handler-funktioner i event-listeners. Bryt upp arbete i mindre task-slices med scheduler.yield() (där det finns) eller setTimeout(fn, 0).

Mätning: använd web-vitals-biblioteket och skicka INP till GA4 som en custom event. Då ser du verklig data, inte Lighthouse-simuleringar.

CLS – nästan alltid lätt att fixa

Tre nästan-alltid-lösningar:

Sätt width och height på varenda <img> och <iframe>. Det reserverar utrymmet före laddning.
Reservera utrymme för annonser och embeds med en min-height-container.
Använd font-display: optional istället för swap om du har riktigt tunga webfonts – inget shift, lite mindre brandkänsla.

WordPress-specifikt

På WP är detta nästan alltid det som ger mest effekt på en standardinstallation:

Bygg om temat så att hero-sektionen är ren HTML/CSS – inte sliders som laddas av JS efter render.
Avinstallera page builders som genererar inline-CSS i sidfoten. De ger ofta 200–500 ms extra LCP.
Använd en cachelösning som genererar statisk HTML på filserver-nivå.

Mät rätt

Search Console > Core Web Vitals-rapport: den enda data som direkt påverkar din ranking. Polla varje vecka.
PageSpeed Insights: kombinerar CrUX-data + Lighthouse. Bra för att se trender.
Riktig user monitoring (web-vitals + GA4): ger dig granulär data per sidtyp och device.

Behöver ni en CWV-genomgång? Vi gör en specifik rapport på er sajt och pekar ut topp 5-åtgärderna med uppskattad effekt. Kontakta oss.

Källor

web.dev, Core Web Vitals (uppdaterad januari 2026)
Google Search Central, Understanding Core Web Vitals, 2026
Chrome User Experience Report (CrUX), Q4 2025