Optimera din sajt för Core Web Vitals (guide)

I slutet av förra året meddelade Google att de kommer att rulla ut en uppdatering av sin sökalgoritm i maj 2021 med fokus på användarupplevelsen och UX.

De bekräftade samtidigt att denna uppdatering kommer att ha en viss inverkan på hur sidor rankar i sökresultatet. Hur stor påverkan blir är fortfarande oklart.

Sökjätten kallar de nya ”rankingsignalerna” för Core Web Vitals.

Vad är Core Web Vitals?

Web Vitals är hur Google valt att mäta användarupplevelsen på en sajt. Web Vitals (på svenska ”huvudvärden för webben”) består av sju olika mätpunkter:

• Laddningshastighet
• Interaktivitet
• Visuell stabilitet
• Mobilanpassning
• Säkerhet
• HTTPS
• Icke-påträngande popups/annonser

De fyra sista är redan idag, i någon utsträckning, en del av hur Googles algoritm bedömer en sajt.

Det tre första – Largest Contentful Paint, First Input Delay och Cumulative Layout Shift – är vad Google har valt att kalla för Core Web Vitals, det vill säga kärnan, eller de tre viktigaste mätpunkterna, inom Web Vitals. Dessa tre har tidigare inte varit en del av hur Google avgör rankingen av en specifik sida, men kommer alltså att vara det från och med maj 2021.

Okej, men vad betyder egentligen Largest Contentful Paint, First Input Delay och Cumulative Layout Shift? Kanske du undrar. Låt oss reda ut det och titta närmare på respektive mätpunkt samt vad man kan göra för att optimera sin sajt för Core Web Vitals!

Largest Contentful Paint (LCP)

Largest Contentful Paint mäter hur lång tid det tar för en sidas huvudsakliga innehåll att laddas. Förenklat skulle man kunna kalla LCP för ett mått som bedömer en sidas laddningshastighet, men egentligen handlar det alltså specifikt om hur snabbt sidans största innehållselementet visas för besökaren.

Enligt Google är ett bra LCP-värde mellan 0 och 2.5 sekunder. Laddas innehållet inom 2.5 sekunder till 4 sekunder behövs vissa förbättringsåtgärder, och tar det ännu längre tid än så bedöms sidans LCP-värde som direkt dåligt.

De vanligaste anledningarna till att en sida har en dåligt LCP är enligt Google:

• Långsamma svarstider från din server
• JavaScript och CSS som blockerar inläsningen av sidan
• Långsamma laddningstider av resurser
• Långsam inläsning på klientsidan

Problem med LCP? Så optimerar du Largest Contentful Paint (LCP)

Med de vanligaste anledningarna till ett dåligt LCP-värde i åtanke kommer här sju tips på saker som du kan göra för att optimera Largest Contentful Paint.

1. Optimera din server
Att analysera och optimera hur effektivt din server hanterar förfrågningar kommer att förbättra tiden det tar för webbläsaren att ta emot data. Många webbramverk tillhandahåller bra och omfattande guider för hur du kan förbättra prestandan.

Om din sajt presterar dåligt kan det även vara värt att se över ditt webbhotell och antingen uppgradera ditt nuvarande abonnemang eller helt byta leverantör. För ett par månader sedan bytte jag själv mitt webbhotell – från svenska Websupport (tidigare Binero) till SiteGround, som är specialiserade på hosting av WordPress-sajter, och förbättrade laddningshastigheten av min sajt markant.

2. Använd ett Content Delivery Network (CDN)
Ett Content Delivery Network är ett nätverk av servrar som distribueras på många olika, geografiskt utspridda, platser. Genom att använda dig av ett CDN kan du styra dina användare till en server som ligger geografiskt nära deras position, så slipper deras webbläsares förfrågningar att (bokstavligen) resa världen runt.
Exempel på två bra CDN-leverantörer är StackPath och Cloudflare.

3. Implementera cachelagring av dina statiska tillgångar
Det flesta sajter har en hel del statiska tillgånger, dvs. tillgångar som inte ändras ifall en användare besöker sajten flera gånger – eller bläddrar mellan olika sidor. Se till att cache dessa lokalt i webbläsaren så att samma tillgångar inte behöver laddas ned gång på gång.

