Snabbare hemsida med 100 i PageSpeed
Vad Core Web Vitals och PageSpeed mäter, vilka val jag gjorde och en checklista du kan följa på din egen sajt.
När jag byggde om robinrosada.se ville jag att sajten skulle vara snabb från början. I dag får den 100 i Google PageSpeed på både mobil och dator. I den här artikeln förklarar jag först vad Core Web Vitals och PageSpeed mäter, och sedan går jag igenom de val jag gjorde och varför.
Vad är Core Web Vitals?
Core Web Vitals är tre mått som Google använder för att bedöma hur en sida upplevs av besökarna. De mäter hur snabbt sidan laddar, hur snabbt den reagerar och hur stabil den är medan den laddar.
- LCP, Largest Contentful Paint, mäter hur lång tid det tar innan det största innehållet på skärmen har laddats. Ofta är det en stor bild eller rubriken högst upp.
- INP, Interaction to Next Paint, mäter hur snabbt sidan reagerar när besökaren klickar eller trycker på något.
- CLS, Cumulative Layout Shift, mäter hur mycket saker flyttar sig medan sidan laddar, till exempel när en bild dyker upp och trycker ner texten.
Google räknar en sida som bra om LCP är under 2,5 sekunder, INP under 200 millisekunder och CLS under 0,1.
Datan samlas in från besökare som använder Chrome. När en sajt har tillräckligt med trafik syns resultatet i Search Console, i rapporten Core Web Vitals. Hastighet är en av många saker Google tittar på och avgör sällan rankingen på egen hand. För besökarna gör den ändå skillnad, eftersom en sida som laddar snabbt är trevligare att använda.
Vad mäter PageSpeed?
Google PageSpeed Insights är ett gratis verktyg som testar en sida och ger den en poäng mellan 0 och 100. Testet görs med en simulerad mobil och en långsam uppkoppling, så att problemen syns tydligt. Det är ett bra sätt att hitta det som gör en sida långsam och att se om en ändring gör skillnad.
Poängen kommer från ett test vid ett tillfälle och kan variera lite från gång till gång. Den visar hur sidan klarar testet, och hur dina besökare upplever den kan skilja sig något.
Resultatet
Min sajt får i dag 100 i PageSpeed på både mobil och dator. På mobil visas det första innehållet efter 0,9 sekunder och sidans största element efter 1,7 sekunder. På dator är samma värden 0,3 och 0,4 sekunder. Sidan hoppar inte medan den laddar, och bästa metoder och SEO ligger också på 100.
Så är sajten byggd
robinrosada.se är byggd i vanlig HTML, utan publiceringssystem som WordPress. Varje sida är en färdig fil som skickas direkt till besökaren. På en sajt med publiceringssystem behöver servern ofta hämta innehåll från en databas och sätta ihop sidan innan den kan skickas, och i webbläsaren kan tillägg och skript behöva laddas innan sidan visas. Ju färre sådana steg, desto snabbare kommer sidan fram till besökaren. Det blir också färre saker som kan gå fel eller behöva uppdateras.
Sajten ligger hos en leverantör med CDN, ett nätverk av servrar på flera platser i världen. Filerna skickas från den server som ligger närmast besökaren, och ju kortare sträcka informationen ska färdas, desto snabbare svarar sajten. Filerna komprimeras också innan de skickas. Det betyder att de packas ihop till en mindre storlek, så att det går snabbare att ladda ner dem. Det märks mest för den som surfar på mobilen med sämre täckning.
Ett av de viktigare valen är förmodligen att sajten inte använder skript från andra tjänster, som chattar eller annonser. Varje sådant skript hämtar kod från en annan server och tar kraft från webbläsaren, och det brukar märkas i PageSpeed.
Illustrationerna på sajten är ritade med kod, i formatet SVG. En vanlig bild består av tusentals pixlar som alla ska laddas ner. En SVG-illustration beskriver i stället formerna med några rader kod, så filen blir väldigt liten, ofta bara några kilobyte. Eftersom webbläsaren ritar upp formerna själv blir de dessutom skarpa på alla skärmar.
Typsnitten
Ett vanligt scenario är att typsnitten hämtas från Google Fonts, och så var det för mig också från början. Det är smidigt att komma igång med, men det sker i flera steg. Webbläsaren hämtar först en fil från Google som beskriver typsnitten och därefter själva typsnittsfilerna från ytterligare en server. Under tiden får texten på sidan vänta.
I mitt fall var det här en av de ändringar som gav bäst utfall. Innan ändringen låg sajten på 90 poäng på mobil. När typsnitten flyttades till sajtens egen server försvann den väntan, och det var en stor del av vägen därifrån till 100.
Typsnitten sparas nu i formatet woff2, som är gjort för webben och ger små filer. De typsnitt som syns högst upp på sidan laddas i förväg. Tills de är klara visas texten i ett reservtypsnitt, så att besökaren kan börja läsa direkt. Typsnitten jag använder har en öppen licens, så det går bra att lägga dem på sin egen server. Kolla licensen först om du vill göra samma sak med andra typsnitt.
Den största bilden på sidan
Bilder är ofta det som tar längst tid att ladda på en sida, och därför är de en av de vanligaste orsakerna till att en sida känns långsam. Det kan också påverka affären. Ju längre en besökare får vänta, desto större är risken att hen lämnar sidan innan den har laddat klart, och den som lämnar hinner aldrig höra av sig eller handla.
På startsidan är det största elementet porträttet av mig. Jag gick igenom varje sida och kollade vilket element som var störst. På de sidor där det var en bild lade jag till en markering som säger åt webbläsaren att hämta bilden först.
På artikelsidan hittade jag också ett fel. Den översta bilden var inställd på att laddas senare, vilket är en inställning som passar bilder längre ner på sidan. När jag ändrade det laddades sidan snabbare.
Bilder i rätt storlek
Alla bilder sparas i formatet WebP, som ger mindre filer än JPG. Varje bild finns också i några olika storlekar, så att en mobil hämtar en mindre version än en stor skärm. Porträttet på startsidan väger till exempel 9 kB på mobil och 46 kB i sin största storlek.
Alla bilder har också bredd och höjd angivna i koden. Då vet webbläsaren hur mycket plats bilden behöver innan den har laddats, och texten ligger kvar på sin plats när bilden dyker upp.
Behöver du hjälp med din sajts Core Web Vitals?
Jag går igenom din sajt, tittar på vad som gör den långsam och hjälper dig att prioritera det som ger mest effekt.
Tänk på det här när du mäter
Kör testet några gånger, eftersom resultatet kan variera. Försök också testa under samma förutsättningar som på den riktiga sajten. När jag testade lokalt på min egen dator, utan komprimering, blev vissa siffror sämre än de var i verkligheten.
Om du testar en sida som ligger bakom inloggning kommer PageSpeed inte åt den. Då kan du använda Lighthouse, som finns inbyggt i Chromes utvecklarverktyg och gör samma test.
Checklista för en snabbare hemsida
- Ta bort skript från andra tjänster som du inte behöver.
- Lägg typsnitten på din egen server i formatet woff2 och ladda de viktigaste i förväg.
- Ta reda på vilket element som är störst på dina viktigaste sidor och låt webbläsaren hämta det först, med
fetchpriority="high". - Kontrollera att den bilden inte är inställd på att laddas senare, med
loading="lazy". - Spara bilder i WebP och i flera storlekar.
- Ange bredd och höjd på alla bilder.
- Låt bilder längre ner på sidan laddas först när besökaren scrollar dit.
- Kör testet flera gånger och under samma förutsättningar som på den riktiga sajten.
- Följ Core Web Vitals i Search Console när sajten har trafik.
Vill du ha en snabbare sajt?
Hör av dig så går jag igenom vad som bromsar din sajt och vad som ger mest effekt att åtgärda.