Core Web Vitals

Core Web Vitals är tre mått som Google använder för att beskriva hur snabbt, responsivt och stabilt en sida känns för den som besöker den. De tre måtten heter LCP, INP och CLS, och de mäter laddning, interaktion respektive visuell stabilitet, var och en med ett eget tröskelvärde. Det speciella är att Google inte gissar utifrån ett enskilt labbtest, utan hämtar siffrorna från riktiga besökare i Chrome och bedömer sidan på hur de faktiskt upplever den snarare än på hur den beter sig i en perfekt testmiljö. Det gör arbetet besläktat med bredare optimering av sidhastighet.

Du stöter oftast på begreppet i PageSpeed Insights eller i Google Search Console, där en sida får en färg som speglar dess status: grön när måttet är bra (good), gul när det behöver förbättras (needs improvement) och röd när det är dåligt (poor). Hädanefter håller vi oss till de svenska färgerna och orden. Den här sidan går igenom vad varje mått betyder, vilka värden som räknas som bra, hur du mäter och vad du faktiskt gör för att flytta en sida från rött till grönt. Den knyter också ihop det med hur Google indexerar dina sidor och hur upplevelsen samspelar med trovärdighet enligt E-E-A-T.

Vad Core Web Vitals faktiskt mäter

Core Web Vitals är inte ett enda värde utan tre separata mått som var och ett fångar en del av användarupplevelsen. En sida kan vara snabb att ladda men ändå kännas trög när du klickar, eller snabb och responsiv men så hoppig att du trycker fel. Genom att mäta tre saker var för sig fångar Google fler sätt som en sida kan irritera besökaren på, och måtten ingår i en bredare bedömning av sidupplevelse tillsammans med signaler som mobilanpassning, säker anslutning och trovärdighetsfaktorer enligt E-E-A-T. Tekniken under huven hänger dessutom ihop med hur Google indexerar dina sidor.

Det är värt att skilja på två datakällor från start, eftersom de svarar på olika frågor och ofta visar olika resultat för samma sida. Fältdata kommer från riktiga besökare och samlas enligt Google i Chrome User Experience Report, ofta förkortat CrUX, över ett rullande fönster på 28 dagar. Labbdata kommer i stället från ett enskilt testkörningstillfälle i Lighthouse med fasta inställningar. Det är fältdatan som Google faktiskt rankar på, men labbdatan är ofta lättare att felsöka i, och mönstren i fältet visar hur verkliga enheter, nät och beteenden påverkar dina nyckeltal.

Snabbreferens: tröskelvärden per mått

Vill du snabbt slå upp vad som räknas som grönt, gult eller rött för varje mått samlar den här referensen alla tröskelvärden på ett ställe:

• LCP: grönt under 2,5 s, gult 2,5 till 4 s, rött över 4 s.
• INP: grönt under 200 ms, gult 200 till 500 ms, rött över 500 ms.
• CLS: grönt under 0,1, gult 0,1 till 0,25, rött över 0,25.

Så läser du av färgerna

• Grön: sidan klarar tröskeln för minst tre av fyra besökare.
• Gul: värdet ligger i gränslandet och bör ses över.
• Röd: värdet är klart över tröskeln och påverkar upplevelsen.

Vad är bra LCP och hur förbättrar du det?

LCP står för Largest Contentful Paint och mäter hur lång tid det tar innan sidans största synliga element är klart, vilket oftast är en hjältebild, en stor rubrik eller en videoram. Måttet svarar i praktiken på frågan om när det känns som att sidan har laddat. Enligt Google räknas ett LCP under 2,5 sekunder som grönt, mellan 2,5 och 4 sekunder som gult och över 4 sekunder som rött, och just laddningstiden är ofta första steget i arbetet med sidhastighet.

Långsam LCP beror oftast på tunga, okomprimerade bilder som laddas i full upplösning på mobil, eller på en server som dröjer innan första byten ens skickas. Render-blockerande CSS och JavaScript högt upp i sidan bidrar också, liksom typsnitt som laddas sent och tvingar fram en omritning, och i många fall saknas cachning eller ett Content Delivery Network nära besökaren.

Så förbättrar du LCP:

• Komprimera och beskär hjältebilden, och servera moderna format som WebP eller AVIF.
• Lägg in fetchpriority="high" på det element som blir LCP, vilket talar om för webbläsaren att hämta det före allt annat.
• Använd ett Content Delivery Network (CDN) så att innehållet ligger geografiskt nära besökaren.
• Skjut upp eller ladda render-blockerande resurser asynkront.
• Aktivera cachning på servern så att återkommande besökare får sidan snabbare.

