Core Web Vitals – Googles nya rankingfaktor

Googles Core Web Vitals är mätetal som visar hur användarvänlig en hemsida är. Sedan juni 2021 är de en rankingfaktor, det innebär att du bör ha dessa i åtanke när du arbetar med din SEO.

Core Web Vitals utvärderar huvudsakligen tre saker – hur lång tid det tar för din hemsida att ladda, hur fort användaren kan interagera med din hemsida och hur mycket innehållet flyttar eller rör på sig.

Om du är nyfiken på din hemsidas Core Web Vitals-värden tar du enkelt reda på dem genom att testa din hemsida i vår klimatkalkylator. Där får du också reda på hur hållbar din hemsida är och vad du kan göra för att öka prestandan och minska klimatavtrycket.

Page Experience Ranking

Core Web Vitals är en del i vad Google kallar för Page Experience Ranking. Som namnet antyder så handlar det om hur en användare upplever en hemsida. Utöver dessa värden så tar Page Experience Ranking också hänsyn till fyra andra faktorer, så här ser alla faktorer ut:

Mobilvänlighet

Säkerhet

HTTPS

Påträngande popups

Laddtid (LCP)

Interaktivitet (FID)

Visuell stabilitet (CLS)

De hemsidor som har en hög Page Experience Ranking får en liten fördel i Googles sökresultat. Exakt hur stor fördelen är vet bara Google, men oavsett om den bara är marginell så är det konstaterat att snabba, användarvänliga hemsidor konverterar bättre.

Core Web Vitals

Men vilka är då de tre mätetalen? Jo, de heter Largest Contentful Paint, First Input Delay och Cumulative Layout Shift. Fritt översatt betyder det Störst innehållsrendering, Fördröjning till första inmatning och Kumulativ layoutförskjutning. De namnen blir ingen klokare av, men lugn – vi kommer att förklara vad de innebär!

Largest Contentful Paint (LCP) – laddtid

Largest Contentful Paint handlar om hur snabbt en hemsida laddas. Värdet tas fram genom att mäta tiden det tar för det största innehållet på att hemsidan laddas. Det handlar oftast om en bild, video eller ett stort block med text. En LCP ska laddas inom 2,5 sekunder för att anses bra. Tar det över 4 sekunder räknas hemsidan som långsam.

Largest Contentful Paint, en av tre Core Web Vitals
Largest Contentful Paint (LCP) mäter hur snabbt en hemsida laddas färdigt.

Laddtiden påverkar av flera olika saker, exempelvis långsamma svarstider på servern och renderingsblockerande Javascript och Css. En annan vanlig orsak är att det är väldigt mycket innehåll som behöver laddas in.

Optimera Largest Contentful Paint

Du kan förbättra ditt värde på flera olika sätt, ett är att optimera servern på där du har din hemsida. Om den inte är optimerad ökar det tiden för webbläsaren att hämta information och data. Du kan minimera denna fördröjning genom att bland annat se till att uppdatera till den senaste PHP-versionen.

Ett annat sätt är att minifiera dina CSS- och JavaScript-filer. De innehåller sannolikt en hel del tecken, mellanslag, kommentarer och indrag som kan tas bort utan att det påverkar kodens funktionalitet. Genom att ta bort dessa överflödiga tecken blir filernas storlek mindre och sidan kan laddas snabbare. Det finns flera verktyg som automatiskt hjälper dig att minifiera dessa filer.

Minifiera filer genom att ta bort tecken som inte påverkar kodens funktionalitet.

Använder du WordPress bör du försöka att minimera antalet plugins som används. Har du stora bilder bör du komprimera dem och se också till att du skjuter upp inläsning av den CSS och JavaScript som inte är kritisk.

First Input Delay (FID) – interaktivitet

