Snelheid van je website verbeteren, het ultieme stappenplan

  • Door Nils van Rooijen
  • 2 september 2021
  • Leestijd 16 minuten

Hulp nodig met de snelheid van jouw website?

Kristian Maton is SR. SEO specialist bij Epurple en geeft graag antwoord op al uw vragen.

Neem contact op

Wil jij de snelheid van je website verbeteren, maar weet je niet goed waar je moet beginnen of welke mogelijke optimalisaties het beste zijn voor jouw website? Wees gerust! In dit artikel leggen wij je namelijk precies uit hoe jij de snelheid van je website kunt verbeteren. Zo behandelen we niet alleen de meest voor de hand liggende optimalisaties, maar kijken we ook verder. We helpen je op ideeën waar je wellicht zelf nog niet aan gedacht had én we hebben een aantal experts uit ons netwerk gevraagd naar hun nummer 1 tip om de snelheid van een website mee te verbeteren. Kortom, lees snel verder!

Door gebruik te maken van eenvoudige en gratis compressietools en websites zoals Compress JPEG en Optimizilla, kun je al snel zo’n 50% of meer besparen op de bestandsgrootte van een afbeelding”.

Kristian Maton – Content Marketeer

Overzicht snelheid website verbeteren

In dit artikel delen we zoals gezegd zo veel mogelijk relevante tips waarmee jij de snelheid van je website kunt gaan verbeteren. Omdat wellicht niet alle tips relevant zijn voor jouw website, hebben we hieronder een overzicht voor je gemaakt. Klik op een van de onderwerpen en je scrolt er vanzelf naar toe!

  • Je website regelmatig opschonen
  • Compressie toepassen
  • Lazy loading
  • AMP
  • Het aantal HTTP requests verminderen
  • Bestanden combineren
  • Afbeeldingen verkleinen
  • Gebruik externe fonts minimaliseren
  • Browser caching
  • Verklein bestanden
  • Hostingpakket
  • De reactietijd van je server beperken
  • Content Delivery Network (CDN)

Schoon je website regelmatig op

Naarmate je website steeds groter wordt en er meer content op komt te staan zal het ook steeds meer tijd kosten om alles in te laden. Om die reden is het verstandig om regelmatig, laten we zeggen twee keer per jaar, een grote schoonmaak te houden. Zo zorg je niet alleen dat je website up to date blijft, ook alle overbodige zaken die je tegenkomt kun je direct verwijderen.

Waar controleer je op tijdens zo’n schoonmaak?

Verouderde content

Bestaat het nieuwsarchief op je website uit enorm veel artikelen? Grote kans dat een groot deel hiervan verouderd is. Laten we eerlijk zijn, berichten uit 2015 hebben nu simpelweg weinig waarde, tenzij het natuurlijk een evergreen blog- of kennisbankartikel is. Check op welke verouderde pagina’s weinig tot geen verkeer meer komt. Beslis of je de pagina verwijderd of een deel van de inhoud toevoegt aan een recentere pagina over hetzelfde onderwerp.

Plug-ins en meetcodes

Check welke plug-ins er geïnstalleerd staan op de website en welke ook daadwerkelijk gebruikt worden. Gebruik je een plug-in niet meer? Verwijder deze dan. Zorg dat de plug-ins die je wel gebruikt ook echt noodzakelijk zijn. Hetzelfde geldt voor de meetcodes. Check welke er actief zijn en welke er allemaal op de website staan. Alles wat overbodig is en niet meer gebruikt wordt kun je verwijderen.

Foute links

Tot slot is het verstandig om ook regelmatig te controleren of er (veel) foute links op de website staan. Redirects en/of 404 errors zorgen ervoor dat het langer duurt om de ‘HTTP request-response cycle’ te voltooien. Link dus zoveel mogelijk in één keer naar de juiste pagina.

Pas compressie toe

Het toepassen van compressie op de bestanden die worden ingeladen zorgt ervoor dat het formaat van deze bestanden kleiner wordt. Hoe kleiner deze bestanden zijn, hoe sneller deze worden ingeladen. Zorg er dus voor dat je de bestanden zo klein mogelijk maakt zonder dat ze de kwaliteit verliezen. Compressie pas je voornamelijk toe op CSS, HTML, JavaScript en Afbeelding bestanden.

Pas lazy loading toe

Lazy loading zorgt ervoor dat de afbeeldingen en/of video’s die onder de vouw van een pagina staan, pas worden gedownload en ingeladen wanneer dat nodig is. Zo voorkom je dat alle afbeeldingen en/of video’s in één keer worden ingeladen terwijl dat misschien helemaal niet nodig is omdat de bezoeker de pagina niet eens tot zover bekijkt.

