PageSpeed Insights är ett verktyg från Google som analyserar och betygsätter en webbplats prestanda. Det är ett av de viktigaste instrumenten att arbeta med som används inom SEO och de mätvärden som det använder används också i regel av andra tjänster.
Det finns en rad olika mätvärden som används av PageSpeed Insights för att utvärdera prestanda och hastighet på en webbplats. Det exakta antalet och hur relevanta de är ändras över tid. Vissa mätvärden är sannolikt helt inaktuella på min lista och det kan även finnas fler som jag missat (tipsa mig gärna). Dessa mätvärden (sk metrics) är indelade i två kategorier – De viktigaste: Core Web Vitals och andra mätvärden. De du givetvis primärt ska fokusera på är såklart just Core Web Vitals. Men ibland kan absolut problem uppstå som beror på övriga mätvärden.
Core Web Vitals omfattar 3 mätvärden: LCP – Largest Contentful Paint, FID – First Input Delay och CLS – Cumulative Layout Shift.
Dessa mätvärden anses vara avgörande för att ge användarna en bättre webbupplevelse och är de som sannolikt oftast mest kommer att påverka resultatet på de värden på 0-100 som du får när du analyserar din sida på PageSpeed Insights. Här följer en lista på 25 kända mätvärden:
- LCP – Largest Contentful Paint: Detta är tiden det tar för det största synliga innehållet på sidan att laddas, såsom en stor bild eller en rubrik. Ett exempel på dålig LCP är när en hero-bild tar lång tid att ladda och användaren väntar länge innan de kan se innehållet. För att förbättra LCP kan man optimera bilder, använda “lazy loading” och minimera CSS och JavaScript.
- FID – First Input Delay: Detta värde mäter tiden från när en användare interagerar med sidan, till dess att webbläsaren faktiskt kan svara på interaktionen. Ett exempel på dålig FID är när en användare klickar på en knapp och det tar lång tid innan något händer. För att förbättra FID kan man minska JavaScripts exekveringstid, använda webbläsar-caching och optimera serverns svarstider.
- CLS – Cumulative Layout Shift: CLS mäter hur mycket sidans innehåll förskjuts under laddning. Om element på sidan flyttar sig medan sidan laddas kan det leda till oavsiktliga klick och en dålig användarupplevelse. För att förbättra CLS kan man undvika att infoga innehåll ovanför befintligt innehåll, ange dimensioner för bilder och videor, och använda stabila webbfontsladdningstekniker.
- TTFB – Time to First Byte: Detta värde mäter tiden det tar för webbläsaren att ta emot det första bytet av data från servern. Om TTFB är hög kan det innebära att servern är överbelastad eller att det finns problem med nätverksanslutningen. För att förbättra TTFB kan man använda Content Delivery Networks (CDN), optimera serverns konfiguration och implementera servercaching.
- FCP – First Contentful Paint: FCP mäter tiden det tar för webbläsaren att visa det första innehållet på sidan, såsom text eller en bild. Om FCP är långsam kan det innebära att användaren ser en tom sida innan något innehåll visas. För att förbättra FCP kan man optimera kritiska renderingvägar, använda asynkron laddning av JavaScript och komprimera resurser som bilder och CSS-filer.
- FMP – First Meaningful Paint: Detta värde mäter tiden det tar för webbläsaren att visa det mest meningsfulla innehållet på sidan, såsom huvudtexten eller en viktig bild. Om FMP är långsam kan det innebära att användaren måste vänta länge innan de kan interagera med sidan. För att förbättra FMP kan man optimera bildstorlek, använda “lazy loading” och prioritera laddning av kritiska resurser.
- TTI – Time to Interactive: TTI mäter tiden det tar för en sida att bli helt interaktiv för användaren, det vill säga när alla element och JavaScript-funktioner fungerar korrekt. Om TTI är långsam kan det innebära att användaren måste vänta länge innan de kan använda sidan fullt ut. För att förbättra TTI kan man minimera och fördröja JavaScript, använda effektiv cache-policy och optimera serverns svarstider.
- Server Response Time: Detta värde mäter tiden det tar för servern att svara på en begäran från webbläsaren. En långsam serverrespons kan leda till långsamma laddningstider och en dålig användarupplevelse. För att förbättra serverns svarstid kan man optimera databasförfrågningar, använda en Content Delivery Network (CDN) och implementera servercaching.
- Main Thread Metrics: Detta är en uppsättning metriska som mäter huvudtrådens aktivitet under sidladdningen. En överbelastad huvudtråd kan leda till långsamma interaktioner och en dålig användarupplevelse. För att förbättra huvudtrådsmetriska kan man minimera och fördröja JavaScript, optimera CSS och använda webbläsar-caching.
- TBT – Total Blocking Time: TBT mäter den totala tiden som en sida är blockerad och inte kan svara på användarinteraktioner på grund av JavaScript-beräkningar eller annan huvudtrådsaktivitet. Om TBT är hög kan det innebära att användaren får en dålig upplevelse när de interagerar med sidan. För att förbättra TBT kan man optimera JavaScript-koden, använda webbläsar-caching och minimera resursstorlekar.
- SI – Speed Index: Hastighetsindex mäter hur snabbt innehållet på en sida visas för användaren. Det tar hänsyn till både synligt innehåll och sidans layout. Om hastighetsindexet är lågt kan det innebära att användaren måste vänta länge innan de ser något innehåll. För att förbättra hastighetsindexet kan man optimera bildstorlekar, prioritera kritiska resurser och använda asynkron laddning av JavaScript.
- JavaScript Execution: Detta värde mäter hur snabbt JavaScript-koden på sidan körs. Om JavaScript-körningen är långsam kan det innebära att användaren får en dålig upplevelse när de interagerar med sidan. För att förbättra JavaScript-körningen kan man minimera och fördröja JavaScript, använda webbläsarcaching och optimera resursstorlekar.
- Render-blocking resurses: Detta värde mäter antalet resurser, såsom JavaScript och CSS, som blockerar renderingen av sidan. Om det finns många render-blocking resurser kan det innebära att användaren måste vänta länge innan de ser innehållet på sidan. För att minska antalet render-blocking resurser kan man använda asynkron och “defer” laddning av JavaScript, optimera CSS och använda kritisk CSS inline.
- Unused JavaScript & CSS: Detta värde mäter mängden JavaScript och CSS-kod som laddas men inte används av sidan. Om det finns mycket oanvänd kod kan det innebära att sidan tar längre tid att ladda och interagera med. För att minska oanvänd JavaScript och CSS kan man använda kodsplittring, ta bort oanvända resurser och optimera koden.
- Browser Caching: Detta värde mäter hur effektivt en webbplats använder webbläsarcaching för att snabba upp sidladdningstider. Om webbläsarcaching inte används effektivt kan det innebära att användaren måste vänta länge på att sidan laddas. För att förbättra webbläsarcaching kan man använda Cache-Control-headers, ETags och optimera serverns konfiguration.
- Custom Web Fonts Loading Time: Detta värde mäter tiden det tar för anpassade webbteckensnitt att laddas på sidan. Om laddningstiden för webbteckensnitt är lång, kan det innebära att användaren ser systemteckensnitt eller tomma utrymmen innan det anpassade teckensnittet visas. För att förbättra laddningstiden för webbteckensnitt kan man använda moderna filformat som WOFF2, ladda teckensnitt asynkront och använda en CDN för att leverera teckensnittsresurser.
- First CPU Idle: Detta värde mäter tiden det tar för sidan att nå en tillstånd där huvudtråden är inaktiv och användaren kan interagera med sidan. Om tiden för första CPU-inaktiva är lång, kan det innebära att användaren får vänta länge innan de kan använda sidan fullt ut. För att förbättra First CPU Idle kan man minimera och fördröja JavaScript, optimera serverns svarstider och använda effektiv cache-policy.
- Time to Visually Complete: Detta värde mäter tiden det tar för sidan att visa allt synligt innehåll, inklusive bilder, text och andra visuella element. Om tiden till visuellt komplett är lång, kan det innebära att användaren ser en ofullständig eller tom sida innan allt innehåll visas. För att förbättra Time to Visually Complete kan man optimera bildstorlekar, använda “lazy loading” och prioritera laddning av kritiska resurser.
- HTTP Requests: Detta värde mäter antalet HTTP-förfrågningar som görs av sidan för att hämta resurser som bilder, CSS och JavaScript. Ett stort antal HTTP-förfrågningar kan leda till långsamma laddningstider och en dålig användarupplevelse. För att minska antalet HTTP-förfrågningar kan man använda tekniker som spriting, sammanfoga resurser och använda HTTP/2 eller HTTP/3 för effektivare överföring av resurser.
- Third-Party Resources: Detta värde mäter storleken och antalet tredjepartsresurser som laddas på sidan, såsom annonser, analysverktyg och widgets. Om det finns många tredjepartsresurser kan det innebära att sidladdningstiden ökar och användarupplevelsen försämras. För att minska inverkan av tredjepartsresurser på prestanda kan man:
- Begränsa användningen av tredjepartsresurser och endast använda dem som är absolut nödvändiga för webbplatsens funktioner och mål.
- Ladda tredjepartsresurser asynkront eller efter att sidans huvudinnehåll har laddats, för att minimera inverkan på sidladdningstiden.
- Använda en Content Delivery Network (CDN) för att leverera tredjepartsresurser snabbare och minska belastningen på webbplatsens server.
- Number of DOM Elements: Detta värde mäter antalet DOM-element som finns på sidan. En stor mängd DOM-element kan påverka prestanda och göra det svårare att underhålla koden. För att minska antalet DOM-element kan man förenkla sidans struktur, använda CSS för att ersätta JavaScript-baserade effekter och undvika onödiga inbäddade element.
- Total Transfer Size: Detta värde mäter den totala mängden data som överförs när en sida laddas. Om överföringsstorleken är stor kan det innebära att sidladdningstiden ökar och användarupplevelsen försämras. För att minska överföringsstorleken kan man komprimera och optimera resurser, använda en CDN och använda cache-policy effektivt.
- Text Compression: Detta värde mäter hur väl textbaserade resurser som HTML, CSS och JavaScript komprimeras när de överförs. Om komprimeringen är ineffektiv kan det innebära att sidladdningstiden ökar och användarupplevelsen försämras. För att förbättra textkomprimeringen kan man använda gzip eller Brotli komprimering och konfigurera servern för att skicka komprimerade resurser.
- Security: Detta värde mäter hur väl en webbplats följer säkerhetsprinciper och praxis, såsom att använda HTTPS och att ha en säker konfiguration för webbservern. Om säkerheten är bristfällig kan det innebära att användarens data och integritet är i fara. För att förbättra säkerheten kan man använda HTTPS, konfigurera servern enligt säkerhetsstandarder och genomföra regelbundna säkerhetsgranskningar.
- Mobile Usability: Detta värde mäter hur väl en webbplats är anpassad för att fungera på mobila enheter. Om användbarheten på mobila enheter är dålig kan det innebära att användarna får en sämre upplevelse när de besöker webbplatsen på sina mobila enheter. För att förbättra användbarheten på mobila enheter kan man använda responsiv design, optimera knappstorlek och avstånd och undvika användning av tekniker som inte är kompatibla med mobila enheter.