First Input Delay testar hur bra interaktiviteten är på hemsidan. Google mäter hur lång tid det tar från att en besökare klickar på en knapp (eller något annat på hemsidan) tills hemsidan svarar. I denna kontext räknas allt under 100 ms (millisekunder) som bra och allt över 300 ms som för långsamt.

First Input Delay,, en av tre Core Web Vitals
First Input Delay (FID) testar hur bra interaktiviteten är på hemsidan.

Tänk dig själv hur frustrerande det är att klicka på en knapp och sedan behöva vänta på ett svar, ovetandes om det faktiskt är någonting som händer eller inte. Desto kortare tid som dina användare behöver vänta, desto bättre värde får du på First Input Delay. Den vanligaste anledningen för ett dåligt värde här är tung JavaScript.

Optimera First Input Delay

Ta bort all kod och alla funktioner som inte används. Om din hemsida innehåller mycket JavaScript bör den brytas upp i mindre beståndsdelar där enbart de viktigaste laddas in från start.

Cumulative Layout Shift (CLS) – visuell stabilitet

Cumulative Layout Shift kontrollerar hur mycket hemsidan förändras under tiden den som den laddas. Förmodligen har du varit med om att en hemsida som är långsam ”hoppar”. Kanske försöker du klicka på något innan hemsidan har laddat färdigt, men innan ditt klick registreras har elementen flyttats vilket gör att du inte kommer någonstans eller i värsta fall fel.

Cumulative Layout Shift kan vara frustrerande. Animering: web.dev

Cumulative Layout Shift kan vara enormt frustrerande för användaren, men som tur är det relativt enkelt att åtgärda och på så sätt få bättre poäng. Ett lågt CLS-värde innebär mindre förändringar på hemsidans layout och därmed en bra användarupplevelse.

Cumulative Layout Shift, en av tre Core Web Vitals
Cumulative Layout Shift (CLS) ser hur mycket sidan ”hoppar” under inladdning.

Optimera Cumulative Layout Shift

Lösningen är ofta att ange höjd och bredd på dina bilder i html-koden. I stort sett alla webbläsare använder dessa uppgifter för att beräkna bildförhållande och ”spara plats” för bilderna innan hemsidan renderats. Samma sak gäller för inbäddat innehåll som annonser och iframes utan dimensioner.

Se din hemsidas Core Web Vitals

Det är enkelt att ta reda på din hemsidas Core Web Vitals. Det finns flera sätt att göra det, vi rekommenderar självklart vår alldeles egna klimatkalkylator för hemsidor där du snabbt får fram vilka Core Web Vitals en hemsida har och dessutom många fler relevanta värden för både prestanda och hållbarhet.

Klimatkalkylator

Se Core Web Vitals på Klimatklick.
Se Core Web Vitals direkt på Klimatklick.

Se dina Core Web Vitals – testa din hemsida!

Testa din hemsida

Lighthouse

Lighthouse är ett verktyg som du når genom att klicka Ctrl + Shift + I i Chrome, du behöver alltså inte navigera till en specifik hemsida för att nå Lighthouse. Sedan maj 2020 mäts även Core Web Vitals i Lighthouse tillsammans med andra värden som är relevanta för prestanda och användarupplevelse.

Lighthouse
Se Core Web Vitals i Lighthouse.

PageSpeed Insights

PageSpeed Insights har uppdaterats för att vara kompatibelt med Lighthouse 6.0 vilket innebär att det nu går att se Core Web Vitals direkt i rapporten. Utöver dessa mätetal så får du också rekommendationer på hur du kan förbättra upplevelsen för dina användare.

PageSpeed Insights

PageSpeed Insights
Se Core Web Vitals i PageSpeed Insights.

Google Search Console

I Googles Search Console kan du se dina Core Web Vitals, du hittar dem i Diagnos av huvudvärden för webben under fliken Upplevelse. Om din hemsida är ny eller har få besökare kan det vara så att denna funktion inte är tillgänglig då Google inte kunnat samlat in den krävda mängden rapportdata.

Google Search Console