4. Minifiera CSS och JavaScript
Ofta består CSS- och JavaScript-filer av en hel del överflödigt innehåll som inte behövs för att datorn ska kunna läsa dessa. Det kan t.ex. vara extra rader, tabbar, mellanslag och kommentarer som ligger där för att göra koden mer lättläst för oss människor. Detta leder dock till onödigt stora filer och att det tar längre tid för webbläsaren att tolka koden. För att undvika detta kan man ”städa” bort överflödigt innehåll i koden och slå ihop fler olika filer till en för att minska antalet förfrågningar från webbläsaren.

För den som använder ett CMS, som t.ex. WordPress, finns det flera olika plugins som löpande hjälper dig att minifiera dina CSS- och JavaScript-filer – men det finns även en ett antal olika gratisverktyg online som gör samma sak, t.ex. Minifier.org.

5. Radera oanvänd CSS och Javascript
Många sajter har gammal CSS- och JavaScript-kod som ligger kvar på servern och inte längre används men som trots detta skickas till webbläsaren. Se därför till att gå igenom din kod och radera kod och filer som inte används.

6. Skjut upp inladdningen av CSS och JavaScript
Prioritera inläsningen av den CSS- och Javascript kod som behövs för det innehåll som först är synligt på skärmen (innan användaren har scrollat vidare på sidan).

7. Optimera och komprimera bilder
Stora och tunga bilder kan ha en katastrofal negativ påverkan på laddningstider. Som tur är finns det även här saker som du kan göra för att undvika att dina bilder drar ner din sajts LCP-värde, exempelvis:

• Komprimera dina bilders filstorlek (med hjälp av t.ex. TinyJPG.com)
• Konvertera dina bilder till modernare filformat (JPEG 2000, JPEG XR eller WebP)
• Använd responsiva bilder
• Låt ett CDN hantera dina bilder

First Input Delay (FID)

First Input Delay är, precis som Largest Contentful Paint, ett mått på hur snabbt en sida laddas för användaren. Men istället för att bedöma hur snabbt det största innehållselementet visas så handlar FID om hur lång tid det tar innan användaren kan interagera med sidan, t.ex. trycka på knappar, en länk eller börja scrolla.

Enligt Google är ett bra FID-värde mellan 0 och 100 millisekunder. Tar det 100 ms till 300 ms behövs vissa förbättringsåtgärder, och tar det ännu längre tid än så bedöms sidans FID-värde som direkt dåligt.

Problem med FID? Så optimerar du First Input Delay (FID)

Den absolut vanligaste anledningen till att en sajt har ett dåligt FID-värde är enligt Google tung JavaScript-kod.

För att optimera First Input Delay är det alltså på sin plats att se över din sidas användande av JavaScript och den första frågan du bör ställa dig är;

Ofta är svaret ja, men ibland kan de funktioner som du byggt i JavaScript ersättas med t.ex. CSS.

Andra saker som du kan göra för effektivisera din JavaScript-kod och förbättra FID är:

• Minifiera dina JS-filer (precis som jag beskriver under en av punkterna ovan, när jag förklarar hur du optimerar LCP)
• Att läsa in JavaScript asynkront (parallellt) för att förhindra att övrig kod på sidan inte blockeras medan skripten körs
• Utnyttja service-workers för att hantera funktioner som inte är en del av den faktiska sidan

Cumulative Layout Shift (CLS)

Den tredje, och sista, Core Web Vital har fått det något knepiga namnet Cumulative Layout Shift och handlar – precis som det låter – om oväntade skiftningar i en sidas design. Jag tror detta är något som de flesta av oss någon gång har råkat ut för. Tänk dig att du sitter och läser en intressant artikel i en av alla våra dagstidningar och helt plötsligt dyker en annons upp som flyttar delar av texten som du nyss läste upp, ner eller åt sidan. Irriterande!

Exempel på hur Cumulative Layout Shift kan påverka användarupplevelsen negativt:

Cumulative Layout Shift mäter och tittar på hur mycket av det synliga innehållet som skiftas på skärmen, samt avståndet som de påverkade element flyttades.

