Så optimerar du din hemsida för Core Web Vitals (Guide 2022)

Core Web Vitals är en av Googles senaste rankingfaktorer och syftar till att förbättra användarupplevelsen för besökare av dina webbsidor. I den här guiden får du lära dig mer om Core Web Vitals och hur du optimerar för Core Web Vitals.

Core Web Vitals

Vad är Core Web Vitals?

Under sommaren 2021 uppdaterades Googles algoritm med ett nytt set av rankingsignaler som är extra viktiga för användarupplevelsen på en hemsida. Uppdateringens syfte var att adressera följande tre områden:

  • Laddtid (hur snabbt dyker innehåll upp på skärmen?)
  • Interaktivitet (hur snabbt reagerar sidan på användarinteraktion)
  • Visuell stabilitet (rör sig eller hoppar innehåll runt på skärmen medans sidan laddas?)

För att mäta dessa tre aspekter av användarupplevelse, har Google tagit fram tre mätvärden – det som kallas Core Web Vitals:

Largest Contentful Paint - LCP - Core Web Vitals

LCP – Largest Contentful Paint:
Detta mäter hur lång tid det tar för det största innehållet att visas på skärmen. Detta kan vara en bild eller ett textblock. Ett bra betyg ger användarna känslan av att sidan laddas snabbt. En långsam sida kan leda till frustration.

First Input Delay - FID - Core Web Vitals

FID – First Input Delay:
Detta mäter hur lång tid det tar för webbplatsen att reagera på den första interaktionen. Detta kan till exempel vara ett tryck på en knapp. Ett bra betyg här ger användaren en känsla av att en webbplats är snabb att reagera på input och därför responsiv. Långsamt, återigen, leder till frustration.

Cumulative Layout Shift - CLS - Web Core Vitals

CLS – Cumulative Layout Shift:
Detta mäter den visuella stabiliteten på din webbplats. Med andra ord, rör sig saker på skärmen medan den laddas – och hur ofta händer det? Inget är mer frustrerande än att försöka klicka på en knapp när en annons som laddar långsamt visas på den platsen.

Core Web Vitals – en del av Page Experience

Den här uppdateringen är en del av Googles övergripande syn på användarupplevelse och sidupplevelese – det så kallade ”Page Experience”.

Core Web Vitals en del av Google Page Experience - Användarupplevelse

Övriga rankingsignaler som varit en del av ”paketet” Page Experience sedan längre tid är:

  • Mobil användarvänlighet
  • Säker surf
  • Https-certifikat
  • Intrusive interstitials

Hur mäts Core Web Vitals?

De olika delarna graderas enligt följande:

  • Grön är lika med Bra. Sidan är godkänd.
  • Gul, sidan behöver förbättringar.
  • Röd, sidan får ett dåligt resultat och är inte godkänd.

Här nedan ser du vad Google kräver för att få grönt, dvs godkänt i testet.

För att få en boost i rankingen behöver alla tre värden vara gröna, men tänk på att även om Core Web Vitals är en viktig rankingsignal, så är innehållet på din sida ännu viktigare.

Att tänka på:
En sida med bra innehåll är den starkaste faktorn och det är först när man adderar bra innehåll med andra rankingsignaler som du kan få uppleva en riktig boost i rankingen.

Hur klarar sig min sajt i Core Web Vitals?

Det finns idag flera verktyg online för att mäta hur optimerad din sajt och dina webbsidor är för Core Web Vitals:

Google Search Console

Page Speed Insights

Lighthouse

Web Vitals extension for Chrome

Det här är ett tillägg till Chrome webbläsare. Du kan ladda ned den här

Hur optimerar jag Core Web Vitals?

Att optimera för Core Web Vitals är på många sätt likt sättet att optimera en sida för hastighet och prestanda. Här går vi specifikt in på de detaljer som påverkar just dessa rankingsignaler.

Optimering av LCP – förbättra långsam laddtid

Largest Contentful Paint - LCP - Core Web Vitals

Att optimera LCP är inte alltid enkelt. Har du en stor site eller en site med mycket funktionalitet kan det vara en utmaning.

LCP mäts i sekunder och graderas i Bra, Behöver förbättras och Dåligt.