Pas AMP toe

AMP staat voor Accelerated Mobile Pages. Het is een project wat is ontwikkeld door Google om mobiele webpagina’s enorm veel sneller in te laden dan normaal gesproken.

Hoe werkt AMP?

Het open-source format waarmee het gecreëerd is, filtert alle onnodige content weg van een bestaande pagina. Hierdoor blijft enkel het essentiële over en laden de pagina’s vrijwel instant volledig in.

Gebruikers ervaren hierdoor een meer gestroomlijnde ervaring op mobiele apparaten zonder dat zij last hebben van allerlei features die niet naar behoren werken op hun mobiel.

Wanneer je op een mobiel apparaat aan het browsen bent kun je een AMP pagina herkennen aan het kleine bliksem-icoontje wat bij het zoekresultaat in Google staat.

Kortom, AMP pagina’s geven een versimpelde versie van een bestaande pagina weer waardoor deze instant laden en je zo dus een enorme slag kunt slaan in het verbeteren van de snelheid van je mobiele website.

Wil je meer weten over AMP en hoe het werkt? Lees hier dan verder op de website van de ontwikkelaars van AMP zelf.

Verminder het aantal HTTP requests

Wanneer je een pagina bezoekt wordt er voor elk element op de pagina een HTTP request gedaan. Denk hierbij aan afbeeldingen, stylesheets en scripts. Hoe meer van deze bestanden er worden ingeladen, hoe langer de browser nodig heeft om de pagina te laden. Probeer het aantal requests dus zoveel mogelijk te beperken.

Klik in Google Chrome met de rechter muisknop op een leeg stuk pagina en klik vervolgens op “Inspect”, of druk op de volgende toetsencombinatie “Ctrl+Shift+i”. Ga vervolgens naar het tabblad “Network” voor een overzicht van alle elementen die worden ingeladen. Loop deze lijst samen met je ontwikkelaar en/of marketeer na en bepaal welke elementen niet noodzakelijk zijn. Wellicht worden er stylesheets ingeladen van plug-ins die je niet meer gebruikt of is er een slider met 20 afbeeldingen waarvan er maar een paar getoond worden.

Rogier van Roon – Freelance Webdesigner & WordPress Developer

profielfoto rogier van roon

“Populaire Open Source systemen zoals WordPress laden onderwater een hoop (vaak) ongebruikte core scripts en styling in. Deze zorgen voor een onnodige hoog aantal requests van bestanden. Je hosting server moet bij het ophalen van je website simpelweg langer wachten. Door de core van WordPress op te ruimen met diverse beschikbare cleanup functies, reduceer je het aantal requests dan ook enorm en laad je website sneller in”.

Combineer bestanden

Het apart inladen van veel verschillende JavaScript en CSS bestanden duurt lang doordat elk bestand apart gedownload moet worden. Wanneer je verschillende CSS bestanden combineert in één of enkele gezamenlijke CSS bestanden, en hetzelfde doet voor je JavaScript bestanden, kun je je laadtijden flink inkorten. Hierdoor hoeft de browser niet elk bestand apart op te vragen en te downloaden. CSS bestanden zijn daarnaast “render blocking”, wat betekent dat ze het laden van de rest van de pagina tijdelijk blokkeren totdat de bestanden zijn ingeladen. Hoe meer bestanden dit zijn, hoe langer het duurt.

Combineer CSS

Verzamel alle CSS bestanden op je website, kopieer de inhoud en plak deze in één gezamenlijk bestand.

Combineer JavaScript

Bij het combineren van JavaScript is het slim om je verschillende JavaScript bestanden te combineren in twee gezamenlijke bestanden; een voor alle essentiële JavaScript die nodig is om je pagina goed in te laden en een voor alle overige, niet-essentiële, JavaScript. Denk bij niet-essentiële JavaScript aan scripts voor elementen die niet direct zichtbaar of nodig zijn bij het laden van de pagina.

Bestanden combineren wanneer je een thema of template gebruikt

Wanneer je je website niet helemaal zelf hebt gebouwd maar gebruik maakt van een CMS als WordPress is het nog belangrijker dat je zoveel mogelijk CSS en JavaScript bestanden combineert. Grote kans namelijk dat je gebruik maakt van een thema of template en een aantal plug-ins. Deze code is niet altijd even schoon en zorgt voor veel verschillende bestanden, wat de laadtijd van je website negatief beïnvloedt.

