Verbeter de laadtijd van je website en rocket launch je conversies
Geduld is een schone zaak, maar voor velen, is en blijft het een concept dat lastig te beoefenen is. Dit is ook zeker het geval bij web-gebruikers die een website bezoeken die erg lang duurt om te laden. Bezoekers willen snelle laadtijden. Als een site traag reageert, verliest de bezoeker zijn geduld, verlaat hij de website en keert hij waarschijnlijk nooit meer terug. Maar de laadtijd van je website is niet alleen belangrijk voor de eindgebruiker, ook voor de positie in zoekmachines zoals Google. Zij nemen de snelheid van je website mee in het bepalen van jouw positie in de zoekresultaten.
Waarom is een snelle website belangrijk
Waarschijnlijk zijn we het er allemaal over eens dat we liever een snelle website bezoeken dan een langzame. Maar waarom is dat zo?
Volgens onderzoek van Google, valt drieënvijftig procent van de mobiele gebruikers af als een site langer duurt dan drie seconden om te laden. Dit is een probleem omdat ditzelfde onderzoek aantoont dat de gemiddelde laadtijd op mobiele apparaten meer dan vijftien seconden is. Deze statistieken laten ook zien dat het hetzelfde geldt op andere platformen.
Volgens het onderzoek duurt het gemiddeld meer dan zeven seconden om de visuele content te tonen. Dit lijkt misschien niet veel, maar de realiteit is dat je met elke seconde meer en meer bezoekers misloopt.
Tools om de laadtijd van je site te monitoren
De eerste stap om de laadtijd te verbeteren is om vast te stellen wat de huidige laadtijd is. Hieronder licht ik twee handige tools toe die gratis te gebruiken zijn waarmee je dit kunt doen.
Page Speed Insights
Laten we beginnen met mijn favoriet – Page Speed Insights van Google
Wat handig is aan deze tool is dat het niet alleen een gedetailleerde beschrijving toont over de laadtijden op zowel mobiel als desktop, maar ook wordt er stap-voor-stap uitgelegd hoe je de tijden kunt verbeteren.
Bijvoorbeeld, Google vertelt je hoe je met een aantal basisstrategieën de bestandsgrootte kunt reduceren, de laadtijd kunt versnellen en hoe je het aantal requests naar de server kunt beperken.
Ben je wat technischer aangelegd? Dan kun je ook eens kijken naar de Google Lighthouse tool. Deze geeft vergelijkbare maar niet identieke analyses over de prestaties van je website en is ingebakken in de Google Chrome Developer tools.
Pingdom
De Pingdom Page Speed tool bestaat al enige tijd en biedt veel inzicht in hoe je jouw site kunt verbeteren. Het is vergelijkbaar met de tool van Google maar toont je duidelijke en gedetailleerde informatie over de gezondheid van je website.
De reden dat ik deze op de tweede plaats zet is dat Google meer informatie geeft om de SEO te verbeteren en hier ook concrete tips voor geeft.
Hoe je jouw laadtijd kunt verbeteren
Een belangrijke factor van de laadtijd is de totale bestandsgrootte van je website. Denk hierbij aan plaatjes, video’s, scripts en andere bestanden die nodig zijn om je pagina te genereren.
Onderzoek uit 2018 toont aan dat de gemiddelde bestandsgrootte van een website tussen de 1.3MB en 2.5MB ligt, ongeacht dat het aanbevolen gemiddelde 500KB is.
Als je een langzame website hebt, dan is de kans dus groot dat je veel verbetering kunt halen uit het reduceren van de bestandsgrootte. Lees hieronder hoe:
Optimaliseer afbeeldingen
De kans is groot dat de afbeeldingen die je toont op je website in werkelijkheid groter zijn dan de formaten die de website daadwerkelijk nodig heeft. In dit geval kun je dus veel data besparen door je afbeeldingen te verkleinen naar het juiste formaat. ResizeImage.net is een handig tool waarmee je dit gemakkelijk kunt doen.
Een andere manier om de bestandsgrootte te reduceren is het converteren van je afbeelding in een ander bestandsformaat. Een JPG is vaak kleiner dan een PNG-afbeelding. Dit komt doordat JPG de afbeelding standaard comprimeert. Convertio.co is een online tool die je hierbij kan helpen.
Om de maximale compressie te behalen kun je de afbeeldingen nog eens extra comprimeren met een tool zoals ImageOptim (voor Mac), tinypng.com of voor WordPress ontwikkelaars de Smush plug-in.
Minimaliseer & combineer bron bestanden
Geen techneut? Dan hoef je je hier niet zoveel zorgen om te maken. Maar weet je wel je weg te vinden in de bron bestanden? Dan is het zeker een goed idee om deze zoveel mogelijk te optimaliseren.
Door je bestanden te combineren en te minimaliseren verminder je de omvang en reduceer je het aantal requests dat de website moet doen naar de server. Hierdoor zal de website dus sneller laden, maar hoe doe je dat?
Vermijd inline CSS en JavaScript zoveel mogelijk, soms kan het niet anders, maar wanneer mogelijk plaats je code in een los bestand. Maar kijk uit dat je niet te veel losse bestanden creëert, want dit benadeelt de laadtijd dan weer, combineer dus waar mogelijk. Ik gebruik hiervoor een WebPack script die al mijn losse JavaScript en SASS-bestanden (CSS) minimaliseert en samenvoegt tot een bestand. Het grootste voordeel hiervan is dat de code op deze manier zo klein mogelijk opgeslagen wordt en dat de website maar een bestand hoeft te laden per bezoek.
Bron bestanden asynchroon downloaden
Wanneer de vorige stap is uitgevoerd kunnen we gaan optimaliseren hoe de bron bestanden worden geladen. Scripts zoals CSS en JavaScript kunnen op twee verschillende manieren worden gedownload: synchroon of asynchroon.
Als de scripts synchroon worden geladen, dan worden ze een voor een in de volgorde zoals ze in de pagina voorkomen gedownload. Maar als scripts asynchroon worden geladen kunnen er meerdere scripts tegelijkertijd gedownload worden.
Bestanden asynchroon laden kan de snelheid dus bevorderen. Dit komt doordat een website van boven naar beneden wordt geladen en als een script niet asynchroon wordt gedownload stop de site met renderen totdat het specifieke bestand klaar is met downloaden. Daarom is asynchroon dus aan te raden zodat het renderen van de site niet belemmert wordt.
Gebruik een CDN
Naast de server waar jouw website op draait kun je ook gebruik maken van een ander netwerk met servers om de laadtijd voor je bezoekers te verminderen. Dit netwerk heet een CDN (Content Delivery Network).
Wanneer je jouw website host op een server, wordt elke gebruiker verwezen naar deze server. Dit betekent, wanneer jouw website door veel gebruikers op hetzelfde moment bezocht wordt, de tijd om de aanvragen te verwerken toeneemt en dus de laadtijd langer wordt.
Hier komt ook nog eens bij dat als een gebruiker zich geografisch verder van de server vandaan bevindt, de laadtijden standaard al hoger liggen. Dit komt doordat de informatie dan een langere afstand moet afleggen voordat die bij de gebruiker aan komt.
Een CDN kan dit verhelpen, deze maakt dan een soort kopie ofwel cached jouw website op servers verspreid over de wereld. Wanneer een gebruiker jouw website bezoekt wordt de content vanaf de dichtstbijzijnde server gedownload.
Als je een CDN wilt gaan gebruiken is CloudFlare een goed en veel gebruikte optie. De service is gratis in gebruik en is naast een CDN ook een extra beveiligingslaag voor je website. Zij monitoren jouw bezoekers, als het een ongewenste of kwaadwillende betreft weigeren zij de toegang tot de website. Dit doen ze door de IP-adressen van bezoekers te vergelijken met een lijst van bekende IP-adressen van onder andere spammers en hackers. Ook kan er tijdens het instellen van CloudFlare worden aangegeven of dat jouw website gebruik maakt van een bekend CMS-systeem, bijvoorbeeld WordPress, en zullen specifieke URL’s en bestanden van dit CMS beveiligd worden tegen kwaadwillende.
Sarco Packaging
Recent hebben we de nieuwe website voor Sarco Packaging opgeleverd. Behalve een volledig nieuw ontwerp hebben we ook de snelheid geoptimaliseerd. Met een score van 91 op Google PageSpeed Insights tot gevolg. Binnen een paar maanden merkten ze al een verbeterde vindbaarheid op Google, wat een van de doelen was om een nieuwe website te laten bouwen.
Conclusie
Toen internet nog maar net bestond, werd door iedereen geaccepteerd dat websites langzaam waren. We wisten niet beter, dit is gewoon hoe het world wide web was.
Maar hedendaags is dit toch een wel even anders. De websites van 2020 moeten meer kunnen en sneller laden dan de websites van 1999, 2009 of zelfs 2019. Maar gelukkig beloont de eindgebruiker en Google ons daar steeds meer voor.
Elke seconde telt!
Hulp nodig bij het optimaliseren van je website? Stuur gerust een e-mail naar [email protected], we helpen je graag verder.
