Användare blir irriterade på långsamma webbsidor och lämnar ofta sidan om den tar för lång tid att ladda. Att en webbplats är snabb att ladda är också viktigt för sidans ranking och exponering i sökmotorerna eftersom bland annat Google rankar långsamma webbsidor lägre i sökresultat. I och med att fler och fler använder smartphones med långsam internetuppkoppling är det viktigt att sidans storlek (antalet bytes) är liten.

En riktlinje är att en sida ska ladda in på under en sekund.

”53% of mobile site visits are abandoned if pages take longer than 3 seconds to load”, skriver Google i artikeln The need för mobile speed: How mobile latency impact publisher revenue.

Design, innehåll och teknik påverkar prestandan

En webbsida är alltid en avvägning av design och innehåll mot prestanda. Typsnitt, bilder, videor, ikoner och JavaScript är saker som finns på en webbsida och som måste laddas in från servern. Varje anrop till servern tar lite tid vilket påverkar webbsidas laddningshastighet. En enkel sida med vit bakgrund och svart text i standardtypsnittet Times laddar snabbt, medan en sida med många stora bilder, olika typsnitt med mera laddar långsammare. Av den anledningen är det viktigt att tänka på prestanda redan i designfasen när en ny webbsida tas fram.

Det kan också finnas tekniska begränsningar som påverkar prestandan, exempelvis krav på att webbplatsen ska stödja äldre webbläsare, vilket kan dra ner betyget i testverktygen. Det behöver inte innebära att det är ett problem om sidan inte får toppbetyg när du testar, men om ett test visar rött på flera områden finns det troligen saker som behöver åtgärdas.

Tre verktyg för att mäta prestanda

Flera stora svenska webbplatser har en ranking på cirka 50-75 i dessa verktyg. Du bör sträva efter att komma upp i åtminstone 90.

På Metamatrix använder vi bland annat dessa tre verktyg för att mäta prestanda: Google Page Speed Insights, Pingdom Tools och WebPageTest. Besöka gärna webbtjänsterna själv och testa:

Verktygen tipsar om hur du höjer prestandan

WebPageTest ger den mest detaljerade rapporten. Google Page Speed Insights visar en översiktlig rapport med förslag på vad som kan förbättras för att höja prestandan medan Pingdom Tools ger en mer specifik rapport. I Pingdom Tools kan det vara intressant att titta på:

  • Sidans laddningstid som bör vara under 1 sekund.
  • Sidans storlek bör ligga någonstans runt 500KB till 1MB. Det går inte att ge ett exakt svar på hur stor en sida ska vara eftersom innehåll kan laddas in allt eftersom, men ju mindre sida ”väger” desto bättre. Enligt HTTP Archive är den genomsnittliga storleken på en webbsida över 2 MB.
  • Antalet anrop till servern. Enligt HTTP Archive är det vanligt att webbsidor gör 50-100 anrop per sida som laddas in. Ju färre anrop desto bättre är en bra riktlinje. När vi bygger webbplatser strävar vi efter en maxgräns på 20-30 anrop, men det beror också mycket på sidans innehåll. För varje bild måste till exempel ett anrop göras till servern.

Så här kan du påverka prestanda när du jobbar med bilder

Webbplatsens prestanda fortsätter att ändras även efter att en webbplats har lanserats till exempel vid utveckling och när nya sidor läggs till. Det är vanligt att bilderna på en webbplats drar ner prestandan. En bild på webben bör inte ha en filstorlek större än 50-100 KB. Du kan påverka storleken genom att:

  • Beskära bilder till rätt storlek om de inte skalas om automatiskt på webbplatsen. Bilder är oftast den största mängden data som webbläsaren måste ladda in vid en sidvisning. Ju bredare och högre en bild är desto mer information innehåller den.
  • Spara bilder i rätt format: För fotografier är det bästa formatet JPEG. Du kan oftast dra ner kvaliteten till 70-80 procent utan att det mänskliga ögat ser någon skillnad. Spara grafik med få färger, som logotyper och diagram, som PNG eller GIF. Spara bilder som är gjorda med vektorgrafik som SVG. Det är dock inte alla bildhanteringsprogram som kan spara i SVG-format.
  • Använd en bildkomprimerare för att minska bildernas storlek. Bildkomprimerare tar bort onödig bildinformation som bildhanteringsprogram sparar. Här är tre verktyg du kan använda för bildkomprimering. Ofta kan dessa verktyg minska bildernas storlek i KB avsevärt. Här är några tips: Tiny PNG, Smush it, SVGOMG
  • Placera inte för många stora bilder på samma sida. Gör istället mindre bilder (så kallade ”tumnaglar”) och länka dem till den stora versionen av bilden.
  • Skriv ut filstorleken för stora nedladdningsbara filer som PDF:er och andra dokument. Användare med långsamma uppkopplingar kan annars försöka ladda hem stora filer av misstag.

Vill du ha hjälp att få ner din webbplats prestanda? Kontakta Frida Hallén.