Gelukkig zijn er plug-ins zoals WP Rocket die dit voor een groot deel kunnen verhelpen. Test vervolgens wel goed of je website nog naar behoren werkt.

Verklein afbeeldingen

Een van de grootste oorzaken van trage pagina’s en lage snelheidsscores zijn (te) grote afbeeldingen die ingeladen moeten worden op een pagina. Gelukkig is dit probleem, hoe groot het ook is, vaak net zo eenvoudig te verhelpen als dat het ontstaat.

Door afbeeldingen zoveel mogelijk te verkleinen en de bestanden te comprimeren voor je deze upload in de mediabibliotheek van je website, kun je namelijk een enorme impact op de laadtijden van je website teweeg brengen.

Tip: door gebruik te maken van eenvoudige en gratis compressietools en websites zoals Compress JPEG en Optimizilla, kun je al snel zo’n 50% of meer besparen op de bestandsgrootte van een afbeelding.

Maak je gebruik van WordPress? Dan kun je hier uiteraard ook een plug-in voor gebruiken. Zo bespaar je jezelf ook nog eens wat tijd. De plug-ins die wij graag gebruiken zijn:

  • WP Smush
  • EWWW Image Optimizer

Naast het comprimeren van je afbeeldingen is het ook verstandig om deze in een zo laag mogelijke resolutie in te laden. Op die manier verminder je ook de benodigde kracht die nodig is om de afbeelding in te laden op een pagina. Zorg natuurlijk wel dat de afbeelding scherp blijft. Maak ze dus zo klein mogelijk, en niet té klein.

Augus van Gils – Autive

Het verbeteren van de laadtijd van je website begint bij de basis, hier zijn drie elementen belangrijk. Ten eerste; kies voor een hosting partner die een server in de buurt heeft en waarbij je de laatste standaarden kunt gebruiken. Als tweede pak je de afbeeldingen aan; comprimeer ze en zorg dat je lazy loading aan hebt staan. Tot slot gebruik caching op de juiste wijze; je hosting partner bied hier wellicht een goede oplossingen voor of gebruik een caching plugin voor je CMS”.

Maak zo min mogelijk gebruik van externe fonts (lettertypen)

Misschien niet de meest voor de hand liggende tip, maar fonts of lettertypen spelen een grotere rol in de laadtijd van je website dan je denkt.

Het gebruik van custom fonts is de laatste jaren enorm toegenomen. Het is tenslotte een manier om branding toe te passen en om controle en merkbekendheid uit te oefenen. Toch kent het gebruik van externe fonts ook zijn nadelen. Denk bijvoorbeeld maar eens aan de extra prestatiekosten die het met zich meebrengt. Externe fonts stellen de weergave van tekst namelijk uit totdat het lettertype is gedownload.

Waar andere inhoud van derden kan worden vertraagd zonder dat de gebruiker dit merkt, moet het lettertype of het font snel geprioriteerd en ingeladen worden om een optimale gebruikerservaring te garanderen.

Lettertypes en fonts worden ingeladen op een pagina door een CSS font-case stijl met een SRC-attribuut op te nemen in het lettertypebestand van je website. Aangezien er veel verschillende lettertypeformaten zijn, is het gebruikelijk om meerdere lettertypebestanden op te nemen, elk met een ander formaat in de CSS-regel.

Er bestaan een aantal best practices waarmee je de ‘font loading performance’ kunt optimaliseren. Uiteraard is het effect hiervan afhankelijk van je website en hoe de CSS bestanden zijn ingeregeld.

  • Laad lettertypes vooraf in met een crossoriging-attribuut om het netwerkverzoek eerder te starten;
  • H2 Server Push kan de browser zo ver krijgen dat de fonts vroeg geladen worden, hoewel de cross-origin aard van de fonts problematisch kan zijn;
  • Gebruik de Font Loading API om de fonts te laden via JavaScript. Dit wordt in veel gevallen ondersteund;
  • Laad aangepaste lettertypes selectief op basis van de breedte van het scherm.

Gebruik browser caching

Het toepassen van browser caching kost relatief weinig moeite en heeft vaak een grote impact op de snelheid van een pagina of website.

Het ophalen van de resources waarmee je website wordt ingeladen kost vaak veel moeite. Iedere afbeelding, elk pagina-element, de zware HTML en alle codering moet immers ingeladen worden. Elke keer dat een bezoeker je website laadt, moet dit proces opnieuw uitgevoerd worden. Veel websites kunnen dit niet goed aan en dat heeft slechte laadtijden tot gevolg.

Maar gelukkig is daar browser caching!

