Snelheid
WordPress JavaScript optimaliseren met defer en async
21 februari 2025 · 5 min leestijd
JavaScript is vaak de grootste rem op de laadsnelheid van WordPress. Standaard laadt de browser elk JavaScript-bestand sequentieel — het moet elk script downloaden, parseren en uitvoeren voordat de pagina verder rendert. Bij een website met 20+ scripts kan dit seconden kosten.
Bij WP Installeren wij JavaScript-optimalisatie standaard bij al onze klanten. In dit artikel leggen wij uit hoe defer en async werken en hoe u ze correct toepast.
Het probleem: render-blocking JavaScript
Wanneer de browser een script-tag tegenkomt, stopt het renderen tot het script is gedownload en uitgevoerd. Dit heet "render-blocking" en is een van de grootste oorzaken van trage websites.
De oplossing: async en defer
HTML biedt twee attributen om scripts asynchroon te laden: **Async:** <script src="script.js" async></script> - Script wordt parallel gedownload met pagina-rendering - Script wordt direct uitgevoerd na download (kan rendering blokkeren) - Uitvoervolgorde is niet gegarandeerd - Geschikt voor: onafhankelijke scripts, analytics, advertenties
Wanneer welke gebruiken?
| Situatie | Attribuut | |---|---| | Script heeft geen afhankelijkheden | async | | Script gebruikt DOM (jQuery) | defer | | Script moet eerst laden | geen (default) | | Inline kritieke JS | geen — plaats in <head> |
Implementatie in WordPress
In WordPress voegt u async/defer toe via wp_enqueue_scripts: function add_defer_async($tag, $handle) { if ('mijn-script' === $handle) { return str_replace('<script ', '<script defer ', $tag); } return $tag; } add_filter('script_loader_tag', 'add_defer_async', 10, 2);
Plugins voor automatische optimalisatie
Testen na implementatie
Test altijd grondig na wijzigingen: 1. Controleer of alle functionaliteit werkt (formulieren, sliders, menu's) 2. Test op mobiele apparaten 3. Controleer de console op foutmeldingen 4. Meet het verschil met PageSpeed Insights
WP Maintainer optimalisatie
Wij optimaliseren JavaScript-laadvolgorde als onderdeel van ons onderhoudspakket. Wij testen welke scripts async/defer kunnen gebruiken, voeren dit zorgvuldig uit en controleren of alles blijft werken. Zo halen wij de maximale snelheidswinst uit uw website.
Wilt u meer informatie?
Neem contact op via WhatsApp of bekijk onze pakketten.