Vill du ha en snabbare hemsida? Då har du landat på rätt ställe! Längre ner kommer jag att visa 10 olika sätt på hur du kan optimera för snabbhet.
En snabb hemsida är viktigt oavsett vilken typ av webbplats du driver.
Här är några orsaker till varför:
- Google ser webbsidans laddningstid som en faktor för SEO-ranking
- Besökarna förväntar sig att en sida laddar på under 2 sekunder
- Omkring 40% lämnar hemsidan om den inte laddar klart inom 3 sekunder
Med andra ord, om laddningstiden är längre än 3 sekunder riskerar du att förlora omkring 40% av dina potentiella kunder. OBS! Detta är ett generaliserat tal och kan variera från bransch till bransch.
Hur kundbeteendet ser ut på olika sajter varierar mycket. Vi förväntar oss att vissa typer av webbplatser laddar snabbare än andra och det beror helt enkelt på de standarder och förväntningar som skapats i de olika branscherna.
Men, i vilket fall som helst är effekten densamma:
Ju långsammare laddningstid sidan har, desto fler potentiella kunder tappar tålamodet.
Det kommer därför inte som en överraskning att snabbhet är extremt viktigt både inom konverteringsoptimering och onpage-SEO.
Nedan förklarar jag några metoder för att börja optimera mot en snabbare sida men du ska börja med att besvara frågan…
Hur snabb är hemsidan?
Testa alltid hur snabb din hemsida är innan du börjar optimera den. Det här är inte endast viktigt för att förstå hur hastigt den faktiskt laddar, men också för att kunna analysera vilka faktorer som orsakar längre väntetider.
När du tänker på LADDNINGSTID, vad tänker du på då egentligen? Är det någon av punkterna nedan?
- Tiden det tar tills något innehåll visas på skärmen? (First contentful paint)
- Tiden tills innehållet har laddat färdigt ”above the fold”, dvs. det du ser på skärmen utan att behöva skrolla? (First meaningful paint)
- Tiden tills alla dynamiska funktioner är interaktiva på sidan? (Time to interactive)
- Tiden tills hela sidan har laddat från topp till sidfot, inkl. allt som besökaren inte direkt kan se? (Total load time)
Det finns egentligen inget rätt svar eftersom alla ovanstående faktorer är mycket relevanta KPI:er som på något vis beskriver en webbsidas laddningstid.
Genom att analysera dessa var för sig kan det hjälpa dig att identifiera och förstå på vilket sätt sidan är långsam. Utöver detta blir det lättare att avgöra vilken typ av problem som orsakar den långa laddningstiden.
Så får du en snabbare hemsida – en steg-för-steg guide
- Optimera stora bilder
- Aktivera lazy loading
- Minifiera HTML, JavaScript och CSS
- Påkoppla caching
- Bli av med onödiga externa widgets
- Minska antalet HTTP-förfrågningar
- WordPress? Radera onödiga plugins
- Skaffa snabbare server och webbhotell
- Ladda sidans resurser i kronologisk ordning
- Asynchronous load
OBS! Kom ihåg att det utöver tipsen nedan kan det finnas ytterligare sätt att förbättra laddningstider på webbplatser.
1. Stora bilder – ofta en av de primära orsakerna till långsamma webbsidor
För vissa sidor kan bildoptimering vara ett enkelt och effektivt sätt att göra sidan snabbare. Det beror helt enkelt på att bilder ofta är väldigt stora filer i sina ursprungliga format.
Om du aldrig har tänkt på detta så rekommenderar jag att du gör följande:
- Välj ett av dina inlägg (där du har bilder)
- Kopiera inläggets URL och slå in den i Googles Page Speed Insights verktyg för att identifiera stora bildfiler
- Optimera de stora bildfilerna och uppdatera dem i ditt inlägg
Minska storleken på onödigt stora bildfiler
Som illustrerat i skärmdumpen nedan kan de se rubriken “Properly size images” i Page Speed Insights rapporten. Den visar alla bilder som kan minskas i storlek och/eller komprimeras.
OBS! Jag gjorde testet på en slumpmässigt vald sida och har därför suddat ut adressen.
Som du kan se i bildens högra kolumn har Google räknat ut att du potentiellt kan spara 242 KB genom att optimera tre bilder. Detta kan också spara över 1 sekund i laddningstid! Det är mycket!
Har du liknande resultat på din sida? Då kan du lära dig mer om komprimering och bildoptimering här.
Skaffa CDN om du har en bildtung sida
Ett sätt att automatisera bildoptimeringsprocessen är att använda dig av CDN (Content Delivery Network).
Vad är CDN (Content Delivery Network)?
CDN innebär i sin korthet att sidans innehåll finns tillgängligt i flera separata servrar i olika geografiska områden, istället för endast på din egen webbserver. Det här i sin tur innebär att trafiken inte bara belastar din egen webbserver, utan att den istället fördelas på flera servrar. Speciellt om du har många tunga bildfiler på sidan kan detta vara ett effektivt sätt att uppnå en snabbare sida.
Många CDN-tjänster har dessutom automatiserade funktioner för ändring av bildstorlek och komprimering. Om du har en stor sida och du har resurser så är det högst antagligt värt att betala för en sådan tjänst. Det finns även gratisversioner men ofta innebär dessa vissa kompromisser.
2. Lazy loading – ladda endast innehåll som syns på skärmen så att allt relevant laddas snabbare
Webbsidor är ofta långa. Vissa användare ser endast en fraktion av dem.
Webbsurfare spenderar nämligen i snitt 57% av tiden högst upp på sidan (above the fold), visar Norman Nielsen Groups undersökning från 2018. På de flesta sidorna är detta inte långt ifrån sanningen.
Källa: Norman Nielsen Group
En stor andel av besökarna ser alltså endast en fraktion av sidans innehåll, vilket innebär att det är onödigt att offra snabbhet till att ladda innehåll längre ner på sidan.
Av denna anledning rekommenderar jag att kolla in lazy loading, vilket innebär att webbläsaren endast laddar de bilder som besökaren kan se på skärmen vid första ögonblicket.
På det viset kan du minska på belastningen vid den primära laddningen av sidan och skapa en snabbare upplevelse när man landar på sidan.
I Page Speed Insights rapporten kan du även se att Google rekommenderar lazy-loading under rubriken “Defer offscreen images” (se exempelbilden nedan).
I detta exempel ser du endast en fjärdedel av alla bilder som fanns på den testade sidan. Totalt räknade jag ihop 3,5 MB!
Med lazy loading implementerat skulle alltså dessa 3,5 MB endast laddas om och när bilderna är synliga på skärmen. Verktyget påstår även att detta kunde potentiellt spara över 13 sekunder från den totala laddningstiden.
OBS! Det här betyder inte att sidan upplevs ofärdig i 13 sekunder, men eftersom att bilderna ”below the fold” laddar i BAKGRUNDEN kan det göra att sidan känns hackig när man använder interaktiva funktioner. Det kan alltså påverka KPI:n Time to Interactive, som Google kallar det.
3. Minifiera HTML, CSS och Javascript
Det här stycket kan låta lite tekniskt. Men, lyckligtvis finns det många automatiserade alternativ för minifiering, så bli inte skraj.
Vad innebär minify HTML, CSS och Javascript?
En förenklad förklaring… Din hemsida innehåller först och främst HTML (innehåll), men också CSS-koder som berättar webbläsaren hur allt ska se ut. De mer dynamiska elementen på sidan, som exempelvis webbformulär, är ofta byggda på Javascript.
Alla dessa består av koder som i många fall kan “städas upp” genom att eliminera onödiga taggar och tecken. Renare kod (färre tecken) leder till mindre dokumentstorlekar som är snabbare att ladda.
Det är just det minifiering handlar om.
En CSS-kod för ett objekt kan till exempel se ut såhär:
.header {
padding: 45px;
text-align: left;
background: white;
color: #333333;
font-size: 32px;
}
Som du kan se så presenteras koden på ett strukturerat sätt för att det ska vara “enklare” för människor att arbeta med den.
Minifiering av CSS innebär i princip att koden görs mindre human men mer ”maskinvänlig” genom att ändra strukturen och istället presentera allt i en och samma ramsa.
Minifierad version av koden ovan tar bort alla onödiga tecken (ofta mellanslag):
.header{padding:45px;text-align:left;background:white;color:#333333;font-size:32px;}
Genom minifieringen ovan sparades 21 mellanslag.
Med andra ord, när du applicerar detta till alla element på din sida snackar vi om tusentals tecken (beroende på sidans komplexitet förstås). Effekten kan därmed vara betydande.
Utöver mellanslag kan minifering av kod innebära borttagning av andra “onödiga koder” som är oanvändbara för webbläsaren.
För att minifiera dina koder finns det otaliga plugins som kan göra arbetet för dig. Speciellt för WordPress finns det flera plugins som kan göra detta. På den här WordPress-sidan använder jag för tillfället Autoptimize för detta ändamål.
4. “Caching” – för att inte ladda samma saker om och om igen…
Har du märkt att webbplatser som du har besökt tidigare ofta laddar snabbare än sidor du aldrig besökt tidigare? Om ja, så är orsaken till detta högst antagligt caching.
Vad är caching?
Caching innebär i sin korthet att när du besöker en webbplats så kommer en del av sidans innehåll att lagras i din dator (cache-minnet).
Det här händer alltså om du har caching aktiverat. Om du inte har det så rekommenderar jag starkt att du aktiverar det.
Genom att lagra/cachea innehållet i besökarens dator får du följande fördelar:
- Webbläsaren behöver inte ladda lika mycket innehåll varje gång besökaren landar på webbplatsen
- Snabbare upplevelse för återkommande besökare, samt besökare som besöker flera sidor på din webbplats
Caching kommer därmed att snabba upp sidan endast för de som ser flera sidor på din domän och har alltså ingen effekt då nya besökare landar på en målsida för första gången.
Om du använder WordPress så kan du mycket enkelt aktivera caching med hjälp av plugins, såsom:
- W3 Total Cache
- Autoptimize
- WP Fastest Cache
- m.fl.
Det finns många alternativ, både gratis och betalda, så du ska nog kunna hitta någon som passar dig och din sida.
5. Ta bort tunga externa widgets som inte laddas från din egen server
Har du installerat ett plugin som visar ett flöde av dina Facebook-, Twitter- eller Instagram-inlägg? Eller kanske någon liknande widget som är kopplad till en extern tjänst?
Det kan vara värt att kolla upp eftersom dessa kan ha en märkbar inverkan på dina målsidors laddningstider.
I exemplet nedan ser du hur mycket “skada” en sådan widget kan göra. Exemplet är från en slumpmässigt vald sida som jag inspekterade med Google Chromes inspekteringsverktyg.
Alla 18 resurser ovan kommer från Facebook. Den enda nyttan den ger är att besökaren kan gilla företagets Facebooksida direkt på webbplatsen, utan att navigera till Facebook.
Vad kostar det sidan med tanke på snabbhet?
- Omkring 450 KB av dataöverföring
- Mer än 1 sekund mer arbete för webbläsaren
- Ytterligare 18 HTTP-förfrågningar (Läs mer om förfrågningar i nästa stycket)
Är det värt det? Knappast… Det finns säkert en lösning med färre kompromisser. Om det verkligen är nödvändigt så behåll det.
Lyckligtvis laddades dessa filer bland de sista i testsidan och därmed påverkas inte den upplevda snabbheten av det viktigaste innehållet längst upp på sidan särskilt mycket.
Å andra sidan kan dessa påverka hur snabbt sidans dynamiska element blir interaktiva och hur länge sidan kommer att upplevas trög, dvs. Time to Interactive.
6. Minska på antalet HTTP-förfrågningar
I exemplet ovan nämnde jag HTTP-förfrågningar (server requests). Det handlar alltså om antalet resurser/filer som webbläsaren måste ladda när en besökare landar på din sida.
Generellt sett kan du utgå ifrån att ju fler förfrågningar webbläsaren måste göra, desto längre tid kommer det att ta innan sidan har laddat klart. Det är inte alltid så entydigt, men det är en bra utgångspunkt.
För att reda ut hur många förfrågningar som görs kan du exempelvis använda följande gratisverktyg:
- Google Chromes inspekteringsverktyg (som i exemplet ovan)
- Pingdom Speed Test verktyget (som i exemplet nedan)
Vad är optimalt antal HTTP-förfrågningar?
Det finns inget entydigt svar på vad som är ett optimalt antal HTTP-förfrågningar eftersom det beror på vad varje unik webbsida måste kunna presentera för användaren.
Men för att få ett jämförelsetal…
I maj 2019 var medianantalet förfrågningar 74 stycken på desktopenheter och 68 på mobilenheter (enligt HTTP Archive). För relativt enkla sidor ska man dock sträva efter att ha mycket färre. Många experter rekommenderar att man håller sig under 30 förfrågningar.
Hur kan du minska på antalet förfrågningar?
Granska de resurser din sida laddar i nuläget och gör dig av med de resurser som du inte behöver. Exempel på hur du kan gå tillväga är:
- Gör dig av med onödiga bilder – Webbläsaren laddar varje bild för sig och därmed skapar varje bild en ytterligare begäran. Ta därför bort alla onödiga bilder från dina sidor.
- Ladda endast relevanta CSS-filer, dvs. endast de filer som är relevanta för just den specifika URL:en. Det är onödigt att ladda style sheets för sidor som besökaren inte ser.
- Gör dig av med onödiga funktioner som ökar antalet förfrågningar – som Facebook i exemplet i föregående stycket.
- Kombinera många CSS-filer till färre helheter så att antalet enskilda CSS-filer minskas (och således även antalet förfrågningar).
- etc…etc…
7. Använder du WordPress? Ta bort onödiga plugins
Om du använder WordPress och har laddat en massa plugins för olika ändamål kan det vara en god idé att granska om du har onödiga plugins aktiverade.
Det finns många bra plugins för WordPress som sparar dig tid och som förbättrar sidans prestanda. Om du däremot har många plugins aktiverade som du inte använder kan det ha en negativ effekt på sidans prestanda.
Gör en granskning och se till att du:
- Inte har flera plugins för samma ändamål
- Inte har oanvända plugins aktiverade på sidan
Innan du laddar nya plugins ska du också fråga dig själv: Behöver jag verkligen ett plugin för det jag vill uppnå?
Det finns ett plugin för allt nuförtiden! Men… det betyder inte att du behöver ett plugin för allt du gör på sidan. Om det finns något du kan göra själv, gör det. Installera ytterligare plugins endast när det är nödvändigt.
8. Skaffa snabbare server och webbhotell
Många skaffar ett billigt webbhotell att starta med för att komma igång med hemsidan. Det tycker jag är en god idé, speciellt om du är en hobbybloggare som inte tjänar pengar på sidan.
Men när du börjar få mer trafik och du börjar marknadsföra din sida är det dags att se till att du har ett professionellt och effektivt webbhotell. Det kan nämligen ha en stor effekt på hur hastigt sidan laddas, speciellt när trafikmängden ökar. Det räcker alltså inte endast med att du jobbar med sidans uppbyggnad.
9. Ladda sidans resurser i kronologisk ordning
Som tidigare konstaterat ska du sträva efter att innehållet högst upp på sidan (above the fold) laddas snabbt.
Änne ett steg för att uppnå detta är att granska i vilken ordning sidans resurser laddas och sträva efter att de laddas i kronologisk ordning “från topp till tå”. På det här viset prioriteras det mest väsentliga innehållet som påverkar den upplevda laddningstiden mest.
10. Asynchronous load
Asynchronous loading är också en faktor som kan påverka den upplevda snabbheten.
När besökaren anländer på din webbplats börjar webbläsaren begära och motta filer från din server. Vissa filer laddas snabbt medan andra filer laddas långsammare.
Utan asynchronous loading kommer filerna att stanna i kö och när den första filen har laddat färdigt börjar den nästa filen att laddas, osv.
När det är aktiverat kan däremot flera javascriptfiler laddas samtidigt, istället för att stoppa processen och ställa filerna i kö. Därför kan asynchronous loading ha en betydande effekt på laddningstiden, speciellt för webbplatser som använder sig av javascript.
Jag hoppas du gillade mina tips, du hittar fler i bloggen! 🙂