Tips bij het versnellen van je site

Een snelle website krijgen

Heb je een website die een trage laadtijd heeft? Dan kan het je conversie, gebruiksvriendelijkheid en SEO negatief beinvloeden.

Als website eigenaar is het belangrijk je website zo effectief mogelijk te maken. Hierbij hoort een snelle website. In dit artikel krijg je tips mee, zodat je jouw website kunt versnellen.

Hoe snel is jouw website?

Het komt helaas nog veel voor dat er wat onduidelijkheid over laadtijd is. Het hebben van een trage website kan je conversie en de gebruikservaring verminderen.

Een trage laadtijd heeft geen groot effect op je SEO. En daar ligt de onduidelijkheid en mythe vooral. Gary Illyes (werknemer van Google) gaf aan dat de snelheid van je website niet als grote ranking factor wordt gebruikt. Met de opkomst van snellere internet merk je namelijk geen al te grote verschillen bij websites.

Ranking wise it's a teeny tiny factor, very similar to https ranking boost. That particular one is not surprising. You do that primarily to enable users to convert.

— Gary 鯨理／경리 Illyes (@methode) April 28, 2020

Gebruik Google's PageSpeed Insights om inzicht te krijgen hoe snel jouw website op servers reageert. De tools die jouw laadtijd meten zijn verschillend met hoe internet gebruikers de site ervaren. Neem het dus vooral als een korreltje zout.

Website versnelling tips

1. Snelle hosting

Er zijn genoeg webhosting bedrijven die jouw website kunnen hosten. Wanneer je een snelle website wilt, kan de server hier een grote rol bij spelen. De server reageert op opdrachten die ernaartoe gestuurd worden.

Een snelle server helpt ook bij hoe goed Google jouw site kan crawlen. Dat betekent dan dat ze meer pagina's kunnen bezoeken doordat de server snel reageert.

Er zijn genoeg snelle webhosting bedrijven beschikbaar om jouw website die boost te geven. Of je nou een WordPress of statische hebt, een snelle server helpt de laadtijd drastisch te versnellen.

2. Onnodige plugins verwijderen

Deze laadtijd optimalisatie vereist nog wel wat technische kennis. WordPress specialisten bekijken je website dan op alle vlakken. Uit analyse kunnen ze dan adviseren een aantal plugins te verwijderen.

Plugins vergroten de schijfruimte, en zo vertraagd het de laadtijd van je website. Je wilt dus voorkomen dat je te veel plugins op je website gebruikt. Op die manier versnel je jouw website.

3. Afbeeldingen comprimeren

De browser moet bij het laden van een website vaak ook afbeeldingen vertonen. Deze afbeeldingen vereisen wat kracht en tijd van de browser. Hierdoor kan de website wat trager worden.

Om je website te versnellen is het belangrijk dat je afbeeldingen niet veel bestandsgrootte bevatten. Je kunt in dat geval je afbeeldingen comprimeren, om de grootte te verminderen.

Er zijn verschillende online tools beschikbaar die afbeeldingen voor je comprimeren. Heb je een WordPress websites? Dan kun je de plugin WP smush it installeren om dit voor je te regelen.

Ben je die plugins zat en wil je dit gewoon zelf proberen te doen? Plaats de afbeeldingen die je wilt comprimeren in TinyPNG.

4. Je website comprimeren

Hier gaat het nogal wat technisch. Het comprimeren van je website vereist een aantal zaken. Wel kun je dit gewoon geheel zelf doen als je weet hoe je bestanden op de server overzet.

Maak een bestand aan genaamd '.htaccess' en zet deze over op de server. In dat bestand kun je dan het volgende toevoegen om je website te comprimeren.

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE font/woff
AddOutputFilterByType DEFLATE font/woff2
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml

Plaats de code in het bestand en zet het vervolgens weer over op de server. Je website bevat nu de compressie van Gzip. Je kunt testen of de compressie succesvol is verlopen door de online tool GiftOfSpeed te gebruiken.

5. JavaScript en CSS later laden

Wanneer de browser je website eerst uit moet laden, neemt JavaScript en CSS nogal wat tijd in beslag. Om je website te versnellen kun je deze twee programmeertalen laten laden. De browser laadt het dan pas nadat de content en andere delen van de website zijn geladen.

