Performance

Core Web Vitals förklarat för webbplatsägare

Core Web Vitals mäter laddning, respons och visuell stabilitet. Lär dig vad LCP, INP och CLS betyder, vilka värden du ska sikta på och var du ska börja.

Av Zebra Hosting Cloud

Core Web Vitals är tre mått som Google använder för att beskriva hur en sida känns för en verklig besökare: hur snabbt huvudinnehållet visas, hur snabbt sidan reagerar när någon trycker eller klickar och om layouten hoppar omkring under laddningen. De ingår i Googles signaler för sidupplevelse, men det viktigare skälet att bry sig är enklare. Besökare lämnar långsamma, hoppiga sidor, och de berättar sällan varför.

Den här guiden förklarar de tre måtten på enkel svenska, de gränsvärden som Google publicerar och hur du avgör vad du ska åtgärda först på en vanlig småföretagssajt.

De tre måtten i överblick

MåttVad det mäterBraDåligt
LCP (Largest Contentful Paint)Tid tills det största synliga elementet har ritats upp2,5 sekunder eller mindreÖver 4 sekunder
INP (Interaction to Next Paint)Hur lång tid sidan tar på sig att svara visuellt efter ett tryck, ett klick eller en tangent200 millisekunder eller mindreÖver 500 millisekunder
CLS (Cumulative Layout Shift)Hur mycket synligt innehåll som flyttar sig oväntat0,1 eller mindreÖver 0,25

Värden mellan "bra" och "dåligt" hamnar i ett intervall som "behöver förbättras". Google bedömer en sida vid den 75:e percentilen av verkliga besök, vilket innebär att tre fjärdedelar av dina besökare bör få en upplevelse som är lika bra som gränsvärdet eller bättre. Ett snabbt test på din egen bärbara dator bevisar inte att sidan klarar kraven.

Largest Contentful Paint: visas sidan?

LCP tittar på den största bilden, videoaffischen eller textblocket på första skärmen och registrerar när det är färdigritat. På de flesta sajter är det en stor toppbild eller en stor rubrik. En långsam LCP kommer oftast från en av fyra orsaker: ett långsamt serversvar, en tung eller dåligt formaterad bild, renderingsblockerande CSS eller JavaScript, eller att webbläsaren upptäcker nyckelbilden för sent.

Interaction to Next Paint: svarar sidan?

INP ersatte det äldre måttet First Input Delay i mars 2024. Medan First Input Delay bara tittade på den första interaktionen och bara på fördröjningen innan den började, tar INP hänsyn till interaktioner under hela besöket och rapporterar en av de långsammaste, från inmatning tills nästa bildruta ritats. Sidor som laddar snabbt men känns sega när man öppnar en meny eller trycker på en knapp har oftast ett JavaScript-problem: för mycket kod som körs på huvudtråden samtidigt.

Cumulative Layout Shift: står sidan stilla?

CLS summerar oväntade förflyttningar av synliga element. Du har känt av det när du skulle trycka på en länk och en banner laddades ovanför den och tryckte ned länken. Vanliga orsaker är bilder utan attributen width och height, annonser och inbäddningar som laddas sent, typsnitt som byts och ändrar textstorleken samt cookiebanners som läggs in högst upp på sidan.

Labbdata kontra fältdata

Det finns två sorters mätningar, och att blanda ihop dem skapar förvirring.

  • Fältdata kommer från verkliga besökare som använder verkliga enheter och nätverk. Google samlar in den från Chrome-användare och visar den i PageSpeed Insights och Search Console när din sajt har tillräckligt med trafik. Det är den som räknas vid bedömningen.
  • Labbdata kommer från ett simulerat test, till exempel Lighthouse. Det är reproducerbart, vilket gör det idealiskt för felsökning, men det är en enhet på en anslutning.

En liten sajt kan sakna fältdata helt. Använd i så fall labbtester för att hitta problem och betrakta resultaten som vägledning, inte som en dom.

Var du ska börja åtgärda

  1. Mät de sidor som spelar roll. Testa din startsida, din mest besökta landningssida och en typisk artikel- eller produktsida med en mobilprofil. Ta inte medelvärdet av hela sajten.
  2. Åtgärda det långsammaste måttet först. Om LCP är dålig och CLS är bra, arbeta med LCP.
  3. Börja med de billiga vinsterna. Komprimera och ändra storlek på toppbilden, ange bildmått, aktivera cachelagring, överväg ett CDN och ta bort tillägg eller skript du inte längre använder.
  4. Testa om efter varje ändring. Ändra en sak i taget så att du vet vad som hjälpte.
  5. Vänta tills fältdatan hunnit ikapp. Siffrorna från verkligheten samlas in under en rullande period, så förbättringar tar några veckor att visa sig fullt ut.

Vad hosting har med saken att göra

Core Web Vitals handlar mest om hur en sida är byggd, men hostingen sätter golvet. Ett långsamt serversvar fördröjer allt som följer, vilket direkt skadar LCP. Överfulla servrar, föråldrade PHP-versioner och saknad cachelagring på serversidan lägger alla till tid innan webbläsaren får den första byten. Bra arbete i front-end kan inte fullt ut kompensera för ett långsamt back-end.

En realistisk förväntan

Att klara alla tre måtten är ett värt mål, men det är ingen magisk rankningsknapp. Innehållets relevans spelar fortfarande mycket större roll. Se Core Web Vitals som ett sätt att ta bort friktion: de får inte en svag sida att ranka, men en långsam, hoppig sida gör det svårare att behålla de besökare du redan har förtjänat.

Vanliga misstag som sajtägare gör

  • Att jaga ett perfekt Lighthouse-betyg. Ett betyg på 100 i ett labbtest är inte målet. Målet är att klara de tre gränsvärdena för verkliga besökare.
  • Att bara testa på dator. Det mesta av bedömningen görs på mobil, och mobila enheter har långsammare processorer och anslutningar.
  • Att installera ett hastighetstillägg och stanna där. Tillägg kan hjälpa med cachelagring och bildhantering, men de kan inte ta bort en toppbild på 3 MB eller ett dussin marknadsföringsskript.
  • Att ignorera mallar. Sidor som byggs från samma mall delar oftast samma problem, så att åtgärda mallen åtgärdar många sidor på en gång. Search Console grupperar liknande webbadresser av just det skälet.

För en enkel logg över vad du ändrat och betyget före och efter. Det sparar gissningar när något försämras efter en uppdatering av ett tillägg.

Snabba sidor börjar med servern

Hos Zebra Hosting Cloud ingår kontrollpanelen Plesk i varje paket, där du kan välja aktuella PHP-versioner, och Cloudflare CDN finns på hostade sajter för att leverera statiska filer närmare besökarna. Tillsammans täcker de serversidan av ekvationen så att du kan koncentrera dig på själva sidan. Se vad varje paket erbjuder i hostingöversikten.