15 Tips om je Website Sneller te Maken

In mijn vorige besprak ik hoe een trage website schadelijk kan zijn voor je bedrijf. Maar hoe kun je ervoor zorgen dat je website weer snel wordt?

In deze blog heb ik 15 praktische tips verzameld om de snelheid van je website te verbeteren.

1. Neem afscheid van je budgethosting

Iedereen vindt het fijn om geld te besparen; tenslotte ben je een Nederlander. Maar besparen op je hosting is een van de slechtste dingen die je kunt doen voor de snelheid van je website.

Shared hosting is een populaire en goedkope manier om je website te hosten. Bij shared hosting deel je de server met 10, 100 of zelfs duizenden andere websites. Dit maakt het mogelijk voor de hostingprovider om webhosting tegen lage kosten aan te bieden, omdat de inkoopkosten van de server worden verdeeld over alle websites.

Hoewel dit concept aantrekkelijk klinkt, heeft het enkele nadelen. Ik maak altijd graag de vergelijking met het delen van een huis tijdens je studententijd.

Het is prettig dat je de kosten kunt delen en het is gezellig, maar het is niet altijd rozengeur en maneschijn. Denk aan een bezette douche in de ochtend of een keuken die volstaat met de afwas van een ander. En dan zijn er de momenten dat je huisgenoten besluiten een feest te geven terwijl jij de volgende dag een belangrijk tentamen hebt.

Het is dan ook niet verwonderlijk dat er maar weinig mensen met een eigen huis staan te springen om terug te keren naar hun oude studentensituatie.

Hetzelfde geldt voor je website. Naast shared hosting kun je ervoor kiezen om je website te hosten op een eigen (virtuele) server. Dit brengt enkele voordelen met zich mee:

• Je website beschikt over de volledige capaciteit van de server.
• Je website ondervindt geen hinder van de impact van andere websites.
• Je bent de baas over de server en bepaalt zelf hoe je deze configureert.

Vanaf ongeveer € 7,50 per maand heb je al een (virtuele) server. Heb je minder technische kennis? Dan is het raadzaam om te kijken naar een managed (virtuele) server, waarbij je het technische beheer van je server uitbesteedt.

Daarnaast zijn er ook hostingoplossingen beschikbaar die speciaal zijn ontwikkeld voor platformen zoals WordPress en Magento. Deze (virtuele) servers zijn optimaal ingericht om het maximale uit je WordPress-website te halen.

Doe jezelf en je website een plezier en neem afscheid van goedkope shared hostingoplossingen. Partijen waar ik zelf goede ervaringen mee heb, zijn:

• Virtuele servers van Transip
• Virtuele servers van DigitalOcean
• Virtuele servers van Virtio
• WordPress-hosting van Hyperhost
• WordPress-hosting van Flywheel
• Static hosting van Netlify
• Static hosting van Firebase

2. Bekijk je afbeeldingen kritisch

Afbeeldingen zijn vaak de grootste bottlenecks voor de snelheid van je website. Afhankelijk van hoe je content management systeem is ingesteld, kan het gebeuren dat je te grote foto’s uploadt.

Het komt regelmatig voor dat een afbeelding van 5 tot 10 MB wordt geüpload. Als je meerdere van dit soort afbeeldingen hebt, wordt je website aanzienlijk trager, wat leidt tot onnodige datakosten voor je bezoekers.

Zorg er in de eerste plaats voor dat de afmetingen van je afbeeldingen zijn afgestemd op het ontwerp van je website. Als je website bijvoorbeeld 700 pixels breed is, zorg er dan voor dat je foto’s maximaal 700 pixels breed zijn (of 1400 pixels voor retina-schermen). Het is niet nodig om een afbeelding van 5000 pixels breed te uploaden.

Vervolgens is het belangrijk om je afbeeldingen te optimaliseren met de juiste compressie. Compressie vermindert de bestandsgrootte van je afbeelding zonder dat dit zichtbaar ten koste gaat van de kwaliteit.

Een van mijn favoriete tools voor het comprimeren van afbeeldingen is het gratis te gebruiken TinyPng. Met deze tool kun je een afbeelding uploaden en gratis een geoptimaliseerde versie downloaden. Vaak weet TinyPng de bestandsgrootte met 50% tot 70% te verminderen! Deze reductie zorgt ervoor dat je afbeeldingen veel sneller worden gedownload, zonder dat je enige kwaliteitsverschil opmerkt.

Tot slot is het raadzaam om een aparte set afbeeldingen te gebruiken voor smartphones. Aangezien de schermen van smartphones vaak kleiner zijn dan die van laptops, is het logisch om een kleinere variant van een afbeelding te laden voor mobiele apparaten.

3. Controleer en herstel kapotte links

