Gör din hemsidan snabbare med 5 enkla steg - Camelontas utvecklingsteam tipsar!

Så gott som alla svenskar använder internet varje dag till olika ändamål. Vad man gör varierar, men Google, nyhetssidor, sociala medier och Youtube ligger i topp. De senaste åren har även näthandeln skjutit i höjden och numera shoppar nio av tio på nätet. 

I takt med den ökade internetanvändningen ökar även kraven på din hemsidas kvalitet och hastighet. Du förlorar snabbt dina besökare om din hemsida har en laddningstid på några sekunder. För att ha koll på din hemsida kan du testa laddningstiden för både desktop och mobil via verktyget Google Page Speed, som även ger förslag på förbättringar. 

Fem effektiva tips för att snabba upp sajt!

Vi har pratat närmare med Camelontas egna erfarna experter inom webbutveckling. Nedan har vi listat våra fem bästa tips på åtgärder som du kan göra på en gång för att snabba upp din hemsida. Lycka till!

Cache

Cache är ett av de mest effektfulla verktygen vi har för att optimera prestandan av en sajt! Caching är en teknik som innebär att innehåll lagras temporärt av servern eller i vissa fall av din webbläsare. Varje gång en användare besöker din sajt ställs en massa frågor till servern; "Hämta fem nyheter", "Hämta dessa bilder", "Skapa menyn" o.s.v. Detta tar såklart lite tid för servern att ta fram.

Cachen är resultatet av alla dessa frågor som kopieras och lagras. Nästa användare som besöker sidan får istället det kopierade resultatet direkt, vilket innebär att servern inte behöver generera innehållet på nytt. Detta medför nästan alltid en avsevärt snabbare laddningstid. 

Tips! Kom ihåg att testa hur snabb sajten är på 3G samt 4G och inte bara när du är uppkopplad på ett WiFi. 

Bildoptimering

Bilder utgör ofta en stor del av en hemsidan "tyngd" och därför kan en minskning i storlek ofta förbättra laddningstiden. Målet är att få en så liten filstorlek som möjligt men samtidigt behålla en god kvalitet.

Lazy loading 

Lazy loading är en teknik som fördröjer laddningen av en viss resurs på en hemsida tills att den faktiskt behövs. Om en sida exempelvis har en bild som användaren behöver scrolla ned för att se, så visas (laddas) den först när användaren har scrollat ned till den vyn som bilden ligger i.

Slå ihop eller minifiera dina CSS- och JavaScript-filer

Oftast har en hemsida flera CSS- och JavaScript-filer och när sidan laddas görs ett enskilt anrop för att hämta respektive fil. Bundling väver ihop samtliga filer (CSS eller JavaScript) till en fil vilket gör att enbart ett anrop behöver göras. Minifiering innebär att filens storlek förminskas utan att påverka dess funktionalitet. Det vill säga, mellanrum och radbrytningar tas bort och variablernas namn förkortas. Här kan du läsa om bundling och minifiering i Umbraco. 

Placering av script

Viktigt att placera script-taggen för ett JavaScript på ett sätt att det inte blockerar laddningen av HTML-innehållet, det vill säga, innehållet på hemsidan. Det gör antingen genom att placera scriptet i slutet av bodyn på HTML-dokumentet eller i head-tagen kombinerat med attributet "defer".