Hoe u JavaScript in WordPress kunt uitstellen om de paginasnelheid te verbeteren

Geplaatst door

Op 15 april 2025

Reacties uitgeschakeld

Een van de belangrijkste redenen waarom WordPress-pagina's langzaam laden, is render-blocking JavaScript. Deze scripts vertragen de snelheid waarmee een browser content kan weergeven, vooral boven de vouw. Door het laden van JavaScript uit te stellen, kunt u de paginasnelheid, de gebruikerservaring en de prestatiescores verbeteren in tools zoals PageSpeed Insights.

Wat is render-blokkerende JavaScript?

Wanneer een browser een JavaScript-bestand in de HTML tegenkomt <head>, pauzeert het de weergave om het script te downloaden, te parseren en uit te voeren. Dit vertraagt de snelheid waarmee de pagina zichtbaar wordt voor de gebruiker.

Veelvoorkomende bronnen van render-blokkerende JS:

Thema- en plug-inscripts (zoals schuifregelaars, pop-ups, animaties)
Externe scripts (Google Analytics, Facebook Pixel, etc.)

Wat is het verschil tussen `verschuiven` En `asynchroon`?

asynchroon: Downloadt het script zonder HTML-parsing te blokkeren. Voert het direct na het downloaden uit — kan conflicten veroorzaken als de volgorde van belang is.
verschuiven: Downloadt ook zonder blokkering, maar vertraagt de uitvoering totdat het HTML-parsen voltooid is — veiliger en beter voor afhankelijke scripts.

Hoe u problematische JavaScript kunt identificeren

Gebruik deze hulpmiddelen om te zien welke scripts het renderen blokkeren:

PageSpeed Insights
Chrome DevTools → tabblad Lighthouse
Chrome DevTools → Netwerk → filteren op JS

Focus op JS-bestanden die worden geladen in de <head> en gemarkeerd als “render-blocking.”

Hoe JavaScript in WordPress uit te stellen

Optie 1: Defer toevoegen met code (geen plug-ins)

Voeg deze code toe aan uw child-thema functies.php toepassen verschuiven naar alle scripts behalve jQuery:

functie add_defer_attribute($tag, $handle) {
// jQuery overslaan
als ('jquery-core' === $handle || 'jquery' === $handle) {
retourneer $tag;
}
return str_replace(' src', ' defer src', $tag);
}
add_filter('script_loader_tag', 'add_defer_attribute', 10, 2);

Optie 2: Gebruik Async

Net als bij uitstellen kunt u gebruik maken van: asynchroon In plaats daarvan — verander gewoon `defer` in `async` in de bovenstaande code. Maar wees voorzichtig: sommige scripts zijn afhankelijk van de laadvolgorde en kunnen daardoor vastlopen.

LEZEN Slimme WordPress-database-optimalisatie om bloat te elimineren en de snelheid te verhogen

Plugins gebruiken (met voorzichtigheid)

Als u de code niet wilt aanpassen, kunt u met deze plug-ins JS uitstellen of asynchroon maken:

**WP Rocket** – Eenvoudige interface, werkt goed, maar betaald.
**Asset CleanUp** – Hiermee kunt u specifieke scripts handmatig uitstellen of uitschakelen.
**Flying Scripts** – Lichtgewicht en gericht op het uitstellen van JS na een vertraging.

⚠️ Test altijd na het inschakelen: het uitstellen van het verkeerde script kan de lay-out of functionaliteit van uw site verstoren.

Hoe de impact te testen

Gebruik PageSpeed Insights of GTmetrix voor/na
Open uw site in een incognitovenster om zichtbare problemen op te sporen
Gebruik DevTools → tabblad Netwerk → controleer de laadvolgorde en timing

Conclusie: Strategisch uitstellen

JavaScript uitstellen is een van de eenvoudigste en krachtigste technieken om je WordPress-site te versnellen. Begin met veilige scripts, vermijd het uitstellen van jQuery (tenzij je het inline gebruikt) en test grondig.

Wilt u verder gaan? Vraag een gratis prestatie-audit aan bij SpeedWP Pro en we helpen u uw scripts en laadstrategie te optimaliseren voor maximale resultaten.

Blog