Skip to main content

Har du koll på Core Web Vitals? Den tekniska delen inom SEO är viktig men ibland kan det va svårt att hänga med bland alla tekniska termer och förstå hur saker och ting påverkar. I guiden förenklar vi alla tekniska begrepp kring Core web Vitals och vad du kan göra för att förbättra de tre viktiga mätetalen. Dessutom tipsar vi om tre verktyg som hjälper dig analysera och utvärdera!

Vad är Core Web Vitals?

Google använder Core Web Vitals för att bedöma hur bra användarupplevelsen och prestandan är på en webbsida. Core Web Vitals består av tre faktorer som Google anser viktiga för användarupplevelsen: Largest Contentful Paint (LCP), First Input Delay (FID) och Cumulative Layout Shift (CLS).

Core Web Vitals är 3 delar av totalt 6 som ingår i Web Vitals som är hur Google överlag bedömer sidupplevelsen. Web Vitals är ett initiativ från Google som ger en tydlig vägledning i vilka mätetal som är viktiga för sökmotorn i bedömningen av användarupplevelsen.

*Safe browsing var tidigare en del av Web Vitals men räknas idag inte in som en rankingsignal för sidupplevelsen.

Faktorer Web Vitals

Faktorerna som ingår i bedömning av sidupplevelsen.

Varför är Core Web Vitals viktigt för SEO?

Sidupplevelsen och Core Web Vitals är idag en viktig rankingfaktor inom SEO och en nödvändighet att jobba med för att din sida ska ranka bättre än konkurrenternas.

Även om alla 6 delar i Web Vitals är viktiga signaler för att bedöma sidupplevelsen så har Google varit tydliga med att Core Web Vitals tar upp en större del i bedömningen. Dessutom har Google varit extra hjälpsamma och angett exakta mått om vad som exempelvis anses vara en bra laddningstid.

Men viktigt att komma ihåg är att sidupplevelsen är bara 1 av ca 200 rankingfaktorer som Google använder för att ranka sidor i sökresultatet. Så även om att erbjuda en bra sidupplevelse för användaren är viktigt så är det inte bara det som spelar roll i hur sidan rankar. Bra och kvalitativt innehåll, länkar och andra tekniska aspekter är fortfarande lika viktiga!

Webinar: SEO för e-handlare

Jobbar du med e-handel och vill få bättre koll på SEO? I vårt webinar delar vi praktiska tips för hur du sökmotoroptimerar er e-handel. Alltifrån dos and don’ts för optimering av produktsidor till best practices om webbplatsen är på flera språk.

Laddtid – Largest Contentful Paint (LCP)

Largest Contentful Paint mäter hur snabbt sidans huvudsakliga innehåll kan ritas upp i visningsområdet på besökarens skärm. Det huvudsakliga innehållet kan vara en större bild eller text på din sida. LCP är ett användarcentrerat mått, vilket betyder att det mäter hur snabbt användaren upplever att sidan laddas in. Från det att sidan börjat ladda till det att det största huvudsakliga innehåll är synligt för besökaren.

Vad är en bra Largest Contentful Paint (LCP)?
Sidor med en laddningstid på 2.5 sekunder eller lägre anses ha en bra LCP. Allt över 4 sekunder anses som dåligt.

Skala Largest Contentful Paint

To provide a good user experience, sites should strive to have an LCP of 2.5 seconds or less for at least 75% of page visits.

Web.devGoogle

Vad kan påverka LCP?

  • Resurser som bilder eller videos laddar långsamt.
  • JavaScript- och CSS-kod blockerar rendering och gör att innehållet tar längre tid att ladda.
  • Svarstider från servern är långa.