In de loop der tijd kan het voorkomen dat hyperlinks naar pagina’s of afbeeldingen op je website niet meer functioneren. Het is verstandig om dit regelmatig te controleren.

Een kapotte link kan namelijk extra vertraging veroorzaken bij het laden van je website. De browser van de bezoeker vraagt alle assets van je website op bij je server en wacht op een antwoord voordat deze assets kunnen worden gedownload.

Bij een kapotte link duurt het langer om een antwoord terug te sturen naar de browser, omdat de server aan het zoeken is naar een bestand of pagina die niet meer bestaat.

Met een tool zoals dead link checker kun je eenvoudig je website scannen op kapotte links. Als je website is voorzien van Google Analytics, kun je ook de 404-fouten van je website vinden binnen Google Analytics.

Herstel vervolgens de kapotte links door middel van een redirect, corrigeer eventuele typfouten of zet afbeeldingen en pagina’s terug naar hun oorspronkelijke locatie.

4. Beperk het aantal assets

Je website bestaat, naast een HTML-pagina, uit een reeks assets. Assets zijn bestanden zoals video’s, afbeeldingen, JavaScript, lettertypes en CSS-bestanden. In het slechtste geval kan je browser slechts één asset tegelijk downloaden wanneer iemand je website bezoekt.

Stel je voor dat de homepage van je website bestaat uit 2 video’s, 18 afbeeldingen, 8 JavaScript-bestanden, 3 lettertypes en 8 CSS-bestanden. In totaal moet de browser dan 39 assets stuk voor stuk downloaden. Afhankelijk van de grootte kan dit gemiddeld wel tot 10 seconden duren. Dat zijn 10 seconden waarop je bezoeker niet zal wachten.

Gebruik een tool zoals Pingdom of WebPagetest om te zien hoeveel assets jouw website gebruikt. Analyseer vervolgens of bepaalde assets overbodig zijn en probeer zoveel mogelijk te schrappen.

5. Schrap onnodige functies op je website

Deze tip sluit nauw aan bij de vorige. Het is een goede gewoonte om de functionaliteiten van je website kritisch te bekijken.

Op veel websites zie ik dat fotosliders worden gebruikt. Deze zijn funest voor de snelheid van je website. Niet alleen worden er meerdere foto’s geladen, maar een slider vereist vaak ook extra JavaScript en CSS om goed te functioneren. Een slider kan al snel vijf tot tien extra assets aan je website toevoegen.

Je moet jezelf afvragen of het echt noodzakelijk is om een slider aan je website toe te voegen. Overweeg in plaats daarvan om een duidelijke keuze te maken in de content die je aan je bezoekers wilt tonen. Welke content is het meest waardevol voor je bezoekers? Waarschijnlijk de eerste slide in je fotoslider. Verwijder de slider van je website en toon alleen de content van die eerste slide.

6. Maak gebruik van browsercaching

Browsercaching zorgt ervoor dat de assets van je website worden opgeslagen in de browser van de bezoeker. Dit heeft als voordeel dat de browser bij terugkerend bezoek aan je website niet opnieuw alle assets hoeft te downloaden. Dit bespaart natuurlijk veel tijd en zorgt voor snellere laadtijden van je website.

Het is vrij eenvoudig om browsercaching in te schakelen als je website draait op WordPress. Een van de meest populaire caching-plugins voor WordPress is W3 Total Cache. Met deze plugin kun je in een paar eenvoudige stappen browsercaching inschakelen voor je WordPress-website.

7. Minimaliseer en combineer assets

Wanneer een developer code schrijft, zorgt hij of zij ervoor dat deze goed leesbaar is. Dit wordt gedaan door voldoende witruimtes te gebruiken en codeblokken correct in te springen. Deze opmaak is uitsluitend voor het leesgemak van de developer en heeft geen invloed op de uitvoering van de code op de server.

Aangezien de opmaak van de code geen rol speelt voor de server, kun je de code van je website minimaliseren. Dit betekent dat je alle witruimtes en inspringingen verwijdert en alle code op één regel plaatst. Hoewel de code hierdoor onleesbaar wordt voor mensen, kan de server deze nog steeds correct interpreteren. Het grote voordeel is dat de bestandsgrootte aanzienlijk kleiner wordt.

De volgende stap is het combineren van de verschillende assets. Vaak bestaat een website uit meerdere JavaScript- en CSS-bestanden. Elk van deze bestanden bevat specifieke code en is verantwoordelijk voor bepaalde functionaliteiten op je website. Het is echter inefficiënt om deze bestanden afzonderlijk te laden. Daarom is het verstandig om alle JavaScript en CSS samen te voegen.