Enligt Google är ett bra CLS-värde mellan 0 och 0.1. Vid ett värde från 0.1 till 0.25 behövs vissa förbättringsåtgärder, och vid ett ännu högre värde så bedöms sidans CLS-värde som direkt dåligt.

De vanligaste anledningarna till att en sida har en dåligt CLS är enligt Google:

• Bilder där du missat (eller struntat i) att ange dimensioner i HTML-koden
• Annonser och iframes som du inte har reserverat plats för i din HTML-kod
• Teckensnitt som laddas in långsamt

Problem med CLS? Så optimerar du Cumulative Layout Shift (CLS)

Att fixa till din sajts CLS-problem är i de flesta fall relativt enkelt.

Det handlar helt enkelt om att alltid ange höjd och bredd för dina bilder:

och att alltid reservera plats för annonser, iframes och liknande på din sida med hjälp av t.ex. en div där du anger dimensioner.

Sist men inte minst bör du prioritera din sajts inladdningen av teckensnitt.

Hur ser jag ifall min sajt är bra optimerad för Core Web Vitals?

Innan du ger dig i kast med att optimera din sajt för Core Web Vitals kan det såklart vara en fördel att ta reda på vad som är i behov av att fixas. Det gör du enklast med följande tre verktyg, samtliga är helt gratis.

Google Search Console

I Google Search Console har du kanske märkt att det dykt upp en helt ny rapport som rätt och slätt heter ”Core Web Vitals”. Här får du en bra överblick som visar vilka problem din sajt har relaterat till Core Web Vitals.

Vidare kan du följa trender över tid och se exakt vilka URL:er som behöver förbättras. Tyvärr kan du inte se mer specifikt vad som orsakar problemen i Search Console.

PageSpeed Insight

Som sagt, Search Console är bra för att se vilka sidor som har problem relaterade till Core Web Vital men rätt värdelöst för den som vill undersöka vad som som orsakar problemen. För det är PageSpeed Insight betydligt bättre. Ange sidan du vill analysera för att få en snabb överblick av hur den presterar:

Scrollar du längre ner i rapporten (typ till slutet), så finns det flera olika flikar som specifikt talar om för dig vilka element på din sida som orsakar problemen och varför. Här finns även konkreta förslag på vad du kan göra för att förbättra din sida.

Chrome DevTools

Sist men inte minst vill jag tipsa om Chrome DevTools, för den som verkligen vill grotta ner sig i hur en specifik sida laddar och vilka element på sidan som påverkar Core Web Vitals negativt.

Högerklicka på den aktuella sidan i din Chrome-webbläsare och klicka på ”inspektera”. Navigera till fliken ”performance”, kryssa i Core Web Vitals och starta analysen för att se exakt hur din sida fungerar när den körs.

Här kan du även simulera hur sidan laddas om användaren är på t.ex. en mobil enhet med en långsam 3G uppkoppling, vilket kan vara användbart för att t.ex. visualisera CLS-problem (dvs. skiftningar i sidans layout) – något som kanske inte är visuellt märkbara vid en snabbare uppkoppling.

Slutsats

Det är inte alltid som jag är överens med hur Google värderar olika webbsajter. Personligen tycker jag att t.ex. inlänkningar (än idag) har ett för stort inflytande på rankingen och tenderar att belöna stora sajter och varumärken snarare än de sajter som faktiskt erbjuder bäst innehåll för besökaren.

Enligt mig är Core Web Vitals en positiv utveckling som bidrar till en bättre och mer användarvänlig webb.

I dagsläget vet vi inte exakt hur mycket Core Web Vitals kommer att påverka rankingen av enskilda sidor, och många menar att uppdateringen förmodligen inte kommer ha någon enorm effekt på sökresultatet – men det spelar enligt mig mindre roll.

Oavsett hur stor inverkan uppdateringen har på din sajts ranking bör du ta dig tiden att optimera Core Web Vitals då dessa förbättringar garanterat leder till en bättre användarupplevelse, dvs. nöjdare besökare. Något som jag är övertygad om att i slutändan även kommer att ha en positiv påverkan på andra viktiga saker, så som t.ex. din sidas konverteringsgrad.