Webperf
Förutom att vi kör Sitespeed.io testar vi även med Googles Pagespeed, dock inte deras Insights utan det API som erbjuds.
Uppdatering 23:a maj 2020
Google har nu lagt ner version 4 av Pagespeed API. Därför upphör dessa tester från och med nu och kommer ersättas av Google Lighthouse under försommaren 2020. Sista månadsrapporterna med Google Pagespeed.
Förutom att vi kör Sitespeed.io testar vi även med Googles Pagespeed, dock inte deras Insights utan det API som erbjuds. Där får man ut mer data än via webbtjänsten.
Testet av Google Pagespeed körs alltid med mobil-inställningar om inte annat anges. Det innebär att de ställer lite hårdare krav på vissa saker och om du jämför betygen på Pagespeed Insights märker du att saker de klagar på mobilt tycks inte vara ett problem på desktop.
På tal om problem så är inte Pagespeed så värst öppet. Det innebär att man inte vet så mycket om hur Google resonerar och som vanligt kan man inte vänta sig svar på frågor från dem.
Hur betyg sätts
Pagespeed ger ett övergripande betyg mellan noll och hundra på en webbsidas snabbhet.
Så här beskriver Google hur de betygsätter i About Pagespeed Insights:
– Good: The page applies most performance best practices and there is little headroom for further optimization. The page scores 80 or above.
– Medium: The page is missing some common performance optimizations and there is medium headroom for optimization. The page scores between 60 and 79.
– Low: The page is not optimized and there is fairly large headroom for optimization. The page scores between 0 and 59.
På Webperf har vi en femgradig betygskala, så därför kör vi enligt följande:
- 5 i betyg om webbplatsen är i den högst presterande femtedelen. “Webbplatsen är riktigt snabb!”
- 4 om den landar i den näst högst presterande femtedelen. “Webbplatsen är snabb.”
- 3 för den genomsnittliga femtedelen. “Genomsnittligt men inte så värst bra.”
- 2 om Pagespeed i näst sämsta femtedelen. “Webbplatsen är rätt långsam.”
- 1 ifall webbplatsen är i den sämsta femtedelen. “Webbplatsen har väldigt dålig prestanda enligt Google Pagespeed!”
Betyget för Google Pagespeed är alltså relativt till hur bra man står sig bland alla webbplatser hos webperf. I september 2018 grupperades webbplatserna på följande sätt:
- Pagespeed på 84 eller högre
- 76-83 i Pagespeed
- 70-75 i Pagespeed
- Pagespeed på 60-69
- Under 60 i Pagespeed
Exakt hur webbplatserna presterar ändras över tid och därmed och det relativa betyget. Se ovanstående siffror som en fingervisning som säkert är gilitgt i några månader.
Statistik om webbsidan
Här finns statistik som beskriver hur webbsidan är byggd, hur många filer den har och hur den beter sig.
Antal resurser
Resurser kan likställas med antalet filer som behöver hämtas från webbservern. Typiskt sett är det en HTML-fil med innehåll och struktur, en CSS-fil med färg- och formgivning, samt en Javascript-fil som styr interaktion med designelement och validerar formulär.
Det är vanligt att webbplatser läser in fler än en fil för Javascript och CSS, även fast det inte alltid är nödvändigt.
Utöver ovan nämnda filer kan det också handla om bilder, teckensnitt, samt video- och ljudklipp.
Varje extra fil gör webbplatsen lite långsammare.
Antal värdar
En siffra på hur många domäner som är inblandade i sidvisningen. Det är alltid minst en, men ganska ofta har man sitt skript för webbstatistik på en annan domän, kanske bilder och annat statiskt material på en tredje.
Utöver det är det vanligt åtminstone inom media att man har ett gäng till för att sälja annonser och att låta tredjeparter (för)följa användaren över nätet. Här räknas och Facebook-knappar och liknande in.
Storlek på förfrågan
Antalet bytes som HTTP-förfrågan hade. Ofta runt 3000 bytes.
Inkluderar alla domänens cookies innehåll, som ifall HTTP/2 används är komprimerade när de skickas mellan webbläsare och server så det går lite snabbare.
Statiska filer
Antalet filer (per sidvisning) som Google bedömer är statiska, det vill säga inte förändras. Vanliga sådana filer är bilder, namngivna kodbibliotek för Javascript och CSS.
Dessa filer kan man med fördel ha riktigt lång livslängd på så de stannar i webbläsarens cache, istället för att laddas ner på nytt och göra ett kommande återbesök långsammare än nödvändigt.
Storlek på HTML
HTML-filens storlek i ett okomprimerat skick. Har man konfigurerat sin webbplats korrekt skickas filen komprimerad och är då cirka en tiondel så stor.
Eftersom HTML bär på sidans innehåll är det sällan en poäng att minska på dess storlek.
Storlek på sidvisning
Hela sidvisningens tyngd med allt innehåll som laddats in. Inkluderar bilder, kod, innehåll och annat. Google anger att de “uses the default gzip compression strategy as an estimation”.
Storlek på CSS
Den okomprimerade storleken på CSS-filen/filerna.
CSS är språket för att styra färg, formgivning och layout för de olika skärmstorlekar som användarna kan tänkas ha.
Storlek på bilder
Storleken på bilder anges inte komprimerat utan dess riktiga storlek.
Det är vanligt med åtminstone några hundra kilobyte med bilder på en webbsida idag.
Storlek på Javascript
Mängden Javascript en besökare på webben är ibland ganska massiv. Ofta runt en megabyte. Siffran här anges okomprimerat.
Vanligen är det bara en bråkdel av all denna Javascript som faktiskt används, vilket gör det till en vanlig förbättring många kan åstadkomma.
Antal Javascript-filer
Det är fullt möjligt att bygga en webbplats som bara använder en endaste Javascript-fil, eller ingen alls om den enskilda sidan inte behöver någon extern Javascript för att fungera.
Ju fler filer desto fler gånger behöver webbläsaren hämta något över nätet.
Antal CSS-filer
Se ovanstående om antalet Javascript, samma gäller för CSS.
Antal roundtrips
Roundtrips handlar om hur många gånger webbläsaren behöver kontakta webbservern för att få en komplett webbsida att presentera. Ju färre desto snabbare.
Webbservern skickar webbsidan uppdelat i mindre paket, nämligen vanligen i 14,6 Kb stora paket. Den absoluta gränsen på ett pakets storlek är 64 Kb, men i praktiken skickas aldrig så stora paket.
Alltså beror antalet roundtrips på webbsidans storlek och paketstorleken. För varje roundtrip finns en tröghet/latens på grund av kommunikationen över internet, vilket är en motivering till att minska antalet roundtrips.
Antal blockerande roundtrips
Se ovanstående om roundtrips. Skillnaden här är ifall en eller flera roundtrips blockerar webbläsaren från att börja hämta andra paket. Kanske framgår det inte förrän först senare att det existerar fler paket och webbläsaren missar chansen att göra flera hämtningar samtidigt.
Andra omdömen
För nedan omdömen får webbplatsen antingen ”Ok” eller ”Behöver förbättras”. Betygen är Googles relativa viktning över vad webbplatsen har störst problem med. Vi får tillbaka en siffra från Google Pagespeed API för respektive omdöme. Siffran kan vara 0 ifall allt är frid och fröjd på den punkten.
Om siffran är över 2 sätter vi på Webperf omdömet ”Behöver förbättras” då värdet inte är negligerbart.
Undvik hänvisningar
Hänvisningar handlar om att användaren skickas mellan flera olika adresser innan hen når slutmålet. Inom SEO har det talats om att man ska ha maximalt tre hänvisningar, i tron att Google rankar ner webbsidan annars. Det här mätvärdet är ett objektivt sätt att förhålla sig till hänvisningar och siffran kommer från Google.
Om Googles samlade bedömning är över två kommer vi ange ”Behöver förbättras” här på Webperf.
Aktivera GZIP-komprimering
Om GZIP är aktiverat kommer textfiler att skickas i en komprimerad form över nätet till besökarna. Det innebär att innehållet är mångfaldigt mindre, ibland bara en tiondel så stor. Då går det fortare.
Använd webbläsarens cache
Innebär att filer har en förväntad livslängd och gärna en lång sådan. Ett exempel på konstig konfigurering är när logotypen har en förväntad livslängd på en timme. Hur troligt är det att man byter logotyp varje timme?
Ha gärna en livslängd på 1-3 månader på filer som inte förväntas uppdateras. Om de ändå gör det är det inte svårare än att byta namn deras namn för att ändringen ska slå igenom.
Är webbservern snabb
Om inte webbservern är snabb kommer det sänka varje fil och sidvisning på webbplatsen. Det är illa. Så här skriver Google i dokumentationen: “This rule triggers when PageSpeed Insights detects that your server response time is above 200 ms.”
Behöver CSS-filer minimeras
Med minimering menas inte att de ska avlägsnas, snarare att man ska ta ta bort saker som inte behöver vara där. Normalt sett är det inga problem med att ha lite extra mellanslag, tabbar eller kodkommentarer, men om den här regeln ger utslag har man nog ett problem värt att inspektera.
UR dokumentationen:
“Minification refers to the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser - e.g. code comments and formatting, removing unused code, using shorter variable and function names, and so on.”
Behöver HTML-filen minimeras
Se ovanstående om minimering av CSS.
Behöver Javascript-filer minimeras
Se ovanstående om minimering av CSS.
Blockeras sidvisningen
Väldigt många moderna webbplatser har svårt med denna punkt. Det handlar om att man har en stor mängd Javascript som hindrar webbsidan att snabbt visa upp sig. Oftast beror detta på externa Javascript.
Att undersöka om det går att skjuta upp inladdningen av så många Javascript som möjligt.
Behöver bilderna optimeras för webben
Bilder är ganska ofta det tyngsta materialet på en webbsida. Det finns massor med sätt att hålla bildstorleken nere. Dels är det viktigt att de ska vara i rätt upplösning, men sedan finns det olika bildformat som är olika effektiva i att hålla filstorleken liten beroende på bildens innehåll. Utöver det kan bilder sparas för webben samt ofta minskas ytterligare genom att köra genom en icke-förstörande optimering.
Mer om bildoptimering hittar du i webbanalys-boken här på Webperf.
Ur Googles dokumentation om bildoptimering:
“This rule triggers when PageSpeed Insights detects that the images on the page can be optimized to reduce their filesize without significantly impacting their visual quality.”
Det Google kan upptäcka är ifall den icke-förstörande optimering kan göra stor skillnad och om bilden är större i antalet bildpunkter än vad som är nödvändigt.
Behöver synligt innehåll prioriteras
Denna regel kallas också för reduktion av above-the-fold content. Above-the-fold (ATF) är det innehåll som förväntas synas utan att användaren har behövt skrolla något, det vill säga vad som är överst och får plats på skärmen utan skroll.
Ur dokumentationen:
“This rule triggers when PageSpeed Insights detects that additional network round trips are required to render the above the fold content of the page.”
och:
“If the amount of data required exceeds the initial congestion window (typically 14.6kB compressed), it will require additional round trips between your server and the user’s browser. For users on networks with high latencies such as mobile networks this can cause significant delays to page loading.”