In plaats van bijvoorbeeld 10 CSS-bestanden hoeft je website nu nog maar één CSS-bestand te laden. Hierdoor kan je website sneller beginnen met het laden van andere assets, zoals afbeeldingen, lettertypes of video’s.

Als je website draait op WordPress, kun je gebruikmaken van Autoptimize. Met deze plugin kun je eenvoudig de assets van je website combineren tot één bestand en de code minimaliseren.

8. Maak gebruik van een CDN

Een Content Delivery Network (CDN) kan de snelheid van je website aanzienlijk verhogen. Een CDN bestaat uit een netwerk van honderden servers die met elkaar verbonden zijn en als belangrijkste taak hebben om content zo efficiënt mogelijk te leveren.

Een CDN ondersteunt de server waarop je website draait door de assets van je website te serveren. Hierdoor hoeft je server minder hard te werken, wat resulteert in snellere en efficiëntere downloads van de assets door bezoekers.

De servers van een CDN zijn fysiek verspreid over de hele wereld. Dit heeft als voordeel dat bezoekers overal ter wereld dezelfde laadsnelheid kunnen ervaren wanneer ze je website bezoeken. De fysieke afstand tussen de bezoeker en de server heeft namelijk een aanzienlijke invloed op de laadsnelheid.

Als je website veel bezoekers uit Nederland heeft, wil je idealiter je server ook in Nederland hebben staan en niet in de Verenigde Staten of Azië. Het is echter niet haalbaar om in elk land waar je bezoekers vandaan komen een server te plaatsen.

Populaire content delivery networks die je kunt gebruiken voor je website zijn CloudFlare, Amazon CloudFront en Akamai.

9. Beperk het aantal redirects

Redirects zijn een handig hulpmiddel om je bezoekers en zoekmachines door te verwijzen naar nieuwe locaties op je website.

Bijvoorbeeld, wanneer je een nieuwe website lanceert, kan het voorkomen dat de inhoud van je site verandert. Met een redirect kun je dan aangeven dat je teampagina vanaf nu bereikbaar is via de ‘Over ons’-pagina.

Let echter op dat je niet een jaar later de ‘Over ons’-pagina opnieuw doorverwijst, bijvoorbeeld naar je nieuwe company-pagina. Dit leidt tot het stapelen van redirects, wat een negatieve impact heeft op de snelheid van je website.

Wanneer een bezoeker dan een oude link naar je teampagina heeft, wordt deze eerst doorverwezen naar de inmiddels oude ‘Over ons’-pagina, om vervolgens nog een keer doorverwezen te worden naar je huidige company-pagina.

In zulke gevallen is het beter om de oorspronkelijke redirect aan te passen en een extra redirect toe te voegen. De teampagina verwijst dan rechtstreeks naar de company-pagina, en je maakt een aparte redirect aan die verwijst van de ‘Over ons’-pagina naar de nieuwe company-pagina.

10. Gebruik geen standaardthema’s

Het kan aantrekkelijk zijn om om kosten te besparen te kiezen voor een standaardthema. Populaire standaardthema’s voor WordPress zijn vaak voor een paar tientjes te koop, wat een kant-en-klaar thema voor je website oplevert.

Naast het gebrek aan een unieke uitstraling voor je website, kunnen standaardthema’s ook leiden tot een trage website.

Om een thema voor zo’n lage prijs aan te bieden en toch winst te maken, moet de maker het thema vaak verkopen aan een groot aantal klanten. Afhankelijk van de complexiteit kan het wel duizend uur kosten om een thema te ontwikkelen.

De ontwikkelaar probeert daarom zoveel mogelijk functionaliteit in het thema op te nemen om een zo groot mogelijke potentiële doelgroep aan te spreken. Dit brengt echter een probleem met zich mee voor de snelheid.

Omdat een thema veel functies bevat, komt het vaak met veel extra JavaScript- en CSS-bestanden. Meestal heb je echter maar een klein aantal van deze functies nodig. Toch worden alle functies standaard geladen, wat resulteert in een website die veel onnodige functionaliteiten laadt.

Als je snelheid belangrijk vindt, ben je beter af met een op maat gemaakte website. Hierbij houdt de ontwikkelaar rekening met jouw wensen en voegt hij alleen de functionaliteit toe die jouw website echt nodig heeft.

11. Activeer het HTTP/2-protocol op je server

Zoals je in tip vier hebt gelezen, kan een browser in het slechtste geval maar één asset tegelijk downloaden. Dit komt door de beperkingen van het HTTP/1.1-protocol. HTTP staat voor Hypertext Transfer Protocol en is de standaard voor communicatie op het internet.

