Différer jQuery dans WordPress

Un guide pour différer jQuery dans WordPress

Salutations, chers amateurs de performance ! Je suis ravi de partager des idées sur l'optimisation de votre site WordPress et l'amélioration des Core Web Vitals. Aujourd'hui, je vais vous montrer comment différer le chargement de jQuery, améliorant ainsi la vitesse de votre site web et, par conséquent, l'expérience utilisateur.

Pourquoi différer jQuery ?

jQuery, une bibliothèque JavaScript robuste, est sans aucun doute un outil puissant, mais son chargement synchrone peut parfois ralentir le chargement initial de la page. De nombreux thèmes disponibles sur les différentes places de marché dépendent de jQuery. Bien que jQuery soit conçu pour être différé, malheureusement, de nombreux thèmes ne le font pas. 

Alors, quel est le principal avantage de différer jQuery, pourriez-vous demander ? Eh bien, jetez un œil à cette image ci-dessous. Elle montre la différence d'analyse HTML entre les scripts normaux, différés et asynchrones. Si jQuery n'est pas différé, le navigateur bloquera l'analyse HTML jusqu'à ce que le script ait été exécuté. Si jQuery est différé, le navigateur n'aura pas à bloquer l'analyseur. Et cela vous fera gagner beaucoup de temps, surtout en ce qui concerne le Largest Contentful Paint. 

La raison pour laquelle les constructions de thèmes ne diffèrent pas jQuery par défaut est due à l'héritage. Certains plugins ajoutent des scripts (en ligne) qui dépendent de jQuery. Si jQuery est chargé en différé mais que le script qui a besoin de jQuery ne l'est pas, il y aura un conflit (et une erreur)

Méthode 1 : Différer manuellement jQuery

Étape 1 : Identifier l'inclusion de jQuery dans votre thème

Pour lancer le processus d'optimisation, nous devons identifier où jQuery est inclus dans votre thème WordPress. On le trouve couramment dans le fichier functions.php du thème ou directement dans le fichier header.php. Recherchez des lignes ressemblant à :

wp_enqueue_script('jquery');    

Nous savons maintenant que le handle pour jQuery s'appelle 'jquery'. Comprendre où jQuery est mis en file d'attente jette les bases de notre parcours d'optimisation.

Étape 2 : Créer un thème enfant pour une stabilité à long terme

Avant d'apporter des modifications, envisagez de créer un thème enfant pour protéger vos modifications contre les futures mises à jour. Cela garantit que votre travail acharné ne sera pas écrasé lorsque le thème parent recevra une mise à jour. Créer un thème enfant est un peu comme ajouter une couche d'armure supplémentaire à la structure de votre site.

Étape 3 : Mettre jQuery en file d'attente avec l'attribut 'defer'

Maintenant, plongeons dans les détails techniques. Dans le fichier functions.php de votre thème enfant, ajoutez le code suivant et modifiez-le pour qu'il corresponde à l'emplacement de votre fichier jQuery et à votre handle. Nous allons utiliser la nouvelle stratégie defer

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);

Décomposons cela :

• wp_deregister_script('jquery'): Désenregistre le script jQuery par défaut.
• wp_register_script('jquery', '/js/jquery/jquery.js', [], null, [ 'strategy'  => 'defer']);
: Enregistre jQuery avec la stratégie 'defer'.
• wp_enqueue_script('jquery'): Met en file d'attente le script jQuery modifié.

Et voilà : vous avez maintenant réussi à différer jQuery sur votre site WordPress. Et en prime, vous savez maintenant comment différer n'importe quel script car le processus est exactement le même !

Méthode 2 : utiliser un plugin

Des plugins comme WP Core Web Vitals rendent très facile le fait de différer jQuery, et de nombreux plugins peuvent même gérer les complications qui peuvent en découler en différant également les dépendances et en effectuant quelques autres astuces comme la mise en cache des événements jQuery jusqu'à ce que jQuery ait été exécuté.

Méthode 3 : CloudFlare

Une autre façon très simple de différer jQuery est d'utiliser le Rocket Loader de CloudFlare. Rocket Loader fonctionne en désactivant tous vos scripts pendant le chargement de la page, puis en les réactivant rapidement. Cette astuce imite le fait de différer les scripts mais elle a quelques inconvénients.

• CloudFlare Rocket Loader casse une fonctionnalité du navigateur appelée le preload scanner. Avec Rocket Loader, les scripts ne sont pas préchargés et il peut falloir un peu plus de temps pour que vos scripts soient téléchargés et exécutés.
• CloudFlare Rocket Loader est un instrument assez grossier. Il ne fait pas la distinction entre les scripts importants, moins importants et ceux qu'il est bon d'avoir. Il diffère tout simplement tout sans aucune considération et vous laisse sans aucun contrôle sur le timing des scripts.
  

Testez, Testez, Testez !

Après avoir implémenté ces changements, testez minutieusement la fonctionnalité de votre site web. Portez une attention particulière aux éléments interactifs, aux animations et aux fonctionnalités dépendantes de jQuery pour vous assurer qu'ils fonctionnent sans accroc. Des tests rigoureux garantissent que l'optimisation n'introduit pas par inadvertance des problèmes dans votre interface utilisateur.

Dépannage des problèmes

Si vous rencontrez des problèmes, ceux-ci tomberont probablement dans l'une des 3 catégories. La plupart des problèmes peuvent être trouvés en ouvrant l'inspecteur et en naviguant vers l'onglet console. S'il y a des problèmes, vous trouverez probablement des avertissements qui ressemblent à ceci et indiquent 'Uncaught ReferenceError: jQuery is not defined'

Les corriger n'est pas si difficile. À côté de l'erreur se trouve une référence à l'origine de l'erreur. S'il s'agit de (index), cela provient très probablement d'un script en ligne. Si c'est un autre fichier, c'est soit un problème de timing, soit vous avez oublié de différer ce fichier également.

Scripts dépendants

Scripts en ligne

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

• Utilisez l'astuce type="module". Le plus récent <script type="module"> différera également le JavaScript en ligne.
• Placez les scripts en ligne dans un fichier externe. Si vous avez besoin de variables, vous pouvez les ajouter dans un script en ligne directement sur la page, mais les principales fonctions dépendantes de jQuery devraient être dans un fichier externe qui est également différé. 

Problèmes de timing

Un autre problème, moins courant, provient du timing. Si jQuery n'est pas différé, il s'exécutera avant le DOMContentLoaded et l'événement load. Vous pouvez en dépendre. S'il est différé, un script peut être exécuté après l'événement DOMContentLoaded. Cela signifie que si vous avez attaché un gestionnaire d'événements à l'événement DOMContentLoaded, il ne sera pas exécuté de manière fiable. Si vous rencontrez des problèmes comme ceux-ci, essayez de changer le déclencheur ou d'envelopper la fonction dans jQuery(). 

Et comme toujours, si vous êtes bloqué, n'hésitez pas à m'engager pour une session de 2 heures !