Wanneer je browser caching toepast, worden sommige elementen lokaal op je apparaat opgeslagen wanneer je een website voor het eerst bezoekt. De volgende keren dat je de website bezoekt hoef je dus niet alle afbeeldingen, HTML documenten, stylesheets en JavaScript bestanden helemaal opnieuw te downloaden. Dit gaat al snel om tientallen elementen en kan de laadtijd bij vervolgbezoeken enorm verbeteren.

Maar hoe implementeer je browser caching?

Het is gelukkig niet nodig om een ervaren programmeur in te schakelen om dit toe te passen voor je website. Het is zelfs heel eenvoudig, er bestaan namelijk voldoende plug-ins waarmee je zelf browser caching toe kunt passen!

Dit zijn onze favorieten:

Marijn van Verseveld – Movinmotion

Wanneer je een website bezoekt wil je graag dat deze snel laadt. Voor sommige bezoekers is de laadsnelheid zelfs een reden om het bezoek af te kappen en rechtsomkeert te maken, terug naar bijvoorbeeld de (Google) zoekresultaten. Want zeg nou eerlijk; wacht jij langer dan 4/5 seconden tot een website geladen is?
In een wereld waarin alles steeds sneller gaat en onze spanningsboog steeds korter wordt, is het belangrijk je bezoeker snel de informatie te kunnen tonen waar ze (wellicht) naar op zoek zijn. Maar wat kun je nou precies doen om je website sneller te laten laden? Zoekmachines als Google hanteren een drempel van 2 seconden. Om daaronder te komen kun je een aantal dingen doen. Denk bijvoorbeeld aan het comprimeren van afbeeldingen, het aanzetten van compressie en de minificatie van css javascript en html”.

Verklein en combineer bestanden

Zoals gezegd kost het steeds opnieuw ophalen van bepaalde resources vaak (onnodig) veel moeite. Nu je weet waarom je hier iets tegen moet doen, is het tijd om te kijken hoe je dit aanpakt.

Je kunt het beste beginnen met de HTML-, CSS- en JavaScript bestanden. Deze bestanden zijn vaak enorm belangrijk omdat ze in grote lijnen het uiterlijk van een website bepalen en dus ook keer op keer volledig ingeladen moeten worden wanneer een bezoeker op je website komt.

Om ervoor te zorgen dat niet te kosten gaat vaan goede laadtijden is het belangrijk om deze bestanden zo veel mogelijk te verkleinen en met elkaar te combineren. Hiermee verklein je niet alleen de verschillende bestanden zelf, je maakt hiermee ook het totale bestand een stuk kleiner van formaat.

Het verkleinen en combineren van deze bestanden is helemaal interessant wanneer je gebruik maakt van een (wordpress) template of thema. Dit soort templates maken het heel makkelijk om een website te bouwen, maar er staat vaak erg veel ongebruikte code in de bestanden. Erg zonde natuurlijk!

Omdat alle stukje onnodige code bijdragen aan de grootte en daarmee de laadtijden van je website, is het belangrijk om in ieder geval de volgende zaken zoveel mogelijk te verwijderen;

  • Witruimte;
  • Onnodige opmaak;
  • Extra spaties;
  • Regelafbrekingen;
  • Inspringingen.

Door bovenstaande onderdelen uit je bestanden te verwijderen maak je je pagina’s zo ‘slank’ mogelijk.

Daarnaast kun je er ook voor kiezen om verschillende bestanden met elkaar te combineren. Dit werkt precies zoals het klinkt. Dus wanneer je website verschillende CSS- en JavaScript bestanden heeft, kun je die combineren tot 1 bestand.

Het combineren van deze bestanden kun je op verschillende manieren aanpakken. Zeker wanneer je website op WordPress draait is het verstandig om te kiezen voor een plug-in als Wp-Rocket. Deze maakt het proces vrij eenvoudig.

Zodra je de plug-in hebt geïnstalleerd navigeer je naar ‘Statische bestanden’ of ‘Static Files’. Controleer vervolgens de bestanden die je wilt minimaliseren of combineren. Klik op ‘wijzigingen opslaan’ en bekijk onder het kopje ‘ontwikkelaarshulpmiddelen’ vervolgens wat de impact van je wijzigingen is.

Kortom, als het op je website aankomt geldt dat ‘slanker’ beter is. Hoe minder elementen er op een pagina staan, hoe minder HTTP-verzoeken er nodig zijn om een pagina te renderen. Dit zorgt dan uiteindelijk voor betere laadtijden van je gehele website!

Kies het juiste hostingpakket

