Defer jQuery in WordPress

Een gids voor het deferren van jQuery in WordPress

Gegroet, mede prestatieliefhebbers! Ik ben enthousiast om inzichten te delen over het optimaliseren van uw WordPress-site en het verbeteren van de Core Web Vitals. Vandaag zal ik u laten zien hoe u het laden van jQuery kunt uitstellen (defer), waardoor de snelheid van uw website en bijgevolg de gebruikerservaring wordt verbeterd.

Waarom jQuery deferren?

jQuery, een robuuste JavaScript-bibliotheek, is ongetwijfeld een krachtig hulpmiddel, maar het synchroon laden ervan kan soms de initiële laadtijd van de pagina vertragen. Veel thema's die beschikbaar zijn op de verschillende marktplaatsen zijn afhankelijk van jQuery. Niet jQuery is gebouwd om te worden deferred, maar helaas deferren veel thema's jQuery niet. 

Dus wat is het belangrijkste voordeel van het deferren van jQuery vraagt u zich misschien af? Kijk eens naar deze afbeelding hieronder. Het toont het verschil in HTML-parsing tussen normale, deferred en async scripts. Als jQuery niet deferred is, zal de browser HTML-parsing blokkeren totdat het script is uitgevoerd. Als jQuery deferred is, hoeft de browser de parser niet te blokkeren. En dit zal u een heleboel tijd besparen, vooral als het gaat om de Largest Contentful Paint. 

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

Methode 1: Handmatig jQuery Deferren

Stap 1: Identificeren van jQuery-opname in uw thema

Om het optimalisatieproces te starten, moeten we precies bepalen waar jQuery in uw WordPress-thema is opgenomen. Meestal te vinden in het functions.php-bestand van het thema of direct in het header.php-bestand, zoek naar regels die lijken op:

wp_enqueue_script('jquery');    

We weten nu dat de handle voor jQuery 'jquery' heet. Begrijpen waar jQuery enqueued is, legt de basis voor onze optimalisatiereis.

Stap 2: Een Child Theme maken voor stabiliteit op lange termijn

Voordat u wijzigingen aanbrengt, overweeg dan om een child theme te maken om uw wijzigingen te beschermen tegen toekomstige updates. Dit zorgt ervoor dat uw harde werk niet wordt overschreven wanneer het ouderthema een update ontvangt. Een child theme maken is een beetje als het toevoegen van een extra laag bepantsering aan de structuur van uw site.

Stap 3: jQuery enqueuen met het 'defer' attribuut

Laten we nu in de technische details duiken. Voeg in het functions.php-bestand van uw child theme de volgende code toe en pas deze aan zodat deze overeenkomt met uw jQuery bestandslocatie en handle. We gaan de nieuwe defer strategie gebruiken

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'): Zet het gewijzigde jQuery script in de wachtrij.

Et voila: u heeft nu succesvol jQuery deferred op uw WordPress-site. En als bonus weet u nu hoe u elk script kunt deferren omdat het proces precies hetzelfde is!

Methode 2: gebruik een plugin

Plugins zoals WP Core Web Vitals maken het super eenvoudig om jQuery te deferren en veel plugins kunnen zelfs de complicaties die eruit kunnen voortvloeien aan door ook afhankelijkheden te deferren en een paar andere trucs 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 uw scripts uit te schakelen tijdens het laden van de pagina en ze vervolgens snel weer in te schakelen. Deze trucs bootsen deferring scripts na, maar het heeft een paar nadelen

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

Test, Test, Test!

Na het implementeren van deze wijzigingen, test de functionaliteit van uw website grondig. Let goed op interactieve elementen, animaties en functies die afhankelijk zijn van jQuery om ervoor te zorgen dat ze naadloos functioneren. Grondig testen garandeert dat de optimalisatie niet onbedoeld haperingen in uw gebruikersinterface introduceert.

Problemen oplossen

Als u tegen problemen aanloopt, vallen die waarschijnlijk in een van de 3 categorieën. De meeste problemen kunnen worden gevonden door de inspector te openen en naar het console tabblad te navigeren. Als er problemen zijn, zult u waarschijnlijk waarschuwingen vinden die er ongeveer zo uitzien en lezen 'Uncaught ReferenceError: jQuery is not defined'

Ze oplossen is niet zo moeilijk. Naast de fout staat een verwijzing naar de oorsprong van de fout. Als het (index) is, komt het hoogstwaarschijnlijk van een inline script. Als het een ander bestand is, is het ofwel een timingprobleem of u bent vergeten dat bestand ook te deferren.

Afhankelijke scripts

Inline Scripts

$(function(){
 // doe iets
})

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

Timing problemen

Een ander, minder vaak voorkomend probleem komt voort uit timing. Als jQuery niet deferred is, zal het uitvoeren vóór de  DOMContentLoaded en load event. U kunt hierop rekenen. Als het deferred is, kan een script worden uitgevoerd na het DOMContentLoaded event. Dit betekent dat als u een event handler heeft gekoppeld aan het DOMContentLoaded event, deze niet betrouwbaar zal worden uitgevoerd. Als u tegen dit soort problemen aanloopt, probeer dan de trigger te wijzigen of de functie in jQuery() te wrappen. 

En zoals altijd, als u vastloopt, aarzel dan niet om mij in te huren voor een sessie van 2 uur!