Elke seconde telt: minder website laadtijd met deze (technische) tips
De snelheid waarmee je website geladen wordt heeft invloed op de gebruikerservaring van je bezoekers. Veel bezoekers klikken langzame websites na een paar seconden weg. Bezoekers worden steeds ongeduldiger nu ze thuis en onderweg van sneller internet gebruik kunnen maken. Zorg dus voor een goede website laadtijd.
Gek genoeg is de snelheid van een website meestal geen prioriteit bij Nederlandse bedrijven terwijl daar wel veel winst te behalen valt. In dit artikel leg ik je uit hoe jij jouw website razendsnel maakt!
– Een onderzoek van Google DoubleClick toont aan dat 53% van de mobiele bezoekers websites vroegtijdig verlaten wanneer het langer dan 3 seconden duurt om de pagina te laden.
53% verlaat je site als het langer dan 3 seconden duurt om te laden
Een kortere website laadtijd zorgt voor meer conversies
– In een onderzoek van Akamai uit 2017 werd het het gebruikersgedrag van meer dan 10 miljard websitebezoekers vergeleken en ontdekten de onderzoekers dat een vertraging van 1 seconde voor wel 20% minder conversie kan zorgen.
– Amazon ontdekte dat een vertraging van 100 milliseconden zorgde voor een vermindering in transacties van 1%. Gezien Amazon’s omzet van meer dan 1 miljard dollar per jaar is dit een enorm verschil.
Een snelle website is dus belangrijk als je een webwinkel hebt. Een snellere website zorgt onder andere voor:
- Een betere gebruikerservaring
- Een betere positie in zoekmachines
- Hogere conversieratio’s
Hoe kan jij jouw website laadtijd versnellen?
Er zijn een aantal stappen die je moet ondernemen en technieken die je kan toepassen om je website aanzienlijk sneller te laten laden. Sommige stappen zijn vrij technisch waar andere juist heel simpel en logisch zijn. Ik zal hieronder verschillende manieren om je website te versnellen helder uitleggen.
Let op: maak voor je aan de slag gaat eerst een goede backup van je bestanden en databases. Zo kan je altijd nog je website herstellen in het geval er iets verkeerd gaat.
De techniek achter het laden van je website
Een snelle website begint met een goede webhost
Je webhost provider verhuurt jou als het ware een stukje van een online harde schijf waar jij jouw programma (website) op kan draaien. Als je erg weinig betaalt voor je webhosting (bijv. 50 cent per maand), kun je ook niet verwachten dat je website laadtijd razendsnel is. Je kunt immers ook geen snelle computer huren voor dat geld.
Behalve kiezen voor een goede webhost en een geschikt hostingpakket zijn er een veel verschillende technieken die je kan gebruiken om je website sneller te maken.
- Verwijder ongewenste en ongebruikte plugins en thema’s
- Optimaliseer je database
- Optimaliseer je afbeeldingen
- Installeer een caching plugin
Bovenstaande technieken heb ik al eerder uitgelegd in dit artikel (klik).
Expires Headers instellen
Met Expires Headers vertel je webbrowsers hoe lang een bepaald bestand (lokaal) in de cache mag worden opgeslagen zonder dat het bestand opnieuw hoeft te worden gedownload. Niet elk bestand hoeft namelijk bij elke paginaweergave opnieuw gedownload te worden.
Dit geldt voor bijvoorbeeld het logo van je website. Als iemand 10 pagina’s bezoekt op jouw website, is het dan belangrijk dat hij 10 keer opnieuw hetzelfde logo downloadt? Om dit te voorkomen kun je ‘Expires Headers’ meegeven aan je bestanden. Dit is in principe een een attribuut waar op staat: “deze afbeelding is 30 dagen geldig”. Dat betekent dus dat wanneer men jouw website bezoekt de komende 30 dagen het logo niet opnieuw gedownload wordt van jouw server, maar rechtstreeks op de computer van je bezoeker wordt opgeslagen en daarvandaan geladen. Dit zorgt ervoor dat jouw server load lager is en dat bezoekers die meerdere pagina’s bezoeken of vaker terugkomen een snellere website laadtijd ervaren!
– Expires Headers kan je instellen via je .htaccess bestand.
Content Delivery Networks (CDN)
Naast een goede server is de locatie van je server ook belangrijk. Het is belangrijk dat jouw server zo dicht mogelijk in de buurt van jouw bezoekers staat: hoe verder weg de server van de bezoeker staat, hoe langer het dus duurt. Het is dus lastig om een website met bezoekers uit verschillende landen voor iedereen even snel te maken, aangezien je server maar op één fysieke locatie staat.
Er zijn handige diensten die dit probleem voor jou oplossen. Een Content Delivery Network serveert jouw website aan een bezoeker vanaf een server die voor hem het dichtst bij is. Ik werk zelf graag met de CDN van Cloudflare. Deze gratis CDN heeft 150 servers over de hele wereld verspreid. Zo staat er altijd wel een server dichtbij jouw bezoeker.
Met een Content Delivery Network laadt je website vanaf een server dichtbij
Lazy Load vertragende assets
Lazy Load is een techniek die gebruikt wordt om het laden van afbeeldingen te vertragen. De afbeelding wordt pas opgehaald op het moment dat de gebruiker er voorbij scrollt.
Een lang artikel met veel grote afbeeldingen en ingesloten Youtube videos kan ervoor zorgen dat je pagina erg langzaam laadt. Dit is opzich logisch, gezien de grote hoeveelheid data die benodigd is. Echter zit (letterlijk) niemand te wachten op een sloom artikel en zullen veel bezoekers de pagina weer verlaten als het echt te lang duurt.
Het is mogelijk om je website laadtijd een stuk sneller te maken zonder de afbeeldingen en Youtube videos te verwijderen. Door het gebruik van ‘Lazy Load’ plugins kun je ervoor zorgen dat afbeeldingen pas geladen worden op het moment dat de bezoeker de afbeelding daadwerkelijk wil bekijken. Omdat de bezoeker op zijn gemak het artikel leest, valt het niet op dat als er onderin het artikel nog afbeeldingen aan het laden zijn. Ik gebruik zelf de ‘a3 lazy load’ plugin voor WordPress.
Asynchroon laden van blokkerende scripts
Als je veel scripts uitvoert op je webpagina kan dit ervoor zorgen dat de scripts het laden van de pagina vertragen (er gebeurt immers van alles op de achtergrond voordat de eerste elementen zichtbaar worden voor de bezoeker).
– Google heeft een handige tool ‘PageSpeed Insights’, deze tool geeft duidelijk weer welke verbeterpunten jij nog voor jouw website kan implementeren. Een van de punten waar de tool naar kijkt is of er geen blokkerende scripts geladen worden die je website vertragen.
De verbeterpunten voor jouw website van Google
Het is belangrijk om na te gaan of de (blokkerende) scripts die momenteel worden uitgevoerd als de website geladen worden wel echt allemaal nodig zijn voor de bezoeker op dat moment.
Als je website wordt opgehaald door je browser (bijv. Chrome of Firefox) leest hij de code van boven naar beneden. Door scripts die niet essentieel zijn voor je website als laatste te laden (vanuit de footer van je website bijvoorbeeld) kan je ervoor zorgen dat bezoekers eerder belangrijke elementen van je website te zien krijgen. Dit werkt conversieverhogend aangezien de waargenomen snelheid toeneemt. Meer informatie over blokkerende scripts vind je op de website van Kinsta.
