Så optimerar du din sajt inför Page Experience Update

Publicerad 11 februari 2021, senast uppdaterad 2023-05-19

Användarvänliga sidor kommer få en fördel i sökresultaten när Google rullar ut sin Page Experience Update. I den här artikeln tar vi upp de viktigaste sakerna du behöver ha koll på för att tillmötesgå Googles nya krav.

Page Experience Update är en kommande algoritmuppdatering från Google som är planerad att rullas ut i maj 2021. Med denna uppdatering ska Google i högre grad börja ta hänsyn till hur användarvänlig en sida är. Allt annat lika kommer sidor som bedöms vara användarvänliga att få en rankingfördel på Google över sidor som inte är det.

I den här artikeln går vi igenom vad Page Experience Update är för något – och ger dig tips på vad du bör se över på din sajt inför den stundande uppdateringen.

Sju faktorer att fokusera på

Google kommer bedöma sidans användarvänlighet utifrån sju olika faktorer. Fyra av dessa faktorer är redan en del av algoritmen sedan länge medan tre av dem är helt nya. De sju faktorerna är:

1. Mobilvänlighet
2. Säkerhet på sidan
3. Https
4. Påträngande pop-ups
5. Laddtid (NY)
6. Interaktivitet (NY)
7. Sidans visuella stabilitet (NY)

1. Mobilvänlighet

Det finns få sajter med en aktiv webbnärvaro som inte har en mobilvänlig webbplats år 2021. Trots det har ganska många sajter vi stöter på problem med att Google inte uppfattar vissa av sidorna på sajten som mobilvänliga.

Det enklaste sättet att se om du har några problem med din sajts mobilvänlighet är att kolla i Search Console-rapporten Mobile Usability (Användarvänlighet på mobila enheter). Där kan du se vilka sidor som har såna problem och vad problemen består av.

Vanliga fel kopplat till mobilvänlighet vi stöter på är:

1. Vissa element på sidan anpassar sig inte till mindre skärmar (exempelvis html-tabeller som inte görs responsiva).
2. Google kommer inte åt CSS-filer som behövs för att rendera upp innehållet korrekt vilket gör att de inte ser att sidan är mobilvänlig. (trots att den kan se helt normal ut för en vanlig användare på mobilen).
3. Text uppfattas som för liten eller klickbara element sitter för nära varandra på mobila enheter (vilket ibland kan bero på punkt 2).

Börja med att undersöka i Search Console-rapporten om du har några problem relaterat till mobilvänlighet och i så fall vilka sidor som har dessa problem. Oftast finns det ett mönster i vilka sidtyper som är drabbade och då kan du kika på dem närmare.

Det är ingen större fara om du bara har ett fåtal sidor som Google inte bedömer som mobilvänliga. Du bör dock se över så att dina viktigaste sidtyper inte klassas som icke-mobilvänliga.

2. Säkerheten på sidan

Google vill självklart inte leda användarna till sidor som är hackade eller sprider skadlig kod. Uppstår denna typ av problem på din sajt och Google märker detta kommer du bli uppmärksammad via Search Console.

Du hittar denna rapport under Security Issues (Säkerhetsproblem) i Search Console. Förhoppningsvis ser allt ut som på bilden nedan.

3. Https

En annan aspekt relaterat till säkerhet är huruvida sajten har ett giltigt SSL-certifikat eller inte. Med ett SSL-certifikat krypteras innehållet som skickas mellan användare och server.

Google har belönat detta algoritmiskt ända sedan 2014. Även om den påstådda rankingeffekten var omdebatterad initialt är detta en ren hygienfaktor för vilken sajt som helst idag.

Det finns dock saker att vara uppmärksam på även här. Det vanligaste misstaget vi stöter på är att vissa resurser (bilder, CSS-filer, JS-filer, etc.) på en sida inte läses in över säker anslutning. Görs inte detta kan användaren få en varning om det i sin webbläsare.

För att se om du har denna typ av problem kan du spindla av din sajt i Screaming Frog och därefter skapa rapporten Insecure Content. Där kan du se om det finns resurser som hämtas över osäker anslutning (http) istället för säker (https).