Zeker wanneer je een nieuwe website lanceert is het verleidelijk om te kiezen voor het goedkoopste hostingpakket. Hoewel dit pakket in het begin waarschijnlijk voldoende is voor jouw website, moet je waarschijnlijk upgraden zodra er meer verkeer op je website komt.

Bespaar dus liever niet op je hostingpakket, maar kies voor een aanbieder die je kunt vertrouwen en laat je keuze ook zeker afhangen van reviews en beoordelingen van website eigenaren die je voorgingen.

Als het op hosting aankomt zijn er vaak drie mogelijkheden:

  1. Gedeelde hosting (shared hosting);
  2. VPS hosting;
  3. Toegewijde server (dedicated server).

Gedeelde of shared hosting is vaak de goedkoopste optie van deze drie. Over het algemeen is gedeelde hosting al te verkrijgen vanaf zo’n 5 euro per maand. Hoewel gedeelde hosting prima is voor sites met weinig verkeer, heeft shared hosting wel moeite om bij te blijven met verkeerspieken en hoog-volume sites. Ook is het mogelijk dat jouw website wordt beïnvloed door verkeerspieken van andere websites die gebruik maken van dezelfde server als jij.

Bij gedeelde hosting deel je dan ook bronnen als CPU, schijfruimte en RAM met andere websites die op dezelfde server worden gehost.

Wanneer je kiest voor VPS hosting deel je nog steeds een server met andere websites. Echter heb je wel eigen ‘dedicated’ onderdelen van de resources van de server. Dit is dus een goede tussenoptie voor de meeste website eigenaren. VPS hosting beschermt je website immers tegen iedereen op dezelfde server zonder de kosten die nodig zijn voor volledige ‘dedicated’ hosting.

Dedicated hosting geeft je veel meer ruimte, maar dit betekent automatisch ook meer werk wat je zelf zal moeten verrichten. Denk bijvoorbeeld aan de configuratie en technische inrichting van je website en server. Dit is dan ook de beste keuze wanneer je veel ruimte nodig hebt en graag de volledige controle over je hosting in eigen hebt.

Merk je dat je meer verkeer op je website hebt en dat hierdoor de reactietijden van je server vertragen? Dan is het waarschijnlijk tijd om op te schalen. Dit kan dus inhouden dat je van shared hosting naar VPS hosting gaat, of van VPS hosting naar een dedicated server.

Beperk de reactietijd van je server

De reactietijd van je server, ook wel de hoeveelheid tijd die de DNS-lookup in beslag neemt, is een van de meest belangrijke factoren als het aankomt op de laadtijd van een website.

Een DNS (Domeinnaamsysteem) is een server met een database van IP-adressen en bijbehorende hostnamen. Een DNS server is simpel gezegd de vertaling van een URL die een gebruiker in zijn of haar browser typt naar het IP-adres dat de locatie van de gebruiker online weergeeft.

Zodra een bezoeker een URL intypt in de browser, voert je ISP een DNS-zoekopdracht uit om het IP-adres te vinden dat aan de URL gekoppeld is. Vervolgens zal er een IP-adres gevonden worden die vertelt waar de website te vinden is.

Bovenstaande stap is enorm belangrijk. Hiermee wordt namelijk voorkomen dat gebruikers lange reeksen nummers moeten onthouden om toegang te krijgen tot online informatie. De hoeveelheid tijd die deze stap in beslag neemt, is afhankelijk van hoe snel jouw DNS-provider is.

Vergelijk regelmatig waar jouw DNS provider zich bevindt ten opzichte van andere aanbieders. Valt het je op dat andere aanbieders veel hogere snelheden aanbieden en jouw DNS langzaam is, dan is het interessant om over te stappen op een snellere DNS-provider. Een langzame DNS zorgt er namelijk voor dat het te lang duurt voor dat een browser jouw website kan lokaliseren.

Gebruik een Content Delivery Network (CDN)

Een Content Delivery Network (CDN) werkt door alternatieve server nodes te bieden voor gebruikers om bronnen te downloaden. Meestal gaat het hierbij om statische inhoud zoals afbeeldingen en JavaScript bestanden/code. Deze nodes zijn verspreid over de hele wereld, waardoor ze geografisch gezien altijd relatief dicht bij je gebruikers liggen. Hierdoor zorgen de nodes voor een snellere respons en downloadtijd van content door de verminderde wachttijd.

Hoewel CDN’s een geschikte oplossing zijn voor de meeste websites die op zoek zijn naar snelheidsverbeteringen, heeft niet elke website er per se een nodig.

De belangrijkste reden om een CDN te gebruiken is dan ook om de gebruikerservaring te verbeteren op het gebied van laadtijden.

Ook interessant voor jou