Kör du WordPress sitter de tyngsta LCP-problemen ofta i temat, något vi går igenom i guiden om SEO för WordPress.

Vad är bra INP och hur gör du sidan mer responsiv?

INP står för Interaction to Next Paint och ersatte enligt Google FID som det officiella måttet för responsivitet i mars 2024. Där ett gammalt FID-värde bara mätte fördröjningen på din allra första interaktion tittar INP på alla interaktioner under besöket och rapporterar i praktiken den sämsta. Det gör måttet ärligare, eftersom en sida kan svara snabbt på första klicket men hacka när du fyller i ett formulär. Enligt Google är ett INP under 200 ms grönt, 200 till 500 ms gult och över 500 ms rött.

Det som tynger ner INP är nästan alltid att huvudtråden har för mycket att göra just när besökaren vill ha svar. Tunga JavaScript-uppgifter blockerar tråden när du klickar, och ovanpå det körs gärna tredjepartsskript för chatt, analys och annonser samtidigt. Stora event-lyssnare som gör för mycket arbete vid varje klick förvärrar bilden, och om en liten ändring tvingar fram en omritning av stora delar av sidan känns även enkla interaktioner sega.

Du vänder på det genom att lätta på huvudtråden. Dela upp långa uppgifter i mindre bitar så att tråden hinner svara mellan dem, ladda in tredjepartsskript senare eller bara när de faktiskt behövs, och skär ner mängden JavaScript som körs redan vid sidladdning. Arbete som kan vänta lägger du med fördel på requestIdleCallback, alltså ett sätt att köra det när webbläsaren ändå är ledig i stället för mitt i en interaktion.

Tidigare mätte man besläktade saker med Total Blocking Time i labbmiljö, och TBT är fortfarande en bra proxy när du felsöker eftersom det fångar samma trögkörda JavaScript som ofta drar ner INP i fält.

Vad är bra CLS och hur stabiliserar du layouten?

CLS står för Cumulative Layout Shift och mäter hur mycket innehållet flyttar sig oväntat medan sidan laddar. Du känner förmodligen igen problemet från när du ska klicka på en länk, en annons laddar in ovanför och du plötsligt trycker på fel sak. CLS uttrycks som ett tal utan enhet, där enligt Google under 0,1 är grönt, 0,1 till 0,25 gult och över 0,25 rött.

Det här orsakar hopp i layouten:

• Bilder utan angivna mått (width och height) som reserverar fel utrymme.
• Annonser och inbäddningar som skjuts in utan reserverad plats.
• Webbtypsnitt som byts ut sent och ändrar textens storlek.
• Innehåll som injiceras dynamiskt högt upp på sidan efter laddning.

Så förbättrar du CLS:

• Ange alltid width och height, eller aspect-ratio, på bilder och videor.
• Reservera plats för annonser i förväg så att de inte knuffar innehåll.
• Förladda typsnitt och använd font-display: optional eller swap medvetet.
• Undvik att lägga in nytt innehåll ovanför det besökaren redan tittar på.

Varför Core Web Vitals spelar roll för ranking och besökare

Ja, Core Web Vitals påverkar rankningen, men effekten är mindre än många befarar: måtten är enligt Google en av flera kvalitetssignaler i bedömningen av sidupplevelsen och inte en huvudfaktor, och relevant och bra innehåll väger fortfarande tyngst. Det realistiska sättet att se det är som tungan på vågen: när två sidor är likvärdiga i innehåll kan bättre värden ge ett litet övertag, vilket gör måtten till en pusselbit i en bredare innehållsstrategi.

Den andra och ofta viktigare anledningen handlar inte om Google alls, utan om dina besökare och dina kunder:

• Snabba och stabila sidor håller kvar besökare längre och sänker andelen som lämnar direkt.
• En bättre upplevelse hjälper konverteringen oavsett vad Google gör med signalen.
• En sajt som lever på att förvandla besökare till kunder tjänar på upplevelsen i sig.
• Effekten gäller lika mycket för en butik som för en sajt med nyheter, en community eller affiliate-länkar.

Vill du jämföra dig med dem du tävlar mot är upplevelsen dessutom något du kan väga in i en konkurrentanalys, eftersom långsamma rivaler ofta lämnar ett tydligt fönster öppet.

