jQuery deferren in WordPress

Waarom jQuery deferren?

jQuery wordt nog steeds bij elke WordPress installatie meegeleverd en de meeste thema's laden het zonder te deferren. Dat betekent dat het HTML parsing blokkeert bij elke afzonderlijke paginaweergave. Hier is hoe je dat kunt oplossen.

Laatst beoordeeld door Arjen Karel in maart 2026

jQuery komt voor op 74% van alle webpagina's volgens de 2024 Web Almanac, grotendeels gedreven door WordPress. Toch gebruikt slechts 47% van de mobiele pagina's het defer attribuut op een script. Dat betekent dat de meerderheid van de WordPress sites jQuery nog steeds synchroon laadt, wat HTML parsing blokkeert en elke paint metriek op de pagina vertraagt, met name de Largest Contentful Paint.

Bekijk de onderstaande afbeelding. Het toont het verschil in HTML parsing tussen normale, deferred en async scripts. Als jQuery niet wordt deferred, zal de browser HTML parsing blokkeren totdat het script is uitgevoerd. Als jQuery is deferred hoeft de browser de parser niet te blokkeren. En dit zal je een heleboel tijd besparen. Voor een volledige vergelijking, zie async vs defer en hoe dit de Core Web Vitals beïnvloedt.

De reden dat themabouwers jQuery niet standaard deferren is vanwege legacy. Sommige plugins voegen (inline) scripts toe die afhankelijk zijn van jQuery. Als jQuery deferred wordt geladen, maar het script dat jQuery nodig heeft niet wordt deferred, zal er een conflict (en een fout) optreden.

Methode 1: jQuery handmatig deferren

Stap 1: Vind waar jQuery is geënqueued

Vind eerst waar jQuery is opgenomen in je WordPress thema. Het is meestal in het functions.php bestand van het thema of direct in het header.php bestand. Zoek naar regels zoals:

wp_enqueue_script('jquery');    

We weten nu dat de handle voor jQuery 'jquery' heet.

Stap 2: Gebruik een child theme

Als je een parent theme aanpast, maak dan eerst een child theme aan. Anders worden je wijzigingen overschreven bij de volgende thema update.

Stap 3: Enqueue jQuery met het 'defer' attribuut

Voeg de volgende code toe aan het functions.php bestand van je child theme en pas het aan om overeen te komen met de locatie van je jQuery bestand en de handle. We gebruiken de WordPress 6.3 defer strategie:

function defer_jquery() {
  if (!is_admin()) {
    wp_deregister_script('jquery');
    wp_register_script('jquery', '/js/jquery/jquery.js', [], null, [ 'strategy'  => 'defer']);
    wp_enqueue_script('jquery');
  }
}
add_action('wp_enqueue_scripts', 'defer_jquery',100);

Laten we het opsplitsen:

• wp_deregister_script('jquery'): Deregistreert het standaard jQuery script.
• wp_register_script('jquery', '/js/jquery/jquery.js', [], null, [ 'strategy' => 'defer']);: Registreert jQuery met de 'defer' strategie.
• wp_enqueue_script('jquery'): Enqueuet het aangepaste jQuery script.

Et voila: je hebt nu met succes jQuery deferred op je WordPress site. En als bonus weet je nu hoe je elk script kunt deferren, want het proces is precies hetzelfde! Voor meer deferral technieken buiten WordPress, zie 16 methoden om JavaScript te deferren.

Pas op voor inline scripts. WordPress 6.3 zal stilletjes de defer strategie verwijderen als je script inline scripts heeft gekoppeld in de after positie via wp_add_inline_script(). Als je jQuery deferred maar het nog steeds synchroon laadt, controleer dan of een plugin inline scripts toevoegt aan de jQuery handle.

Methode 2: gebruik een plugin

Plugins zoals WP Core Web Vitals maken het super eenvoudig om jQuery te deferren en veel plugins kunnen zelfs omgaan met de complicaties die hieruit kunnen voortvloeien door ook afhankelijkheden te deferren en een paar andere trucjes uit te voeren, zoals het cachen van jQuery events totdat jQuery is uitgevoerd.

