Core Web Vitals 2026: så optimerar ni för INP och LCP

Sedan INP (Interaction to Next Paint) ersatte FID som Core Web Vital i mars 2024 har spelet ändrats. FID mätte bara den första interaktionen — INP mäter den värsta. Det innebär att sajter som såg snabba ut på PageSpeed nu faller igenom när verkliga användare klickar sig igenom komplexa React-vyer. 2026 är INP den mest missade rankningssignalen i teknisk SEO.

Grunderna först. Ni ska klara tre tröskelvärden vid 75:e percentilen av era riktiga besökare: LCP under 2,5 sekunder, INP under 200 millisekunder, CLS under 0,1. Verkliga användare, inte labbtester — Google rankar på CrUX-data, inte på PageSpeed-poängen ni får när ni klickar Kör.

LCP-fixarna som fortfarande gäller. Sätt fetchpriority=high på hero-bilden. Servera moderna format (AVIF/WebP) med korrekta srcset. Undvik att LCP-elementet är dolt bakom en client-side hydration. På Vite/React: preload den kritiska bilden i index.html och håll hero-fonten local eller preloaded — Google-fonts-CSS är fortfarande en av de vanligaste orsakerna till dålig LCP vi ser.

INP är det svåra. INP mäter tiden från att användaren interagerar tills nästa frame målas. Långa uppgifter på main thread — stora React-renderingar, tung state, oskyddade useEffects som synkront räknar om allt — är dödsstöten. Bryt upp arbete med startTransition, useDeferredValue och Web Workers för det som inte behöver blocka UI.

Vanligaste INP-boven vi hittar 2026: tredjepartsskript. En analytics-tagg som initieras med sync-JS, en chattwidget som injicerar 300 kB inline styles, en A/B-tool som blockerar första klicket. Ladda allt tredjepart med defer eller under requestIdleCallback, och tvinga varje leverantör att visa er sin INP-påverkan.

CLS är oftast enkelt. Ge bilder, embeds och annonser explicit width och height. Använd font-display: optional eller preloadade fonter för att undvika FOUT-hopp. Reservera plats för det som laddas asynkront. På 90 % av sajter är CLS ett par timmars arbete.

Mät i fält, inte i labbet. PageSpeed Insights ger er labdata + CrUX. CrUX är sanningen. För att få detaljer per sida: kör web-vitals-biblioteket i produktion och skicka mätvärdena till er egen endpoint eller GA4. Ni behöver ~1000 datapunkter per URL innan siffrorna är stabila.

React 19 och View Transitions API har flyttat gränserna. useOptimistic minskar upplevd latens dramatiskt på formulär. View Transitions gör navigering mellan sidor smidigare utan att kosta INP. Vite 6 med esbuild-splitting minskar initial JS-bundle på i genomsnitt 20 % i våra projekt.

En pragmatisk checklista för Q3 2026: 1) Kör npm i web-vitals och logga i produktion. 2) Öppna CrUX-dashboarden i Search Console. 3) Hitta värsta INP-URL:en och bryt upp den största useEffect-kedjan. 4) Fixa LCP-bilden med fetchpriority och preload. 5) Audita tredjepartsskript. 6) Mät igen efter två veckor.

Sammanfattat: prestanda är fortfarande pengar. Google har visat att en förbättring från 3 till 2 sekunders LCP höjer konvertering mätbart, och INP är den enskilt största dolda kostnaden i moderna JS-sajter. Att optimera Core Web Vitals är inte teknisk SEO — det är produktarbete som råkar ha en SEO-bonus.