Ett av våra favoritverktyg för att mäta och bedöma kvalitén av en webbplats är Google Lighthouse. Lighthouse bedömer en webbplats genom att utföra granskningar (audits) inom kategorierna Prestanda (Performance), Tillgänglighet (Availability), Bäst praxis (Best practices), SEO. Lighthouse kan även mäta lämpligheten för en progressiv webbapp (Progressive Web App). Lighthouse kan användas för att mäta en sidas kvalité både under utveckling och efter lansering.
Varför är Google Lighthouse användbart?
Webbdesigners och webbutvecklare har under lång tid utvecklat metoder för att förbättra en webbplats SEO, tillgänglighet och användbarhet. Till följd av detta har metoder gradvis utvecklats fram för att ständigt förbättra kodkvalitén, användbarheten och prestandan för webbplatser. Men utan ett ordentligt verktyg att mäta om vi faktiskt lyckas, blir det svår att se faktiska resultat för de åtgärder vi tar. Det finns lite olika verktyg som kan ge en riktlinje ur olika aspekter, t.ex. GTmetrix som noggrant mäter hur väl en sida presterar men som saknar andra aspekter som exempelvis SEO-tips. Tack vare Google Lighthouse får vi ett objektivt resultat av webbplatsens kvalité ur olika aspekter – tillsammans med förbättringsförslag som kan ge oss bättre poäng.
Lighthouse poängsystem
När en webbplats genomgår ett Google Lighthouse-test bedöms webbplatsen inom kategorierna Prestanda, Tillgänglighet, Bäst praxis och SEO. Webbplatsen får ett betyg inom varje kategori och inom spannet 0-100 – betygen är även färgkodade. Om en kategori hamnar inom spannet 0-49, anses kvalitén för kategorin vara dålig (röd färg, poor). Om kategorin hamnar inom spannet 50-89 anses kvalitén för kategorin behöva förbättring (orange färg, needs improvement). Om kategorin får ett betyg inom spannet 90-100, anses kvalitén för kategorin vara bra (grön färg, good). Den maximala poängen för en kategori är alltså 100, vilket indikerar att samtliga granskningar för kategorin har godkänts (det kan hända att vissa punkter ej varit möjliga att testa).
Värt att notera är att Google själva menar att ett perfekt betyg (100/100) inte förväntas och kan vara väldigt svår att uppnå. Till exempel skulle en förbättring från 99 till 100 kräva ungefär lika mycket metrisk förbättring som från 90 till 94. Men det betyder inte att vi inte ska försöka!
Nedan går vi igenom varje kategori och vad ni kan göra för att optimera kvalitén för er webbplats.
Prestanda – Performance
Inom prestandakategorin hittar vi 6 mätvärden som Google granskar. Det slutgiltiga Prestanda-betyget är även ett viktat medelvärde av de metriska poängen. Det betyder att ”tyngre” mätvärden har en större påverkan på din totala prestationspoäng. Dessa värden är inte synbara i rapporten, men räknas ut i bakgrunden enligt följande:
| First Contentful Paint | 10% |
| Speed Index | 10% |
| Largest Contentful Paint | 25% |
| Time to Interactive | 10% |
| Total Blocking Time | 30% |
| Cumulative Layout Shift | 15% |
First Contentful Paint: Tiden från det att sidan börjar laddas tills någon del av sidans innehåll renderas på skärmen. Med ”innehåll” avses t.ex. text, bilder (inkl. bakgrundsbilder) och <svg>-element.
Speed Index: Indikerar hur snabbt sidan laddar ”above the fold” eller ovanför vecket. Med andra ord tiden det tar för allt innehåll inom användarens visningsområde (”viewport”) att laddas in, utan att behöva scrolla.
Largest Contentful Paint: Tiden från det att användaren börjar ladda sidan tills att den största bilden eller textblocket visas i visningsområdet.
Time to Interactive: Mäter hur lång tid det tar för en sida att bli helt interaktiv.
Total Blocking Time: Den totala tid som webbsidan var blockad, vilket hindrar användaren från att interagera med sidan.
Cumulative Layout Shift: Mäter den oväntade förskjutningen av webbelement medan sidan renderas.
För att läsa om måtten på detaljnivå kan ni kika på Lighthouse dokumentation.
Vad kan utvecklare göra för att förbättra sina prestandapoäng?
Vi rekommenderar att ni använder Lighthouse egna kalkylator för att förstå vilka trösklar som du bör optimera för en bättre prestanda. Här kan ni ställa in de värden ni får när ni kör testet och viktningen för de olika måtten inom kategorin.
I Lighthouse-rapporten kan ni också titta på sektionen Opportunities (möjligheter) som ger er förslag och dokumentation på hur ni kan implementera dem. Vi råder er även att titta på sektionen Diagnostics (diagnostik), som ger ytterligare information kring hur ni kan förbättra prestandan. Generell sett bidrar endast mätvärdena till det slutgiltiga prestanda-poängen och inte det ni ser under sektionerna möjligheter och diagnostik. Med det sagt är det troligt att en förbättring inom dessa områden indirekt bidrar att förbättra de metriska poängen.
En förutsättning för goda poäng är att webbplatsen inte laddar in för många script, för stora bilder och kod som inte används. För att hålla koll på varje rad kod, veta vilka script användas m.m. utvecklar vi på Camido egenutvecklade tema för varje projekt (såvida annat inte önskas). För att sedan förbättra poängen ytterligare optimerar vi sedan sidan med tillägget WP Rocket. I en framtida artikel kommer vi att gå igenom hur WP Rocket kan anpassas för er WordPress-webbplats.
För att få bra poäng inom prestanda-kategorin kan ni:
- Kör kontinuerligt tester på din webbplats – Skriv in din webbplats URL och få en överblick över sidans prestanda ur flera aspekter.
- Titta på vad som gör skillnad – Förstå och optimera de mätvärden som påverkar prestandan mest.
- Få tips på förbättring – För varje granskning får du en rad tips som kan förbättra din sidas resultat.
Tillgänglighet – Accessibility
Granskningarna inom Tillgänglighet visar hur vi kan förbättra tillgängligheten på en sida. Här kontrolleras t.ex. kontrasten mellan textfärg och bakgrundsfärg, ARIA-attribut, bilder utan alt-taggar och följningsordningen på rubriker (h1, h2, h3). Det görs ytterligare kontroller på sidor som innehåller formulär.
För att förbättra tillgängligheten ytterligare, rekommenderar Lighthouse att vi även gör manuella kontroller. Manuella kontroll innebär t.ex. en logisk tabb-följd, användarfokus och andra kontroller som Lighthouse inte kan göra automatiskt.
Det totala Tillgänglighetsbetyget är ett viktat medelvärde av de kontroller som sker inom kategorin. Till skillnad från Prestanda-betyget, får en sida inga poäng för att delvis klara en kontroll. Om en sida bara har vissa knappar som godkänns som tillgängliga, kommer sidan få 0 inom denna granskning.
Vad kan utvecklare göra för att förbättra sina tillgänglighetspoäng?
För att förbättra tillgänglighetspoängen rekommenderar vi att ni går igenom alla de automatiska kontroller som listas av Lighthouse. Arbeta sedan in en rutin där ni för varje projekt ser till att t.ex. a) namne knappar, länkar och menyalternativ b) formulärfält har associerade labels c) lang-attributet har ett tillgängligt värde. På så sätt kan ni alltid få ett grönt betyg hos Google Lighthouse inom kategorin tillgänglighet.
Ett högt betyg hos Lighthouse betyder inte per automatik att vår sida är tillgänglig för alla besökare, det ger oss endast en indikation på att vi har det mest grundläggande på plats. För att bli ännu bättre inom tillgänglighet, rekommenderar vi att ni kikar på sådant som ligger utanför Lighthouse automatiska kontroller, t.ex. vad Lighthouse anser vara manuella checkar. Ni kan också kika på Webbriktlinjer.se som vi rekommenderar varmt.
För att få bra poäng inom kategorin tillgänglighet kan ni:
- Börja med att förstå vad digital tillgänlighet är och varför det är viktigt.
- Förstå hur digital tillgänglighet kan mätas och förbättras.
Sökmotoroptimering – SEO
Testerna inom kategorin Sökmotoroptimering ger en indikation på hur väl en webbplats följer grundläggande SEO-principer. Poängen ger dig en uppfattning om hur optimerad din sida är för sökmotorer. Här kontrolleras bland annat om en sida har möjlighet att bli indexerad, om sökmotorer kan förstå innehållet och om sidan är anpassad för mobila enheter. Det är viktigt att se över dessa riktlinjer i och med att de ofta har en direkt påverkan på både synligheten och rankingen hos sökmotorer.
Här kan ni läsa om de kontroller som Goolge Lighthouse gör.
Det finns även ett manuellt test som inte sker automatiskt med Googles verktyg, det gäller huruvida Structured Data är giltig.
Vad kan utvecklare göra för att förbättra sina SEO-poäng?
Se till att gå igenom Google Lighthouse checklista för att se till att det mest grundläggande finns på plats inom inom SEO. Utöver Lighthouse kan ni också kika på Google Search Console, ett verktyg som kan hjälpa dig att upptäcka fel, se vilka sökningar som leder till besök m.m.
För att få bra poäng inom kategorin SEO kan ni:
- Se till att sökmotorer förstår ditt innehåll.
- Se till att sökmotorer kan hitta och indexera din sida.
- Se till att sidan är mobilvänlig och responsiv.
Bäst praxis – Best practices
Lighthouse genomför ett flertal granskningar enligt vad som brukar betraktas som bäst praxis. Kontrollerna är till mestadels förknippade med användarupplevelse och säkerhet. Vi får t.ex. veta om webbplatsen använder JavaScript-bibliotek med kända sårbarheter. Lighthouse kontrollerar även om det finns föråldrade tekniker på sajten som kan leda till fel på webbplatsen. Vi får också annan information, t.ex. om sidan använder HTTPS eller om bilder visas med fel bilddimensioner.
Vad kan utvecklare göra för att förbättra sina SEO-poäng?
Vi rekommenderar att ni går igenom de rekommendationer som Google Lighthouse listar. För att få bra poäng inom kategorin Bäst praxis kan ni:
- Följa generella tips för bäst praxis
- Gör din sida säkrare
- Skapa en god användarupplevelse
- Undvik föråldrade tekniker
- Gå igenom diagnostik-sektionen
Progressiv webbapp – Progressive web app
Progressiva webbappar (PWA) är applikationer som är skapade med webbteknologier men som ger känslan av en native app. Lighthouse granskningen för progressiva webbappar kontrollerar att applikationen är pålitlig, möjlig att installera och optimerad som en PWA.
Så kan du använda Google Lighthouse
PageSpeed Insights
Googles Pagespeed Insights kan användas om du bara är intresserad av att ta reda på hur väl din hemsida presterar, alltså hur snabbt den laddar på dator och mobil. Du kan testa valfri URL och inom någon minut får du en analys av webbplatsen utifrån de 6 mätvärden som vi nämnt ovan.
Lighthouse i webbläsaren Google Chrome
Google Lighthouse-rapporten finns tillgänglig direkt i Chromes webbläsare. Navigera till den URL du vill undersöka, högerklicka på sidan och klicka sedan på Inspektera. Klicka sedan på fliken Lighthouse. Här kan du välja läge, enhet och vilka kategorier Chrome ska analysera. Klicka till sist på Analyze Page Load för att få ett resultat direkt i webbläsaren.
Lighthouse som Chrome-tillägg
Ett smidigt sätt att köra Lighthouse igenom är att använda Chrome-tillägget Lighthouse. På samma sätt som när du kör Lighthouse i webbläsaren, kan du i tillägget välja vilka parametrar du vill testa. Kör testet på den sida du vill testa och få resultaten på några sekunder i en ny flik.
Googles web.dev portal
Du kan även köra ett Lighthouse test genom att använda Googles egna web.dev portal. Även här kan du se en analys av webbplatsen, möjligheter och diagnostik för de olika kategorierna.
Sammanfattning
Google Lighthouse är ett open source-verktyg för att granska webbsidor utifrån kategorierna prestanda, tillgänglighet, sökmotoroptimering, bäst praxis och lämplighet som en progressiv webbapp. Att följa rekommendationerna från Lighthouse kan leda till förbättrade laddningstider, användarupplevelse, säkerhet och mer!