Methode 3: CloudFlare

Een andere super eenvoudige manier om jQuery te deferren is door CloudFlare's Rocket Loader te gebruiken. Rocket Loader werkt door al je scripts uit te schakelen tijdens het laden van de pagina en ze daarna snel weer in te schakelen. Deze truc bootst het deferren van scripts na, maar heeft een paar nadelen:

• CloudFlare Rocket Loader breekt een browserfunctie genaamd de preload scanner. Met Rocket Loader worden scripts niet gepreload en kan het iets langer duren voordat je scripts zijn gedownload en uitgevoerd.
• CloudFlare Rocket Loader is een nogal bot instrument. Het maakt geen onderscheid tussen belangrijke, minder belangrijke en nice-to-have scripts. Het deferred gewoon alles zonder enige overweging en laat je zonder controle over de timing van scripts.

WordPress sites hebben een 45% Core Web Vitals slagingspercentage op mobiel volgens de 2025 Web Almanac, waarbij LCP met slechts 53% de zwakste metric is. Render-blocking jQuery is één van de meest voorkomende oorzaken. Het deferren ervan zal niet alles oplossen, maar het verwijdert een van de grootste blokkades die tussen jouw site en een voldoende LCP score staan.

Test je wijzigingen

Controleer je site na het deferren van jQuery. Open de browser console en zoek naar fouten. Klik door je menu's, sliders, formulieren en alles wat JavaScript gebruikt. Als er iets breekt, zal de probleemoplossing sectie hieronder je helpen het te repareren.

Problemen oplossen

Als je tegen problemen aanloopt, vallen deze waarschijnlijk in een van de 3 categorieën. De meeste problemen zijn te vinden door de inspector te openen en naar de console tab te navigeren. Als er problemen zijn, zul je waarschijnlijk waarschuwingen vinden die er ongeveer zo uitzien en luiden 'Uncaught ReferenceError: jQuery is not defined':

Het oplossen ervan is niet zo moeilijk om te doen. Naast de fout staat een verwijzing naar de oorsprong van de fout. Als het (index) is, is het waarschijnlijk afkomstig van een inline script. Als het een ander bestand is, is het ofwel een timing probleem of je bent vergeten dat bestand ook te deferren.

Afhankelijke scripts

Inline Scripts

$(function(){
 // do something
})

• Gebruik de type="module" truc. De nieuwere <script type="module"> zal ook inline JavaScript deferren.
• Plaats inline scripts in een extern bestand. Als je variabelen nodig hebt, kun je die direct op de pagina toevoegen in een inline script, maar de belangrijkste van jQuery afhankelijke functies zouden in een extern bestand moeten staan dat ook is deferred.

Timing problemen

Een ander, minder vaak voorkomend probleem ontstaat door timing. Als jQuery niet is deferred, wordt het uitgevoerd voor de DOMContentLoaded en load event. Je kunt hierop vertrouwen. Als het is deferred, kan een script worden uitgevoerd na het DOMContentLoaded event. Dit betekent dat als je een event handler hebt gekoppeld aan het DOMContentLoaded event, deze niet betrouwbaar zal worden uitgevoerd. Als je tegen dit soort problemen aanloopt, probeer dan de trigger te wijzigen of de functie te wrappen in jQuery().

Over WordPress sites gemonitord door CoreDash heen, hebben sites die alle scripts deferren inclusief jQuery een p75 LCP van 2,1 seconden vergeleken met 3,4 seconden op sites die jQuery synchroon laden. Dat is een verbetering van 38% door één enkele configuratiewijziging. Na het deployen van je wijzigingen, verifieer de verbetering met RUM. Lighthouse scores vertellen je of het defer attribuut werkt, maar veldgegevens van echte bezoekers vertellen je of je LCP daadwerkelijk is verbeterd. Voor meer informatie over hoe scriptplaatsing de Core Web Vitals beïnvloedt, zie de Core Web Vitals WordPress gids. En zoals altijd, als je vastzit, aarzel dan niet om contact met mij op te nemen!