Scripts JavaScript render-blocking WordPress : identifier et supprimer les ressources bloquantes
Un script JavaScript render-blocking empêche le navigateur d'afficher quoi que ce soit tant qu'il n'est pas téléchargé et exécuté. Sur WordPress, chaque plugin actif ajoute potentiellement des scripts bloquants. Ce guide explique comment identifier les scripts problématiques avec DevTools, les marquer defer ou async, et utiliser les plugins de cache pour automatiser la correction.
Le message « Éliminer les ressources qui bloquent le rendu » de PageSpeed Insights est l’un des plus fréquents sur WordPress. Il signifie que des fichiers JavaScript (ou CSS) dans votre <head> retardent l’affichage de la page. Ce guide vous donne les outils et la méthode pour les éliminer.
Pourquoi un script bloque-t-il le rendu ?
Quand le navigateur parse votre HTML et rencontre une balise <script src="..."> sans attribut spécial, il :
- Arrête de parser le HTML
- Télécharge le script
- Exécute le script
- Reprend le parsing du HTML
Pendant les étapes 1 à 4, l’écran reste blanc. Si votre script jQuery.min.js met 200 ms à télécharger et 50 ms à s’exécuter, vous avez 250 ms de blanc avant le moindre pixel affiché.
Identifier les scripts render-blocking
Méthode 1 : PageSpeed Insights
Lancez un test sur pagespeed.web.dev → cherchez « Éliminer les ressources qui bloquent le rendu ». L’outil liste chaque fichier problématique avec le temps potentiellement économisé.
Méthode 2 : Chrome DevTools Coverage
F12 → Menu ⋮ → Plus d’outils → Coverage → cliquez l’enregistrement → rechargez la page. L’outil montre le % de code non utilisé dans chaque fichier. Un script à 80 % de code non utilisé est un candidat au chargement conditionnel.
Méthode 3 : onglet Network avec priorités
F12 → Network → cliquez droit sur les colonnes → cochez « Priority ». Triez par priorité décroissante : les scripts « High » chargés avant le rendu sont vos suspects.
Les 3 attributs qui changent tout : defer, async, type=module
| Attribut | Téléchargement | Exécution | Ordre garanti |
|---|---|---|---|
| (aucun) | Bloquant | Immédiate | Oui |
| async | Parallèle | Dès disponible | Non |
| defer | Parallèle | Après parsing HTML | Oui |
| type=module | Parallèle | Après parsing HTML | Oui |
Règle générale : utilisez defer pour tous vos scripts WordPress. L’ordre d’exécution est préservé (important pour jQuery et ses dépendances) et le rendu n’est plus bloqué.
Ajouter defer aux scripts WordPress via functions.php
WordPress enregistre tous les scripts via wp_enqueue_script(). Pour ajouter defer à l’output HTML, utilisez le filtre script_loader_tag :
// functions.php — Ajouter defer à tous les scripts non critiques
add_filter('script_loader_tag', function($tag, $handle, $src) {
// Scripts à NE PAS différer (critique, inline, conditionnels)
$exclude = ['jquery-core', 'jquery-migrate', 'wp-includes'];
foreach ($exclude as $ex) {
if (strpos($handle, $ex) !== false) return $tag;
}
// Ne pas toucher aux scripts déjà async/defer
if (strpos($tag, 'defer') !== false || strpos($tag, 'async') !== false) {
return $tag;
}
return str_replace(' src=', ' defer src=', $tag);
}, 10, 3);Attention : tester après chaque modification. Certains scripts ont besoin de s’exécuter dans un ordre précis (jQuery doit être chargé avant ses plugins).
Gérer jQuery : defer ou supprimer ?
jQuery est chargé par défaut dans le <head> sur WordPress. Deux options :
Option A : passer jQuery en defer
Efficace si votre thème et vos plugins dépendent tous de jQuery. Ajoutez ce code dans functions.php :
add_filter('script_loader_tag', function($tag, $handle) {
if ($handle === 'jquery') {
return str_replace('<script ', '<script defer ', $tag);
}
return $tag;
}, 10, 2);Option B : supprimer jQuery et utiliser du Vanilla JS
Si votre thème custom n’utilise pas jQuery, désactivez-le :
add_action('wp_enqueue_scripts', function() {
if (!is_admin()) {
wp_dequeue_script('jquery');
}
});Économie : 90 ko de JS et une Long Task éliminée. Vérifiez d’abord que vos plugins (WooCommerce, Contact Form 7, etc.) ne nécessitent pas jQuery.
Automatiser avec les plugins de performance
Si vous ne voulez pas toucher au code, les plugins de performance gèrent le defer automatiquement :
- WP Rocket : option « Chargement différé du JavaScript » en un clic, avec liste d’exclusion intuitive
- LiteSpeed Cache : options JS Defer et JS Combine dans l’onglet Optimisation
- Perfmatters : contrôle granulaire script par script, par page
- Autoptimize : combine + defer les JS, gratuit
Notre équipe configure ces plugins dans le cadre de notre service d’audit de site web.
Questions fréquentes sur les scripts render-blocking
Tous les scripts WordPress peuvent-ils être passés en defer ?
Non. Les scripts qui doivent s’exécuter pendant le parsing (polyfills IE, scripts de détection de navigateur) ne peuvent pas être différés. Les scripts inline (directement dans le HTML sans src) ne peuvent pas avoir l’attribut defer. Testez systématiquement après chaque modification.
Quelle est la différence entre defer et « charger les scripts en pied de page » ?
« Pied de page » signifie que le script est inséré avant </body> — le HTML est parsé avant que le script soit rencontré, donc il ne bloque pas le rendu. C’est le deuxième paramètre de wp_enqueue_script() sur WordPress (true = footer). Defer est légèrement plus efficace car le téléchargement commence en parallèle dès la découverte du script.
Mes scripts sont déjà dans le footer mais PageSpeed dit qu’ils bloquent le rendu ?
PageSpeed Insights peut signaler des scripts dans le footer comme render-blocking s’ils retardent le LCP ou le FCP. Le critère n’est pas uniquement la position dans le HTML, mais l’impact réel sur les métriques de rendu. Vérifiez si le script est découvert via un autre mécanisme (chargé dynamiquement par un autre script).