Snabbare hemsida – så förbättrar du laddningstider och ökar konverteringar
En långsam hemsida är en av de största boven bakom tappade kunder. Forskning visar att om en sida laddar på mer än 3 sekunder lämnar hälften av besökarna. Efter 5 sekunder har du förlorat de flesta. Varje extra sekund laddningstid minskar konverteringarna med flera procent.
Google har också gjort laddningstid till en officiell rankingfaktor. Långsamma sidor rankas sämre – oavsett hur relevant innehållet är. En webbyrå med erfarenhet av prestandaoptimering kan göra din webbplats betydligt snabbare. Här går vi igenom de viktigaste åtgärderna.
Mät din nuvarande laddningstid
Du kan inte förbättra det du inte mäter. Innan du gör några ändringar måste du veta hur snabb eller långsam din webbplats är idag.
Googles PageSpeed Insights är ett gratis verktyg som analyserar din webbplats och ger dig en poäng från 0 till 100, både för mobil och desktop. Verktyget visar också konkreta förbättringsförslag – ”komprimera dessa bilder”, ”eliminera renderingsblockerande resurser”, ”minska serverns svarstid”.
GTmetrix och Pingdom är två andra populära alternativ. De ger mer detaljerad information om vad som laddar när, och hur olika delar av sidan påverkar den totala laddningstiden.
Testa din webbplats regelbundet, särskilt efter större uppdateringar. Prestanda kan förändras över tid när du lägger till nytt innehåll, installerar nya plugins eller bygger ut webbplatsen.
Optimera dina bilder
Bilder är den vanligaste orsaken till långsamma webbplatser. En modern webbplats har ofta dussintals bilder på startsidan, och om de inte är optimerade kan de lägga till flera megabyte i onödan.
Komprimera alla bilder innan du laddar upp dem. En högupplöst bild direkt från kameran kan vara 5–10 MB. Samma bild optimerad för webben kan vara 100–300 KB – en minskning med 95 procent – med knappt märkbar kvalitetsskillnad. Använd verktyg som TinyPNG, ImageOptim eller Shortpixel.
Välj rätt bildformat. JPEG passar de flesta fotografier. PNG används för grafik med genomskinlig bakgrund, men är ofta större i filstorlek. WebP är ett modernare format som ger 25–35 procent bättre komprimering än JPEG, och stöds av alla moderna webbläsare.
Anpassa bildstorleken efter var bilden ska visas. En bild som täcker hela skärmen behöver vara större än en liten produktbild i ett galleri. Ladda inte upp en 4 000 pixlar bred bild för att visa den i 400 pixlar. Använd responsiva bilder med srcset så att webbläsaren själv kan välja rätt storlek.
Ladda bilder ”lazy loading”. Då laddas bilderna bara när de är på väg att synas i webbläsarens vy. Besökaren som aldrig scrollar ner till botten av sidan behöver inte ladda de bilder som finns där nere.
Använd en snabb webbhotell
Ditt webbhotell har stor påverkan på laddningstiderna. Ett billigt delat webbhotell kan vara fullt tillräckligt för en liten webbplats med lite trafik. Men när trafiken ökar, eller när webbplatsen blir mer avancerad, kan prestandan bli lidande.
Ett VPS (Virtual Private Server) ger dig dedikerade resurser och bättre prestanda än delade värdlösningar. Det kostar mer, men för en växande webbplats är det ofta värt investeringen.
Ett CDN (Content Delivery Network) lagrar kopior av din webbplats på servrar runt om i världen. När en besökare laddar sidan hämtas bilder, CSS och JavaScript från den server som är geografiskt närmast. Det minskar laddningstiderna dramatiskt, särskilt för internationella besökare. Cloudflare och KeyCDN är populära alternativ.
Välj ett webbhotell som erbjuder SSD-lagring (snabbare än gamla hårddiskar), HTTP/2-protokoll (snabbare överföring) och PHP 8.0 eller senare (betydligt snabbare än äldre PHP-versioner).
Minimera CSS, JavaScript och HTML
Webbplatsens kod kan bli onödigt stor. Mellanslag, radbrytningar och kommentarer gör koden läsbar för människor, men de ökar filstorleken i onödan.
Minifiering innebär att man automatiskt tar bort allt onödigt från koden – mellanslag, radbrytningar, kommentarer – utan att förändra funktionen. De flesta webbyråer använder verktyg som UglifyJS för JavaScript, CSSNano för CSS, och HTMLMinifier för HTML.
Kombinera flera CSS- och JavaScript-filer till en fil var. En webbplats kan ha 5–10 olika CSS-filer och lika många JavaScript-filer. Varje fil kräver en separat HTTP-förfrågan, vilket tar tid. Genom att kombinera dem minskar antalet förfrågningar och laddningstiden.
Placera JavaScript längst ner i sidkoden, eller använd attributet ”defer” eller ”async”. Då laddas JavaScript efter att sidans huvudsakliga innehåll har visats. Besökaren ser något direkt, medan Javascript laddas i bakgrunden.
Minska antalet HTTP-förfrågningar
Varje gång webbläsaren laddar en bild, ett CSS-dokument, en JavaScript-fil eller ett teckensnitt görs en separat HTTP-förfrågan. Fler förfrågningar betyder längre laddningstid.
En typisk webbplats kan ha 50–100 olika resurser att ladda. Genom att minska antalet förfrågningar blir sidan snabbare. Använd CSS-sprites för att kombinera många små ikoner till en enda bild. Använd ikonfonter som FontAwesome istället för många små bilder. Ta bort plugins och widgetar som du inte använder – de laddar ofta egna CSS- och JavaScript-filer.
Sökmotoroptimering handlar inte bara om nyckelord och länkar – prestanda är en viktig del av att synas bra på Google. En snabb webbplats rankas högre än en långsam, allt annat lika.
Caching – låt webbläsaren minnas
Caching innebär att webbläsaren sparar kopior av vissa filer så att den inte behöver ladda ner dem igen nästa gång besökaren kommer tillbaka. En bild som laddas första gången kan hämtas från cacheminnet andra gången – det går nästan omedelbart.
Webbläsarcaching styrs av HTTP-huvuden som du sätter på din server. För statiska resurser som bilder, CSS och JavaScript kan du sätta lång cache-tid – till exempel ett år. För HTML-sidor kan du sätta kortare cache-tid så att besökaren ser uppdateringar snabbt.
Webbplats-caching (server-side caching) sparar hela färdiggenererade HTML-sidor på servern. När nästa besökare kommer skickas den sparade sidan direkt, istället för att servern måste generera den från grunden igen. För WordPress-webbplatser finns plugins som WP Rocket, W3 Total Cache eller LiteSpeed Cache som fixar detta automatiskt.
Välj rätt typsnitt
Externa typsnitt från Google Fonts eller Adobe Fonts är praktiska, men de kostar laddningstid. Varje typsnitt kräver en eller flera HTTP-förfrågningar.
Använd bara ett eller två typsnitt på hela webbplatsen. Undvik att ladda flera olika vikter (300, 400, 600, 700) om du inte verkligen behöver dem. Överväg att använda systemtypsnitt – de finns redan på användarens dator och kräver inga extra förfrågningar alls.
Om du använder Google Fonts, ladda dem med metoden ”display: swap”. Då visas texten direkt med ett fallback-typsnitt medan rätt typsnitt laddas i bakgrunden. Besökaren slipper stirra på en tom skärm medan typsnitten laddar.
En snabb webbplats handlar inte bara om teknik – det handlar om respekt för besökarens tid. I en värld där allt går snabbare förväntar sig användarna att din hemsida hänger med. En snabb webbplats ger nöjdare besökare, högre konverteringar och bättre sökmotorrankning. En långsam webbplats gör motsatsen. Med rätt optimeringar kan du flytta din webbplats från den långsamma kategorin till den snabba – och skörda alla fördelar som kommer med det.
En långsam hemsida är en av de största boven bakom tappade kunder. Forskning visar att om en sida laddar på mer än 3 sekunder lämnar hälften av besökarna. Efter 5 sekunder har du förlorat de flesta. Varje extra sekund laddningstid minskar konverteringarna med flera procent. Google har också gjort laddningstid till en officiell rankingfaktor. Långsamma…