Différer jQuery dans WordPress

Pourquoi différer jQuery ?

jQuery est toujours inclus avec chaque installation WordPress et la plupart des thèmes le chargent sans le différer. Cela signifie qu'il bloque l'analyse HTML à chaque chargement de page. Voici comment corriger cela.

Dernière révision par Arjen Karel en mars 2026

jQuery est présent sur 74 % de toutes les pages web selon le Web Almanac 2024, en grande partie à cause de WordPress. Pourtant, seulement 47 % des pages mobiles utilisent l'attribut defer sur un script quelconque. Cela signifie que la majorité des sites WordPress chargent toujours jQuery de manière synchrone, bloquant l'analyse HTML et retardant chaque métrique de rendu sur la page, en particulier le Largest Contentful Paint.

Jetez un œil à l'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'a pas à bloquer l'analyseur. Et cela vous fera gagner énormément de temps. Pour une comparaison complète, voir async vs defer et comment cela affecte les Core Web Vitals.

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

Méthode 1 : Différer manuellement jQuery

Étape 1 : Trouver où jQuery est mis en file d'attente

Tout d'abord, trouvez où jQuery est inclus dans votre thème WordPress. C'est généralement dans le fichier functions.php du thème ou directement dans le fichier header.php. Cherchez des lignes comme :

wp_enqueue_script('jquery');    

Nous savons maintenant que le handle pour jQuery s'appelle 'jquery'.

Étape 2 : Utiliser un thème enfant

Si vous modifiez un thème parent, créez d'abord un thème enfant. Sinon, vos modifications seront écrasées lors de la prochaine mise à jour du thème.

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

Dans le fichier functions.php de votre thème enfant, ajoutez le code suivant et modifiez-le pour qu'il corresponde à l'emplacement et au handle de votre fichier jQuery. Nous utilisons la stratégie de report de WordPress 6.3 :

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 différé jQuery avec succès 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 ! Pour plus de techniques de report au-delà de WordPress, voir 16 méthodes pour différer JavaScript.

Faites attention aux scripts en ligne. WordPress 6.3 supprimera silencieusement la stratégie de report si votre script a des scripts en ligne attachés dans la position after via wp_add_inline_script(). Si vous différez jQuery mais qu'il se charge toujours de manière synchrone, vérifiez si un plugin ajoute des scripts en ligne au handle de jQuery.

Méthode 2 : utiliser un plugin

Les plugins comme WP Core Web Vitals rendent extrêmement facile le report de 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

Un autre moyen 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 report des scripts mais présente quelques inconvénients :

• CloudFlare Rocket Loader casse une fonctionnalité du navigateur appelée le scanner de préchargement. 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 brutal. Il ne fait pas de distinction entre les scripts importants, moins importants et ceux qui sont juste agréables à avoir. Il diffère simplement tout sans aucune considération et vous laisse sans aucun contrôle sur le timing des scripts.

Les sites WordPress ont un taux de réussite aux Core Web Vitals de 45 % sur mobile selon le Web Almanac 2025, le LCP étant la métrique la plus faible à seulement 53 %. Le rendu bloquant de jQuery en est l'une des causes les plus courantes. Le différer ne corrigera pas tout, mais cela supprime l'un des plus grands obstacles qui empêchent votre site d'obtenir un score LCP satisfaisant.

Testez vos modifications

Après avoir différé jQuery, vérifiez votre site. Ouvrez la console du navigateur et cherchez les erreurs. Cliquez sur vos menus, curseurs, formulaires, et tout ce qui utilise JavaScript. Si quelque chose casse, la section de dépannage ci-dessous vous aidera à le réparer.

Dépannage

Si vous rencontrez des problèmes, ils appartiendront probablement à 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 de la 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 à faire. À 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. S'il s'agit d'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 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 doivent se trouver 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 les événements DOMContentLoaded et load. Vous pouvez vous y fier. S'il est différé, un script pourrait être exécuté après l'événement DOMContentLoaded. Cela signifie que si vous avez attaché un gestionnaire d'événements sur l'événement DOMContentLoaded, il ne sera pas exécuté de manière fiable. Si vous rencontrez des problèmes de ce type, essayez de changer le déclencheur ou d'envelopper la fonction dans jQuery().

Sur les sites WordPress surveillés par CoreDash, les sites qui diffèrent tous les scripts y compris jQuery ont un LCP au 75e centile de 2,1 secondes contre 3,4 secondes sur les sites qui chargent jQuery de manière synchrone. C'est une amélioration de 38 % à partir d'un seul changement de configuration. Après avoir déployé vos modifications, vérifiez l'amélioration avec le Real User Monitoring. Les scores Lighthouse vous indiquent si l'attribut defer fonctionne, mais les données de terrain des vrais visiteurs vous indiquent si votre LCP s'est réellement amélioré. Pour en savoir plus sur la façon dont le placement des scripts affecte les Core Web Vitals, consultez le guide WordPress des Core Web Vitals. Et comme toujours, si vous êtes bloqué, n'hésitez pas à me contacter !