Gebruik deze optimalisatie alleen als de JavaScript en CSS niet meteen bruikbaar hoeven te zijn. Om de JavaScript code uit te stellen kun je het attribuut 'async' toe te passen.

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Je CSS laat je later laden door het onderaan de code te plaatsen. Het vereist dus wel wat technische kennis om dit te doen. Vraag desnoods iemand met programmeerkennis om niet-essentiële CSS code onderaan de website code te plaatsen. Dat zorgt voor een stijging in de laadtijd.

6. Afbeeldingen later laten laden

Je wilt dat je bezoeker de afbeelding zo snel mogelijk te zien krijgt en dat het laden van de website niet wordt vertraagd door de afbeeldingen. Gelukkig heeft Google Chrome, Firefox, Edge en Samsung Internet een nieuwe functie toegevoegd aan hun browser.

Door in je code van de afbeelding het volgende toe te voegen, zullen deze browsers jouw afbeeldingen pas laden als de afbeelding in beeld moet komen. Dit bespaart de browser een hoop laadtijd.

<img src="voorbeeld.png" loading="lazy"/>

Door 'loading="lazy"' toe te passen aan de foto, zul je Google Chrome en de overige webbrowsers aangeven dat de foto pas geladen moet worden als de foto in beeld moet komen. Het bespaart een hoop laadtijd door dit toe te passen aan de foto's van je website.

Safari en andere browsers ondersteunen deze functie nog niet. Wat je dan wel kunt doen is om een lazyloading functie toe te voegen aan je JavaScript.

Er is een mogelijkheid om met behulp van JavaScript, alsnog de lazy loading functie toe te passen aan de foto's in je website. Dit doe je door de volgende code:

<script> document.addEventListener
("DOMContentLoaded", function() { var lazyloadImages = document.querySelectorAll("img.lazy"); var lazyloadThrottleTimeout; function lazyload () { if(lazyloadThrottleTimeout) { clearTimeout(lazyloadThrottleTimeout); } lazyloadThrottleTimeout = setTimeout(function() { var scrollTop = window.pageYOffset; lazyloadImages.forEach(function(img) { if(img.offsetTop < (window.innerHeight + scrollTop)) { img.src = img.dataset.src; img.classList.remove('lazy'); } }); if(lazyloadImages.length == 0) { document.removeEventListener("scroll", lazyload); window.removeEventListener("resize", lazyload); window.removeEventListener
("orientationChange", lazyload); } }, 20); } document.addEventListener("scroll", lazyload); window.addEventListener("resize", lazyload); window.addEventListener("orientationChange", lazyload); }); </script>

Plak de JavaScript code aan de onderkant van je code om de snelheid van je website te waarborgen.

Verander de foto's in je website van:
<img src="voorbeeld.png"/>, naar <img class="lazy" data-src="voorbeeld.png"/>

Nadat je dit hebt gedaan voor al je foto's in jouw code, zal de browser pas je foto's laden als het in beeld moet komen. Deze manier van laden zal je website sneller maken.

Heb je moeite in het toepassen van de lazy loading functie? Dan kun je het artikel van Lazy Loading bekijken van CSS-Tricks bekijken.

7. Verkleinen van CSS en JavaScript

Naast het uitstellen van CSS en JavaScript code, kun je de snelheid van je website ook verbeteren door de CSS en JavaScript te verkleinen.

Verwijder bijvoorbeeld code die je niet meer gebruikt. Er zijn gratis online tools beschikbaar die je code verkleinen en aangeven welke code je kunt verwijderen.

Er is een tool genaamd PurifyCSS die ervoor zorgt dat je CSS code te zien krijgt die wel gebruikt wordt op je website. Je krijgt van hen een analyse wat je wel gebruikt en wat je niet gebruikt voor CSS. Dit kun je dan handig overnemen van de tool en plakken binnen je website.

Door het overnemen zul je ook een gecomprimeerde versie van bruikbare CSS terugkrijgen, waardoor je ook gelijk je CSS verkleint.

Bekijk welke JavaScript code je aanroept die geen rol meer in je website speelt. Door het te verwijderen zorg je ervoor dat de browser dit niet meer hoeft te laden. Dat bespaart de browser download tijd, waardoor je website sneller wordt.