4. Påträngande pop-ups (intrusive interstitials)

Google vill motverka pop-ups som stör användarens upplevelse av en sida. Sedan 2017 straffar de därför webbplatser som ägnar sig åt detta med sämre ranking.

Pop-ups avseende juridiska skäl (t.ex. cookiehantering) anses okej men akta dig för att skapa pop-ups som stör användarens upplevelse av det faktiska innehåll de kom till sidan för att ta del av.

Vanliga misstag vi ser på detta område är att sajter visar pop-ups innehållandes ett erbjudande eller uppmanar folk att signa upp sig på ert nyhetsbrev direkt när de landar på sidan från Google.

För att se hur Google renderar upp dina sidor kan du ange en sida i URL Inspection Tool i Search Console. Presenteras det huvudsakliga innehållet som sidan berör direkt för användaren eller blockerar en pop-up större delen av skärmen?

Core web vitals

Innan vi går vidare till nästa faktor i Page Experience-uppdateringen behöver vi först bekanta oss med konceptet Core web vitals.

Core web vitals är ett initiativ från Google som består av tre faktorer för att mäta användarvänlighet.

Syftet från Googles sida har varit att skapa enhetlighet och tydlighet kring vilka värden som är viktiga ur ett användarperspektiv. Ett jättebra initiativ om du frågar mig eftersom det hjälper SEO:are, webbutvecklare, UX-designers, med flera, att arbeta mot samma tydliga mål gällande en sajts användarvänlighet. Alla vill göra det bästa för användaren och genom core web vitals har Google gett oss exakt vilken måttstock vi ska använda för det.

Google använder sig av User Experience-rapporten i Chrome för att samla in core web vitals från riktiga användare som besöker olika sajter på nätet. Det är denna data som ska tas i beaktning för att avgöra användarvänligheten, enligt Google. Du kan se din sajts core web vitals i Search Console och rapporten Core Web Vitals (på svenska ’Diagnosrapport om huvudvärden för webben’).

I dagsläget består core web vitals av tre faktorer. Google har flaggat för att flera kan tillkomma i framtiden.

Dessa tre är:

• Largest Contentful Paint (mäter laddtid)
• First Input Delay (mäter hur väl sidan går att interagera med)
• Cumulative Layout Shift (mäter hur stabil sidan är rent visuellt)

Dessa tre utgör alltså tillsammans med de redan fyra nämnda faktorerna hela Page Experience-uppdateringen. 

5. Laddtid (NY)

Largest Contentful Paint (LCP) är måttet för laddtid. Rent konkret är det ett mått på hur lång tid det tar för en sidas huvudsakliga innehåll att läsas in (som det ser ut för en användare innan denne klickar på skärmen eller börjar scrolla). Huvudsakligt innehåll kan avse visuellt största bilden på sidan eller visuellt största textelementet.

Google mäter LCP från att sidan börjas laddas in och slutar när en användare interagerar med sidan (t.ex. klickar eller scrollar). När så sker slutar mätningen för då har sannolikhet det huvudsakliga innehållet på sidan lästs in. Av den anledningen kan det huvudsakliga innehållet på en sida förändras i takt med att sidan läses in.

Tiden det tar blir alltså sidans LCP-värde och ju lägre LCP, desto bättre. Högst 2,5 sekunder ska det vara för att anses bra, enligt Google.

För att förbättra en sidas LCP behöver man först jobba med att korta ner Time to First Byte (TTFB). Time to first byte är tiden det tar för webbläsaren att ladda in den första byten av en sida. Ju snabbare det går för webbläsaren att hämta den första biten, desto snabbare kommer webbläsaren att kunna påbörja att rendera upp resten av sidan, däribland sidans största element.

För att förbättra Time to First Byte bör du:

• Se över din servers prestanda.
• Cacha så många statiska resurser som möjligt (bilder, css, javascriptfiler, etc.)
• Använda ett CDN så du kan servera innehåll från den plats i världen som ligger fysiskt närmast din användare.
• Implementera preconnect så att webbläsaren kan börja koppla upp sig mot extern server innan den faktiskt börjar efterfråga några resurser därifrån.