Vilka åtgärder kan förbättra LCP?

  • Nyttja cachelagring
    För återkommande besökare kan sidan då laddas in snabbare. Se till att använda det där innehållet är statiskt och inte uppdateras vid varje request, som till exempel sidor med väderleksrapport.
  • Ta bort onödiga tredjeparts script
    Tredjeparts script kan påverka laddningstiden och öka tiden till Largest Contenful Paint. Enligt en studie av Backlinko ökade varje enskilt tredjeparts script laddningstiden med 34 ms.
  • Aktivera lazy loading
    Gör att innehåll som bilder bara laddas in när användaren scrollat ner till sektionen och den blivit synlig på skärmen. Vilket betyder att sidan slipper ladda in allt innehåll på en gång
  • Minimera CSS-filer och JavaScript-filer
    Tunga CSS- och JavaScript-filer kan påverka laddningstiden negativt. Genom att komprimera dem kan du spara ytterligare tid.
  • Optimering av server
    Se vad din hostingtjänst erbjuder för möjlighet att optimera servern och därmed förbättra tiden det tar för webbläsaren att hämta information på servern. Kanske kan du uppdatera till en nyare PHP-version, som är det skriptspråk som används av din webbserver.

Interaktivitet – First Input Delay (FID)

First Input Delay mäter tiden från det att en användare interagerar på webbsidan till det att webbläsaren kan svara upp på händelsen. Exempelvis kan det vara ett klick på en länk, knapp eller en applikation på sidan som använder JavaScript. Förenklat är FID alltså hur lång fördröjningen där emellan är.

FID mäts bara på första interaktionen efter att användaren landat på sidan. Vilket också är tillfället då besökaren skapar sig ett första intryck. Dessutom är det första tiden på sidan som kritiska resurser laddas in och kan påverka sidans responsivitet.

Vad är en bra First Input Delay (FID)?
First Input Delay mäts i millisekunder och där du bör sträva efter att ha en FID på 100 ms eller mindre. Allt över 300 ms anses som dåligt.

Skala First Input Delay

Vad kan påverka FID?

  • Tung JavaScript som blockerar main thread så att användarens first input tar längre tid att processa.
  • Tunga CSS-filer som gör att det tar lång tid att ladda in layout och design på sidan vilket gör att användaren får vänta innan webbläsaren kan svara upp på exempelvis klick på knapp.

Vilka åtgärder kan förbättra FID?

  • Skjut upp eller ta bort onödig JavaScript-kod
    Rensa bort JavaScript-kod som inte längre används och filerna kan bli lättare och enklare att ladda in. Du kan även skjuta upp JavaScript-kod som inte är kritisk till senare. Så att koden bara utförs när den väl behövs på sidan.
  • Dela upp JavaScript-kod
    Bryt upp koden i mindre tasks för att inte blockera main thread och ge utrymme för first input interaktioner av användare att processas mellan de olika uppgifterna. En riktlinje är att hålla varje task till under 50 ms.
  • Minifiera CSS-filer och ta bort onödig kod
    Genom att göra CSS-filen mindre går det snabbare att ladda ner filen och sidan kan snabbare bli interaktiv för besökaren.

Visuell stabilitet – Cumulative Layout Shift (CLS)

Cumulative Layout Shift mäter sidans visuella stabilitet. Det vill säga hur mycket oväntade förändringar av layout som sker, vilket kan vara ett irritationsmoment för besökaren. Du har säkert själv hamnat i situationer där du vill klicka på en länk men så helt plötsligt laddas ett element in på sidan och du råkar klicka på något helt annat.

exempel på situation som påverkar Cumulative Layout Shift

Googles illustration över hur en hög CLS kan påverka användarupplevelsen negativt.

Vad är en bra Cumulative Layout Shift (CLS)?
Du vill att halten för CLS ska vara 0.1 eller mindre för att besökaren inte ska störas märkbart av layoutförskjutningar. Allt över 0.25 anses som dåligt.

Skala Cumulative Layout Shift

Vad kan påverka CLS?

  • Bilder och videos som laddas in.
  • Typsnitt som laddas in
  • Annonser och iFrames som laddas in
  • Dynamiskt innehåll på sidan som banners, widgets och nyhetsbrevs signups.