Het HTTP/1.1-protocol werd in circa 1997 geïntroduceerd als standaard. Pas in 2012 begon men met de ontwikkeling van de opvolger, HTTP/2, en deze werkzaamheden werden in mei 2015 afgerond. Sinds eind 2016 ondersteunen browsers het HTTP/2-protocol. Het grootste voordeel van het HTTP/2-protocol voor de snelheid van je website is de mogelijkheid voor de browser om meerdere assets tegelijk te downloaden.

Wanneer een bezoeker van je website een snelle internetverbinding heeft, kan deze meerdere afbeeldingen tegelijk downloaden. Dit gaat vanzelfsprekend veel sneller dan het stuk voor stuk downloaden via het oudere HTTP/1.1-protocol.

Neem contact op met je hostingprovider om het HTTP/2-protocol te activeren.

12. Afbeeldingen ‘lazy’ laden

Wanneer je website groter is dan het schermformaat, is het zonde om alle inhoud in één keer te laden. Je kunt ervoor kiezen om bepaalde assets van je website ‘lazy’ te laden.

Onder ‘lazy’ laden verstaan we dat een asset niet onmiddellijk wordt ingeladen, maar pas wanneer een bepaalde actie wordt uitgevoerd. Een veelvoorkomende actie waarop wordt gelet, is het scrollgedrag van de bezoeker.

Met behulp van JavaScript kan worden bepaald hoe ver een gebruiker door de website is gescrold. Op basis van deze informatie kan worden vastgesteld dat een asset vanaf dat punt moet worden geladen.

Afbeeldingen zijn uitstekende kandidaten voor ‘lazy’ laden. Ze zijn doorgaans de grootste assets van je website en veroorzaken de meeste vertraging. Het is niet nodig om alle afbeeldingen vooraf te downloaden; het is veel efficiënter om ze pas te laden wanneer de bezoeker naar beneden scrolt.

Als je website draait op WordPress, zijn er voldoende plugins beschikbaar om je afbeeldingen en video’s ‘lazy’ te laden.

13. Activeer compressie op je server

Je hebt vast wel eens foto’s of mp3-bestanden willen versturen en deze eerst samengevoegd in een zip-bestand. Het voordeel van het ‘zippen’ van bestanden is dat de totale bestandsgrootte aanzienlijk kleiner wordt door de toegepaste compressie.

Een server kan hetzelfde principe toepassen, maar dan voor de assets van je website. Met behulp van zogenaamde gzip-compressie kan de grootte van de pagina’s op je website tot wel 70% worden verminderd.

Het activeren van compressie op je server moet worden uitgevoerd door je hostingprovider.

14. Beperk het aantal share widgets

Share widgets bieden bezoekers de mogelijkheid om je website eenvoudig te delen op sociale media. Populaire deelopties zijn het delen op Facebook, Twitter, LinkedIn en via e-mail.

Echter, elke share widget wordt vaak geleverd met zijn eigen JavaScript, CSS en afbeeldingen. Dit resulteert in een aanzienlijke hoeveelheid extra bestanden die de snelheid van je website negatief beïnvloeden.

Vraag jezelf eens af: hoe groot is de kans dat iemand mijn website wil delen op sociale media? En hoe waarschijnlijk is het dat diegene niet bereid is om de link vanuit zijn browser te kopiëren naar bijvoorbeeld Facebook, Twitter of zijn e-mailclient?

Stel deze kans tegenover de negatieve impact op de laadsnelheid die share widgets met zich meebrengen. Ik durf te beweren dat je website in 9 van de 10 gevallen prima zonder sociale share widgets kan functioneren.

Het is immers niet zo dat je website niet meer gedeeld kan worden op sociale media als je geen share widget hebt. Een share widget is slechts een handige voorziening voor je bezoekers om je website te delen.

15. Kies voor standaard lettertypes

Zoals je in tip 4 hebt gelezen, is het goed om het aantal assets op je website te beperken. Een van de assets waarop je kunt besparen, zijn lettertypes.

Twee populaire manieren om lettertypes aan je website toe te voegen zijn Google Fonts en Adobe Typekit. Met deze diensten heb je toegang tot duizenden (gratis) lettertypes.

Maar je moet jezelf afvragen: heeft mijn website per se een hip lettertype nodig, of kan een standaard lettertype ook volstaan? Het besturingssysteem van een computer of telefoon beschikt namelijk over een standaardset lettertypes die je kunt gebruiken op je website.

Kiezen voor een set standaard lettertypes betekent vaak een snellere website, maar het kan ook minder goed aansluiten bij de rest van je branding. Maak voor jezelf de afweging of je snelheid of branding belangrijker vindt.

Tot slot

Heb je iets geleerd van deze tips? Ik zou het leuk vinden als je deze blog deelt met je vrienden en collega’s.

Heb je hulp nodig bij het verbeteren van de snelheid van je website? Neem dan contact met mij op voor een vrijblijvende prijsopgave.