Vad är Core Web Vitals? LCP, INP och CLS

01Vad är Core Web Vitals?

Att en sida är ”snabb” går inte att uttrycka med ett enda tal. För användaren handlar det om hur snabbt innehållet syns, hur fort sidan reagerar när man trycker på en knapp och om innehållet hoppar runt medan man läser. Core Web Vitals består av tre mått som mäter just dessa tre upplevelser var för sig.

Google använder måtten som en del av signalerna för sidupplevelse. De avgör inte rankingen på egen hand, men av två sidor med lika starkt innehåll kan den med bättre upplevelse få en fördel. Den största effekten finns ändå i användarbeteendet: besökare stannar längre och konverterar oftare på snabba och stabila sidor.

Måtten utvecklas över tid. Måttet FID, som tidigare användes för interaktion, har till exempel ersatts av INP, som bättre speglar alla interaktioner. Därför är det en bra vana att följa de aktuella definitionerna i den officiella dokumentationen på web.dev.

02Tabell över gränsvärden

För varje mått definierar Google tre intervall: bra, behöver förbättras och dåligt. För att en sida ska räknas som ”bra” måste värdet ligga i det bra intervallet vid minst 75 procent av besöken. Mobil och dator bedöms var för sig.

03Vad är LCP?

LCP (Largest Contentful Paint) är tiden från att sidan börjar laddas tills det största innehållselementet på skärmen (oftast huvudbilden, en videoaffisch eller ett stort rubrikblock) har laddats och ritats upp. Det är måttet som ligger närmast känslan av att ”sidan har öppnats”.

Vad som försämrar LCP

• Långsamt serversvar (hög TTFB)
• Stor, okomprimerad huvudbild eller bild i ett gammalt format
• Huvudbilden är inställd på fördröjd laddning (lazy loading)
• CSS- och JavaScript-filer som blockerar att sidan visas
• Huvudinnehållet byggs upp i efterhand med JavaScript

Så förbättrar du LCP

Servera huvudbilden i WebP eller AVIF och i rätt storlek, ta bort fördröjd laddning och ge den hög prioritet vid behov. Korta serverns svarstid med cache och CDN och skjut upp skript som inte är kritiska.

<img src="/img/hero.webp" alt="Huvudbild" width="1200" height="630" fetchpriority="high">

04Vad är INP?

INP (Interaction to Next Paint) mäter hur lång tid det tar innan sidan visuellt svarar på användarens klick, tryck och tangentbordsinteraktioner under hela besöket. Det rapporteras en av de långsammaste interaktionerna under besöket, så det är den övergripande responsen som bedöms och inte ett enskilt snabbt klick.

Om ingenting händer en stund när du trycker på menyknappen och menyn sedan plötsligt öppnas, syns den fördröjningen i INP. Problemet är oftast JavaScript-kod som håller webbläsarens huvudtråd upptagen under lång tid.

Så förbättrar du INP

• Dela upp långvariga JavaScript-uppgifter i mindre delar.
• Ta bort oanvända och onödiga skript och minska antalet tredjepartskoder.
• Skjut upp tunga uppgifter som utförs efter en interaktion, till exempel att skicka analysdata.
• Undvik en mycket stor och komplex sidstruktur (DOM).
• Ge användaren visuell återkoppling direkt och gör det tunga arbetet efteråt.

05Vad är CLS?

CLS (Cumulative Layout Shift) mäter hur mycket sidans innehåll oväntat flyttar sig. Typiska exempel på högt CLS är att texten hoppar nedåt medan du läser eftersom en annons högre upp laddas sent, eller att knappen flyttar sig precis när du ska klicka.

CLS är inte en tid utan ett enhetslöst poängtal. Hänsyn tas till storleken på det element som flyttar sig och hur långt det flyttar sig. Förändringar som användaren själv orsakar, till exempel genom att öppna en dragspelsmeny, räknas inte med.

Så förbättrar du CLS

• Ange bredd och höjd eller bildförhållande för alla bilder och videor.
• Reservera plats i förväg för annonser, kartor och inbäddat innehåll.
• Lägg inte till banners eller notiser ovanför innehåll som redan visas.
• Ladda webbtypsnitt med font-display: swap och håll reservtypsnittets mått nära originalets.
• Använd egenskapen transform i stället för position i animationer.

06Fältdata och labbdata

Bedömningen av Core Web Vitals bygger på fältdata som samlas in från verkliga Chrome-användare. Datan presenteras via Chrome UX Report (CrUX) som ett genomsnitt för de senaste 28 dagarna. För sidor med för lite trafik kan fältdata saknas.

Labbdata är i stället resultatet av ett enskilt test som verktyg som Lighthouse kör i en kontrollerad miljö. Det är mycket värdefullt för att hitta problem och direkt testa en lösning, men det speglar inte fullt ut verkliga användares variation av enheter och uppkopplingar. Mått som bygger på verklig interaktion, som INP, går inte att mäta direkt i labb. I stället används Total Blocking Time (TBT) som ett ungefärligt riktmärke.

import { onLCP, onINP, onCLS } from 'web-vitals';

function gonder(metrik) {
  console.log(metrik.name, metrik.value);
  // Här kan du skicka värdet till ditt eget analysverktyg
}

onLCP(gonder);
onINP(gonder);
onCLS(gonder);

07Färdplan för förbättring

När du åtgärdar problem med Core Web Vitals sparar du arbete genom att följa en systematisk ordning i stället för att göra slumpmässiga ändringar.

1. Öppna rapporten Core Web Vitals i Search Console och identifiera grupperna av problemsidor.
2. Testa en exempelsida från varje grupp i PageSpeed Insights och notera vilket mått som är svagt.
3. Genomför Lighthouse-rekommendationerna och börja med den som ger störst vinst.
4. Publicera ändringen och starta valideringen av åtgärden i Search Console.
5. Vänta några veckor tills fältdatan har uppdaterats och jämför sedan resultaten.

08Core Web Vitals och SEO-strategi

Core Web Vitals ersätter inte SEO utan stöder det. Originellt och pålitligt innehåll som möter sökintentionen är fortfarande det mest avgörande. Men mellan sidor med likvärdig innehållskvalitet kan skillnaden i upplevelse bli utslagsgivande, och en bra upplevelse ökar chansen att en vunnen besökare också konverterar.

Det mest effektiva är att ta hänsyn till prestanda redan i designfasen. När lätta komponenter, rätt visuell layout och en enkel kodstruktur finns på plats från början behövs färre korrigeringar i efterhand. Vi tillämpar det här arbetssättet i vår SEO-anpassade webbdesign och mobilanpassade design. Checklistan för designfasen hittar du i vårt inlägg om SEO-anpassad webbdesign.

Praktiska steg för att göra sidan snabbare går vi igenom i vår guide om hur du gör din webbplats snabbare, och rutinen för löpande uppföljning i inlägget om underhåll av webbplatser. För regelbunden rapportering av mätvärdena tillsammans med sökresultaten kan du få hjälp av vår tjänst SEO och analys.