Vilka åtgärder kan förbättra CLS?

  • Ange storleksattribut för bilder, videos och annonser
    Genom att se till att alla element för bilder, videos och annonser har en angiven höjd och bredd kan du reservera plats åt objektet på sidan och på sätt undvika att det skjuter ner andra element.
  • Använd standard typsnitt
    Använder du custom fonts betyder det att typsnittet behöver laddas ner av webbläsaren först. Genom att använda standard typsnitt som redan är kända för webbläsare så slipper du den layoutförskjutning som kan uppstå när typsnittet behöver laddas.
  • Ladda in dynamiskt innehåll off screen
    Du kan förhindra att dynamiskt innehåll orsakar layoutförskjutningar genom att ladda in det utanför viewport, det vill säga det som är synligt för besökaren på skärmen. Alternativt att det dynamiska innehållet placeras längst ner på sidan så att det inte kan skjuta ner något annat innehåll.

3 verktyg för analys och uppföljning av Core Web Vitals

Så hur vet du egentligen hur din webbsida presterar på mätetalen inom Core Web Vitals? Det finns flera verktyg som hjälper dig identifiera detta. Här tipsar jag om 3 hjälpmedel!

1. Google Search Console

I verktyget Search Console finns rapporten Core Web Vitals eller “Diagnosrapport om huvudvärden för webben” som den kallas på svenska. Här kan du se hur många URL:er på din sajt som är bra, behöver förbättras och som presterar dåligt på de tre mätetalen inom Core Web Vitals för Mobil och Desktop.

Klicka dig vidare på antingen mobil- eller desktoprapporten och du får information om vilka mätetal och exempel på sidor det gäller.

Core Web Vitals Search Console verktyg

2. PageSpeed Insights

Med verktyget Google PageSpeed Insights kan du se hur din webbsida överlag eller en specifik URL presterar inom flera olika metrics som rör prestanda och performance. Verktyget visar både data från riktiga användare som besöker din sajt de senaste 28 dagarna men också labb-data som hämtas vid analys tillfälle.

Core Web Vitals PageSpeed Insights verktyg

Extra tips! Visste du att du kan använda Lighthouse-verktyget (enbart labb-data) direkt i Chrome webbläsaren också?

  1. Högerklicka på sidan och välj Inspect (Inspektera på svenska).
  2. Klicka på pilen högst upp i det nya fältet som dyker upp och välj Lighthouse.
  3. Klicka till sist på knappen Analyze Page Load och verktyget kommer samla in information kopplat till Performance och Core Web Vitals om den specifika URL:en du befinner dig på. Du får även tips om vad som kan förbättras.
Zalando Core Web Vitals Lighthouse verktyg

3. CrUX dashboard Data Studio

Mitt tredje och sista tips är att skapa en Data Studio dashboard med hjälp av datakällan Chrome UX Report (CrUX). Det finns en färdig mall som du kan kopiera och använda för att se Core Web Vitals data för er egen webbsida. Några begränsningar som CrUX dashboarden har är att den bara kan visa data månadsvis och för origin-level. Det vill säga enbart data för hela sajten och inte för enskilda URL:er.

Det enda som behövs för att komma igång är lite kunskap om verktyget Data Studio, resten är redan färdigbyggt åt dig.

Kollar in Googles egna guide för att skapa en CrUX dashboard!

Core Web Vitals CrUX dashboard Data Studio verktyg

Lär dig mer om SEO på våra webinars!

Vi har flera webinars planerade framöver inom sökmotoroptimering och andra ämnen inom digital marknadsföring. Se till att anmäla dig för att inte missa tillfällen som ger ny gratis kunskap! Hos oss kan du även se tidigare webinars.

SE WEBINARS

Joanna Warnestad

SEO SPECIALIST

Joanna är utbildad medie- och kommunikationsvetare med erfarenhet av att arbeta som content manager med fokus på digital marknadsföring och är absolut vassast på SEO.