Snabb på desktop men rött på mobil?

Det är ett av de vanligaste klagomålen, och förklaringen är nästan alltid datakällan. Din egen dator har snabb processor och fast bredband, men fältdatan väger in besökare på äldre mobiler och svajigt mobilnät, och det är deras upplevelse som avgör betyget. Det här är också skälet till att en lokal aktör, som ofta möter kunder på mobilnät, bör titta på just fältdatan när hen jämför sig i sitt närområde, till exempel inom SEO i Stockholm. Testa därför alltid i PageSpeed Insights mobilläge och titta på fältdatan, inte bara på den snabba siffran du själv ser.

Hur mäter du Core Web Vitals i praktiken?

Du behöver inga betalverktyg för att komma igång, och de flesta gratisalternativ bygger ofta på samma öppna data och pagespeed-bibliotek under huven. Gör så här i ordning:

1. Öppna PageSpeed Insights och klistra in din URL för att se både fält- och labbdata.
2. Logga in i Google Search Console och öppna rapporten Core Web Vitals för en samlad bild av alla sidor.
3. Gruppera de sidor som är röda eller gula och börja med de mest besökta.
4. Använd fliken Performance i Chrome (Lighthouse) för att felsöka en enskild sida på djupet.
5. Mät om efter varje ändring, men ge fältdatan några veckor att hinna uppdateras.

För större sajter crawlar Screaming Frog hela domänen och pekar ut sidmallar med problem, vilket är effektivare än att kontrollera sida för sida. Vill du förstå varför labb och fält skiljer sig åt är Googles egen dokumentation på web.dev en bra utgångspunkt.

Vad ska du göra först?

Om du vill ha en konkret startordning så att du vet vad du ska göra, ta de här stegen i tur, eftersom de ger mest effekt för minst arbete:

• Hitta sidans LCP-element och se till att det laddar snabbt.
• Komprimera de tyngsta bilderna och servera moderna format.
• Ge alla bilder och inbäddningar fasta mått så att CLS sjunker.
• Skjut upp tunga eller icke-kritiska JavaScript-skript.
• Lägg de mest besökta sidorna först, eftersom de väger tyngst i fält.

Behöver du fördjupning sitter mycket av detta i samma verktygslåda som optimering av sidhastighet.

Vanliga missförstånd om Core Web Vitals

Det första många tror är att Core Web Vitals bara är ett annat ord för sidhastighet, men det stämmer inte: INP mäter responsivitet och CLS mäter visuell stabilitet, två saker som en ren hastighetsmätning missar helt. En sida kan ladda blixtsnabbt och ändå få underkänt på INP om den hackar vid interaktion, så ett enda snabbt LCP räcker inte.

Ett annat vanligt misstag är att stirra sig blind på Lighthouse-poängen. En hög siffra där är trevlig men avgör inte din ranking, eftersom det är fältdatan från riktiga besökare som Google väger in. Slutligen är måtten inte huggna i sten: Google har redan bytt ut FID mot INP, så det lönar sig att följa hur de utvecklas i community och dokumentation.

En relaterad missuppfattning är att tro att hastighet är hela bilden, när upplevelsen i själva verket samspelar med både hur sidan indexeras och hur väl innehållet beskrivs för sökmotorn i din innehållsstrategi.

Plattformsspecifika fällor i WordPress

För dig som kör WordPress finns ofta de största vinsterna i temat och i plugin-floran snarare än i någon enstaka rad CSS, eftersom ett tungt tema ensamt kan dra ner alla tre måtten. Då hjälper det mer att byta eller rensa än att finjustera. Vanliga fällor:

• WordPress-teman som lastar in tunga skript och sliders på varje sida.
• Plugin som dubblerar bibliotek eller laddar fonter i onödan.
• Tredjepartsbäddningar som ignorerar din reserverade plats.
• Saknad bildoptimering i mediabiblioteket.

Core Web Vitals belönar inte den snabbaste sidan i ett labb, utan den sida som känns bra för flest riktiga besökare, så bygg för dem och låt siffrorna följa med.

Hela poängen är att flytta sidan från rött till grönt där det räknas, alltså i fält. Eftersom Core Web Vitals hänger tätt ihop med hur Google hittar och läser dina sidor är det värt att förstå tekniken under huven, från crawling och indexering till hur dina mätvärden landar i dina nyckeltal och stöttar en hållbar innehållsstrategi.