Nästa steg är att göra tiden mellan TTFB och Largest Contentful Paint så kort som möjlig. Detta uppnår du genom att:

• Se över hur dina bilder är optimerade och gör dem så lättladdade och komprimerade som möjligt.
• Optimera inläsningen av CSS så att det som behövs för att rendera upp innehållet som är synligt på skärmen utan scroll hämtas in först.
• Skjut upp inläsningen av övrig CSS till senare.
• Gör JS-filerna så lätta att ladda som möjligt. Läs in det som behövs för att rendera upp det synliga i viewporten först och skjut upp resterande till senare. Samma tänk som med CSS-inläsningen alltså.

6. Interaktivitet (NY)

First Input Delay (FID) mäter hur lång tid det tar för webbläsaren att reagera när en användare interagerar med en sida, exempelvis klickar på en länk eller en knapp.

Även här bör du sträva efter ett lågt värde. Ju högre FID desto mer upptagen är webbläsaren med att göra annat istället för att hörsamma vad användaren vill göra på sidan. Som användare vill du kunna interagera med sidan du besöker omedelbart och FID blir då ett mått på hur väl sidan lyckas med detta.

Största förbättringarna avseende First Input Delay är att effektivisera inläsningen av Javascript. Mer konkret kan du med hjälp av dina utvecklare se över så att:

• Bara den JS som sidan faktiskt behöver läses in
• Minimera storleken på dina JS-filer
• Läs in JS asynkront så att inläsning av övrig kod på sidan inte blockeras medan JS-scripten körs
• Använd dig av service-workers för att hantera funktioner som inte är en del av den faktiska sidan (såsom olika push-funktioner du kanske använder)

7. Sidans visuella stabilitet (NY)

Cumulative layout shift (CLS) är ett mått på hur stabil sidan är rent visuellt. Du har säkert stött på att du varit inne på en sida och av misstag klickat på fel knapp eller länk eftersom sidan uppdaterat sig i sista stund när något laddas in i sista stund. Inte bra för användarupplevelsen och därför något som Google vill att du ser över och förbättrar.

Video som visar hur sidans instabilitet negativt kan påverka användarupplevelsen. 

Du kan använda det här verktyget för att se om du har några problem med element som plötsligt flyttar sig på sidan.

För att förbättra CLS kan du:

• Ange höjd och bredd på dina bilder i html-koden. De flesta webbläsare kommer använda denna input för att beräkna bildförhållanden och reservera plats för bilderna innan sidan renderas upp.
• Ladda eventuella annonser eller annat inbäddat innehåll i en <div> som har tillräckliga måttangivelser för att rymma det som sedan placeras i den. På detta sätt hoppar inte vyn till i sista stund även om t.ex. en annons läses in senare.
• Undvik att pusha ut innehåll som lägger sig ovanpå det redan existerande innehållet på sidan. Exempelvis uppmaningar om att användaren ska signa upp sig på nyhetsbrev eller installera er app. Denna typ av uppmaningar kan lösas på samma sätt som annonser – att plats reserveras för det redan från början.

Oklar effekt på ranking

Det går inte att säga på förhand hur stora effekter denna uppdatering kommer att ha på ranking. Google själva har tonat ner förväntningarna ganska rejält och menar att den bara kommer ha mindre effekter på sidors ranking. Hur väl sidans innehåll svarar på användarens sökning kommer även i framtiden vara det viktigaste att optimera för alltså, vilket inte är så konstigt.

Även om rankingeffekten bara blir marginell finns det många goda skäl att optimera sin sajt inför Page Experience Update. Snabba och lättladdade sajter konverterar som regel bättre och det borde vara självklart att göra allt för att uppnå så bra prestanda och användarvänlighet som möjligt.

Börja optimera i tid

Som webbplatsägare har du fortfarande gott om tid på dig att optimera för Page Experience Update innan den rullas ut i maj 2021. Det är tacksamt eftersom det uteslutande är tekniska faktorer som behöver förbättras, vilket ofta kan ta relativt lång tid att åtgärda jämfört med andra aspekter av SEO.

Vill du ha hjälp att optimera din sajt inför kommande Page Experience Update? Hör gärna av dig till oss på Pineberry.