En bra och därmed godkänd LCP är under 2 sekunder.

LCP guidelines

Här är 5 tips på hur du optimerar LCP

  • Ta bort onödiga tredjeparts-script
    Ex. på script från tredjepart är; Google Analytics, GTag, Google ReCaptcha, YouTube videos, Facebook-kopplingar m. fl.
  • Se över din hosting
    Bättre hosting ger överlag snabbare laddtid
  • Aktivera Lazy Loading
    Lazy loading gör så att bilderna laddas först när besökaren scrollar nedåt på sidan. Detta ökar chanserna att nå LCP målet snabbare.
  • Ta bort stora sidelement
    Exempelvis Google Page Speed Insight talar om för dig om din sida har element som drar ned på din laddtid och din LCP.
  • Komprimera din CSS
    Tunga CSS-filer kan fördröja LCP

Optimering av FID – förbättra sidans interaktivitet

First Input Delay - FID - Core Web Vitals

Av de tre mätvärdena är denna enklast att åtgärda. I många fall så behöver du inte göra någonting.
Men om du inte får godkänt här finns det ändå saker att göra för att åtgärda problemet.

FID mäts i millisekunder och ett bra resultat för FID ligger på under 100 millisekunder.

FID First Input Delay Guidelines

3 tips på hur du optimerar FID

  • Komprimera och skjut upp inläsning av JavaScript (JS)
    Att interagera med en sida som laddar JS är nästan omöjligt, så se till att minimera och skjuta upp inläsningen av JS.
  • Ta bort ej kritiska tredjeparts-script
    Som med LCP, kan tredjeparts-script (så som Google Analytics, ReCaptcha med flera) påverka FID negativt.
  • Använd browser caching
    Browser caching hjälper till att ladda innehållet på din sida snabbare.

Optimering av CLS – förbättra sidans visuella stabilitet

Cumulative Layout Shift - CLS - Web Core Vitals

Cumulative Layout Shift (CLS) mäter hur stabil din sida är under uppladdning (visuell stabilitet).

Om delar av din sida hoppar runt medans sidan laddar, har du en hög CLS och det är inte bra.

Man mäter antalet oväntade förskjutningar på sidan och summan av dessa ger dig ett mätetal.

En bra CLS poäng ska vara 0,1 eller mindre.

CLS Cumulative Layout Shift Guidelines

3 tips för hur du optimerar CLS

  • Ange storlek och dimensioner för all media (bilder, video, infographics m.m)
    Genom att definiera dimensioner/storlekar för bilder och övrig media så vet användarens browser exakt hur mycket plats varje element behöver på sidan och onödiga förflyttningar av innehållet under laddning undviks.
  • Om du använder annonser, se till att de har en reserverad plats på din sida
    Om annonserna inte har en reserverad plats kan de dyka upp vart som helst under laddning av sidan och trycka undan annat innehåll.
  • Förladda Google typsnitt
    Du kan välja att förladda Google typsnitten eller spara typsnitten lokalt på din egna server.
  • Lägg nästa block av element ”below the fold”
    Genom att lägga nästa viktiga element på sidan (bilder, text) under det som är synligt på skärmen, så trycks inte innehåll som användaren förväntar sig ska ligga stilla ned.
Sammanfattning
I första hand ska du fokusera på ett bra innehåll på din webbplats. Innehåll som är optimerat för dina viktigaste sökord. 

Core Web Vitals är en rankingfaktor som du bör vara medveten om och som tillsammans med bra innehåll, bättre hastighet och prestanda kan ge din webbplats en rejäl boost i rankingen.

Mycket av optimeringen för CWV är samma eller liknande som det är när du ska optimera för hastighet och prestanda. Ta gärna en titt på vår guide 10 tips för en snabbare WordPress hemsida för att få mer hjälp på vägen mot en väl optimerad hemsida.

Timi Lindeman

70-talist som överlevde tiden före mobiltelefoner och internet och som sedan 2010 jobbat med webbutveckling, SEO och digital marknadsföring. Offline en storslukare av fotboll, musik och böcker. Kontakta mig gärna på timi (at) websolution.se.