Förbättra prestandan för din webbsajt
Publicerad juni 2022
I webbvärlden pratar vi mycket om prestanda. Men det menar vi att en webbsajt ska upplevas som snabb av besökarna. Det betyder att sajten ska ladda snabbt, svara snabbt på interaktion och kräva så lite som möjligt av användarens utrustning och uppkoppling.
Såklart vill man ge sina besökare en så bra upplevelse som möjligt, men dålig prestanda kan också vara ett faktiskt hinder för användning. Det kan också ge ett sämre genomslag till exempel genom sämre rankning i sökmotorer där prestanda och hastighet är viktiga faktorer. Sidhastigheten har sedan 2018 varit en rankingfaktor för Google och särskilt hastigheten i mobiler är viktigt.
Hur testar man prestandan?
Ett vanligt verktyg för att testa sin webbsajt är att använda Googles verktyg PageSpeedInsights. Googles riktlinje för bra webbprestanda är 85 av 100, men man måste ta med i beaktning vilken typ av sajt och användare det handlar om. Om hastigheten ligger mellan 0 och 49 bör den optimeras. Om sidhastigheten ligger mellan 50 och 89 är resultatet inte katastrofalt men det finns säkert vinningar att göra. Om resultatet blir över 90 är det bara att gratulera. Då kan du istället testa konkurrenternas webbsajter.
Ett annat verktyg för att testa prestandan är Pingdom där man också kan simulera test utifrån besökare från olika delar av världen.
SemRush kan också ge en bra bild - och här får man dessutom bland annat jämförelsevärden med andra webbsajter i olika kategorier.
Men ta resultaten med en nypa salt - testen ger lite olika resultat eftersom de inte fungerar likadant och inte mäter samma saker, så en bra sak kan vara att göra lite olika test. Tänk också på att du inte kan jämföra ett verktygs testresultat med ett annat - och om du gör några förbättringar bör de följas upp med samma verktyg och värden.
Kör också samma test mer än en gång. Första gången är innehållet kanske inte cachat och då kan resultatet se långsammare ut än vad det faktiskt är. Detta kan också hända om du nyss tömt cachen för din sajt eller CDN.
Myndigheten för digital förvaltning (DIGG) har fler exempel på verktyg som visar hur välbyggd en webbsajt är med tanke på prestandan.
Vad kan ge dålig prestanda?
Det finns många möjliga orsaker till att en webbsajt upplevs som långsam. Det mest uppenbara är att antingen servern eller besökaren har en långsam uppkoppling till internet. Det kan också bero på att servern eller uppkopplingen har en hög belastning, till exempel på grund av en överbelastningsattack eller att för många användare efterfrågar ett visst innehåll samtidigt. En webbplats kan också uppfattas som långsam på grund av tekniska brister som kan vara underdimensionerade servrar. Dessa saker ligger alltså hos webbhotellet där webbsajten driftas - alternativ på användarens egen uppkoppling.
Det kan också vara problem i själva koden, till exempel vid sökningar i databaser som kan göra att servern tvingas arbeta onödigt mycket för att ge ett svar. Eller så är konfiguration av cache och databasindex inte optimerat. Detta ligger hos den som utvecklat sajten.
Hur förbättrar man prestandan?
Här finns det alltid något att göra, så det gäller att hitta sin egen rimliga nivå utifrån typ av sajt och funktionalitet och besökarnas förutsättningar.
Vi ska inte gå in i detalj på hur saker kan göras men viktiga huvudpunkter att titta på rent tekniskt är:
- Begränsa antalet anrop - t ex genom frågor till databasen, externa kopplingar, gemensamma CSS filer och scriptfiler
- Konfigurera cachen på bästa sätt - det finns dessutom olika sorters cache - mer om det här
- Komprimera filer och minifiera eller städa i kod - en tumregel är städa bort det som inte behövs
- Se över hur sidan laddas - t ex kan innehåll laddas in efterhand som besökaren scrollar ner på en sida, DNS lookups kan förberedas i bakgrunden etc
- Skicka korrekta statuskoder enligt HTTP-standard och minska omdiregeringar
- Placera CSS-taggar i toppen och Javascript-taggarna i botten
- Använd lämpliga bildformat - många system skalar om originalbilderna till precis det format som behövs vid olika tillfällen
Man kan också använda ett CDN (Content Delivery Network) vilket är ett system som servrarna använder för att leverera innehåll och samtidigt optimera hemsidans prestanda. Filerna distribueras då från flera servrar som finns närmare besökarna.
Vad kan man göra som sajtägare och administratör?
För en sajtägare och administratör finns det också några tips för att förbättra prestandan, till exempel:
- Testa ditt webbhotell och se om det behövs en uppgradering (alternativt välj ett bra webbhotell från början)
- Välj rätt format för bilder och multimedia och gör dem inte större än vad de behöver vara (varken vad gäller kvalitet eller storleksmässigt)
- Använd relativa länkar vid länkar inom sajten
- Ha lagom med innehåll och resurser på en och samma sida (för många embeddade filmer på en sida är kanske inte så lämpligt) - ofta kan man dela upp väldigt stora och innehållsrika sidor i flera (vilket ju kan vara bra för SEO:n också)
Viktigt att veta är att det är nästan omöjligt att uppnå 100% om man använder ett CMS som grund - och det vill man ju oftast.
Vad ska man tänka på när det gäller webbhotell och drift?
Att välja webbhotell är inte helt enkelt och det är många som ångrar sig när det inte fungerar som det ska. Olika webbsajter och kunder kan ha olika behov, så är det svårt att rekommendera ett webbhotell som är det bästa valet för alla. Men vi kan i alla fall berätta vad vi tycker att man ska veta om skillnaden mellan olika typer av konton och vad man bör tänka på.
Mer om olika typer av webbhotell
Vadå absoluta och relativa länkar?
En länk är en länk och man ska väl ändå lägga in hela URL:en om man gör en länk på sin sajt? Svaret är nej, både för att det då blir ett anrop mindre och för att det blir mer framåtkombatibelt om till exempel domänen ska ändras.
Läs mer om olika typer av länkar
Bildhantering på webben - ett kapitel för sig
Responsiv design och mobile first låter helt rätt, men det kanske kan bli ett problem med vilka bilder vi kan använda eftersom de skalas om och visas olika stora i olika skärmar? Det stämmer ju, men problem behöver det inte vara. Man måste bara tänka efter.
Hur ska man tänka för bilder?
Vad är AMP?
Kort sagt kan man säga att AMP ett HTML-ramverk för att göra innehåll på webbsajter anpassat för att ladda snabbt i mobiler. men uppsnabbningen av AMP-sidorna sker genom att ”onödiga” saker skalas bort, till exempel snygga (men ibland onödiga) funktioner och detaljer. Fokus sätt på enkelhet och användarvänlighet. Ofta innebär detta att det finns två versioner av en sida, en "vanlig" och en snabbare version med samma länk men med tillägget ”/amp” på slutet.
Ska man använda AMP?