En hemsidas laddningshastighet är idag enormt viktigt, både när det gäller sökmotorsoptimering (SEO) och inte minst användarupplevelsen. Få saker kan irritera en användare mer än att sidan laddar långsamt. Faktum är att hela 53% av mobilanvändare som upplever en laddningstid över 3 sekunder lämnar sidan.
Statistik från Google/SOATSA visar också att laddningstiden påverkar sidans "bounce rate", alltså den andel användare som lämnar efter endast en sidvisning.
Då sökmotorerna vill att de SEO-resultat som genereras i möjligaste mån ska spegla hur bra användarupplevelsen är, så blir sidans hastighet en väldigt viktig komponent i de algoritmer utvärderar sidan. En sida som laddar långsamt får allt annat lika en sämre ranking.
Den här guiden förklarar hur du mäter hemsidans hastighet och ger 9 konkreta tips på hur den kan förbättras.
Hur mäter jag min hemsidas hastighet?
Det finns en uppsjö av verktyg för att undersöka hur snabbt en hemsida laddar. I den här guiden kommer vi att använda oss av Googles egna verktyg, PageSpeed Insights. Det är ett enkelt och bra verktyg som mäter hastigheten med hjälp att en rad nyckeltal som vi kommer förklara närmare. Andra populära verktyg är t.ex. Pingdom tools (som låter dig testa från olika geografiska platser) och GTmetrix.
På PageSpeed Insights startsida anger du vilken hemsida som helst, det kan vara din egen men t.ex. också en konkurrents eller någon i samma bransch som rankar hög på Google ifall du vill jämföra dig mot andra.
Efter att du angivit hemsidans adress så startar mätningen. När den är klar får du upp två resultatsidor, en för mobilversionen av sidan och en för desktop.
Resultatet består av en rad mätvärden. Dessa är:
First contentful paint (FCP)
Mäter tiden mellan att sidan börjar laddas till när någon del av sidans DOM-innehåll renderas på skärmen. Det kan t.ex. vara en bild, en text eller ett SVG-element.
Speed index (SI)
SI mäter hur snabbt innehåll visas visuellt under sidladdningen. Det är den genomsnittliga tiden det tar för synliga delar att visas.
Largest contentful paint (LCP)
Mäter när det största elementet i innehållet visas på startskärmen. Det används för att uppskatta när sidans huvudsakliga innehåll blir synligt för användaren.
Time to interactive (TTI)
TTI mäter hur lång tid det tar innan sidan blir fullt interaktiv. TTI anses viktigt eftersom att vissa sidor optimeras för hur lång tid det tar att visa innehåll på bekostnad av interaktivitet. Det kan vara frustrerande för användaren att sidan verkar redo, men ingenting händer när man t.ex. försöker klicka på ett objekt.
Total blocking time (TBT)
TBT mäter den totala tid som en sida blockeras från att svara på användarinput, t.ex. ett musklick eller tryck på en tangent.
Cumulative layout shift (CLS)
CLS-värdet anger hur visuell stabilitet beter sig när sidan läses in. Det är tänkt att kvantifiera hur ofta användaren får uppleva oväntade skiften i layouten som kan försämra användarupplevelsen. Ju lägre CLS-värde, desto bättre.
Varje kategori får ett resultat där:
90 punkter eller fler anses bra och blir grönt
50 - 90 punkter anses behöva förbättring och blir gult
50 punkter och under anses dåligt och blir rött
Efter resultatredovisningen följer en lista med åtgärder som Google tror kan förbättra sidans hastighet.
Bli inte avskräckt om du tycker att listan verkar lång och komplicerad. Det finns alltid saker som kan bli bättre. Många av punkterna blir dessutom lösta av att bocka av listan här nedan.
Hur minimerar jag hemsidans laddningstid och optimerar hastigheten?
Det finns en mängd sätt att reducera en hemsidas laddningstid, det är en hel vetenskap i sig. Vi ska dock göra vårt bästa för att hålla det relativt enkelt. Här är 9 tips som kan hjälpa dig att komma igång med att optimera din hemsida:
1. Rätt storlek på bilder
Se till att bilderna på sidan inte är större än de behöver vara, en onödigt stor bild tar också onödigt lång tid att ladda. Detta kan du göra antingen genom att använda responsiva bilder eller helt enkelt genom att anpassa storleken innan du laddar upp bilderna på sidan.
2. Använd bilder i rätt filformat
Var noga med att bilderna inte är i ett filformat som tar onödigt mycket plats. Generellt brukar man säga att PNG bättre för grafik och JPEG bättre för foton. Eller så kan du använda Googles egna format WebP, som vissa anser är bättre än både PNG och JPEG.
3. Använd komprimering
Komprimera t.ex. den CSS, HTML och JavaScript som används på sidan. Det finns mängder av program som kan underlätta detta, men gzip är ett populärt alternativ.
Se också till att bilder komprimeras till så liten storlek som möjligt utan att kvalitén avsevärt försämras, det kan vara ett av de enklaste sätten att förbättra sidans laddningstid.
4. Reducera omdirigeringar
Varje gång en sida omdirigerar till en annan sida så tar det extra tid. Omdirigeringar kan addera fraktioner av en sekund, och i vissa fall till och med hela sekunder till sidans laddningstid.
En omdirigering kan visserligen vara nödvändig i vissa lägen, som när du har flyttat sidan till en ny domän. Men att reducera antalet onödiga omdirigeringar kan förbättra sidans hastighet avsevärt.
5. Minimera sidans kod
Att minimera koden på sidan innebär att ta bort allt som inte är nödvändigt för kodens funktion. Det kan bland annat göras genom att radera onödiga mellanslag, radbrytningar, semikolon och kommentarer i koden. Detta gör att de laddar snabbare i webbläsaren och tar upp mindre bandbredd. Notera att komprimera och minimera inte är samma sak, det blandas lätt ihop.
6. Aktivera cache
Besökarens webbläsare cachar eller sparar information om din sida, t.ex. stilmallar, JavaScript och bilder. Det innebär att en besökare som återvänder till sidan inte behöver ladda om hela sidan en gång till, vilket innebär att sidan laddar mycket snabbare. Informationen rensas sedan regelbundet enligt den tid du ställer in.
7. Eliminera renderingsblockerande resurser
När en ny användare anländer till din sida så börjar deras webbläsare i princip att läsa sidans kod uppifrån och ner. När den under denna process stöter på ett script (som Javascript eller CSS) så måste den stanna upp och köra scriptet innan läsningen nedåt kan fortsätta. Om det dessutom är ett externt script från en tredje part så måste det också laddas ner, vilket tar extra lång tid.
Det är därför viktigt att undvika och minimera användningen av blockerande script, speciellt externa. Se också till att den första, synliga delen av hemsidan laddas snabbare genom att skjuta upp resurser som inte behövs direkt till senare.
8. Aktivera "lazy loading"
Lazy loading är ett smart sätt att prioritera i vilken ordning sidans innehåll laddas. Det innebär förenklat att bilder som inte behöver visas på toppen av sidan laddas senare, först när de verkligen behövs. Eftersom att det inte finns någon anledning till att ladda innehåll som inte syns för användaren, kan detta vara ett enkelt och bra sätt att förbättra användarupplevelsen.
9. Minimera kod från tredje part
Att använda exempelvis olika plugins från externa leverantörer kan vara ett enkelt sätt att applicera nya häftiga funktioner på din hemsida. Baksidan är dock att det riskerar att påverka sidans snabbhet. Tänk därför igenom noga vilka plugins du verkligen behöver och vilka du kanske kan göra dig av med. Olika plugins påverkar hastigheten olika mycket, så att testa hur dom påverkar hastigheten individuellt kan också vara en god idé.
En sida som laddar långsamt är dåligt både för din ranking hos sökmotorer och användarupplevelsen. Att komma igång med att optimera sidan både för desktop och mobil bör därför prioriteras.
Vi har nu gått igenom varför sidhastigheten är viktig, hur du enkelt kan mäta den och hur den genom 9 konkreta åtgärder går att förbättra. Detta är inte på långa vägar en komplett lista, men det är en effektiv och bra början. Arbetet med att optimera sidhastigheten blir aldrig färdigt, utan måste hela tiden följas upp när t.ex. hemsidans innehåll förändras, nya verktyg blir tillgängliga eller nya sätt att mäta appliceras.
Behöver du hjälp med din hemsida? Se våra priser eller kontakta oss idag!
Källförteckning
Comments