Wat is defer JavaScript en CSS?
Bij het laden van een WordPress website is “defer” een term die verwijst naar een attribuut dat je kunt toevoegen aan een script-element in HTML. Dit attribuut vertelt de browser om het JavaScript-bestand uit te stellen tot nadat de volledige HTML-pagina is geladen. Dit kan helpen om de laadtijd van je website te verbeteren en ervoor te zorgen dat de gebruiker sneller de inhoud ziet.
Waarom defer gebruiken?
Als je meerdere JavaScript-bestanden hebt die op een pagina moeten worden geladen, kan het gebruik van “defer” ervoor zorgen dat de belangrijkste inhoud van de pagina eerst wordt weergegeven, terwijl de scripts op de achtergrond worden geladen. Dit is vooral nuttig voor het verbeteren van de gebruikservaring, omdat bezoekers dan sneller de inhoud kunnen zien en met de pagina kunnen interageren, zelfs als er nog JavaScript-bestanden worden geladen.
Hoe gebruik je defer?
Het gebruik van “defer” is eenvoudig. Je hoeft alleen maar het attribuut toe te voegen aan het script-element in je HTML-bestand. Bijvoorbeeld:
<script src="example.js" defer></script>
Door dit attribuut toe te voegen, vertel je de browser om het script uit te stellen tot de pagina volledig is geladen.
Automatisch Defer Gebruiken met Cache Plugins
Het gebruik van “defer” kan handmatig worden ingesteld, maar gelukkig zijn er verschillende cache-plugins die dit proces automatisch kunnen uitvoeren voor je WordPress website. Laten we eens kijken naar twee populaire plugins, WP Rocket en W3 Total Cache, en hoe zij het gebruik van “defer” eenvoudig maken.
WP Rocket
WP Rocket is een populaire premium cache-plugin voor WordPress die tal van optimalisaties biedt, waaronder het uitstellen van JavaScript. Om “defer” in te schakelen, volg je de onderstaande stappen:
- Log in op je WordPress dashboard en ga naar “Instellingen” > “WP Rocket”.
- Navigeer naar het tabblad “File Optimization”.
- Scroll naar beneden naar het gedeelte “JavaScript Files” en vink het vakje aan naast “Load JavaScript deferred”.
- Klik op “Save Changes”.
WP Rocket zorgt er nu voor dat je JavaScript-bestanden worden uitgesteld, wat helpt om de prestaties van je website te verbeteren.
W3 Total Cache
W3 Total Cache is een andere populaire cache-plugin voor WordPress. Om “defer” in te schakelen, kun je het volgende doen:
- Log in op je WordPress dashboard en ga naar “Performance” > “General Settings”.
- Scroll naar beneden naar “Minify Settings” en schakel “Enable” in.
- Klik op “Save Settings & Purge Caches”.
- Ga vervolgens naar “Performance” > “Minify”.
- Scroll naar “JS” en selecteer “Defer” onder “Operation in Areas”.
- Klik op “Save Settings & Purge Caches”.
Hiermee stel je de JavaScript-bestanden uit, waardoor de laadtijd van je website wordt verbeterd.
Door gebruik te maken van cache-plugins zoals WP Rocket of W3 Total Cache, kun je eenvoudig het “defer”-attribuut toevoegen aan je JavaScript-bestanden zonder dit handmatig te hoeven doen.
Defer versus async
Naast “defer” is er ook een attribuut genaamd “async” dat je kunt gebruiken om de laadtijd van scripts te optimaliseren. Het verschil tussen de twee is dat “async” de scripts onmiddellijk laadt terwijl de pagina wordt geladen, wat kan leiden tot onverwacht gedrag als de scripts van elkaar afhankelijk zijn. “Defer” daarentegen zorgt ervoor dat de scripts worden uitgevoerd in de volgorde waarin ze op de pagina staan, wat betrouwbaarder is als de scripts afhankelijk van elkaar zijn.
Het gebruik van “defer” bij het laden van JavaScript-bestanden is een eenvoudige manier om de prestaties van je WordPress website of je WooCommerce webshop te verbeteren. Door het uitstellen van het laden van scripts, kunnen je bezoekers sneller de inhoud van je website zien en wordt hun ervaring verbeterd.