Comment différer JavaScript dans WordPress pour améliorer la vitesse de la page
Qu'est-ce que le JavaScript bloquant le rendu ?
Lorsqu'un navigateur rencontre un fichier JavaScript dans le HTML <head>, il interrompt le rendu pour télécharger, analyser et exécuter le script. Cela retarde la vitesse à laquelle la page devient visible pour l'utilisateur.
Sources courantes de JS bloquant le rendu :
- Scripts de thème et de plugin (comme des curseurs, des fenêtres contextuelles, des animations)
- Scripts externes (Google Analytics, Facebook Pixel, etc.)
Quelle est la différence entre reporter et asynchrone?
asynchroneTélécharge le script sans bloquer l'analyse HTML. L'exécution est immédiate après le téléchargement. Des conflits peuvent survenir si l'ordre est important.reporter:Télécharge également sans blocage, mais retarde l'exécution jusqu'à ce que l'analyse HTML soit terminée — plus sûr et meilleur pour les scripts dépendants.
Comment identifier un JavaScript problématique
Utilisez ces outils pour voir quels scripts bloquent le rendu :
- Informations sur la vitesse des pages
- Chrome DevTools → Onglet Lighthouse
- Chrome DevTools → Réseau → Filtrer par JS
Concentrez-vous sur le chargement des fichiers JS dans le <head> et marqué comme « bloquant le rendu ».
Comment différer JavaScript dans WordPress
Option 1 : Ajouter un report avec du code (sans plugin)
Ajoutez ce code au thème de votre enfant fonctions.php postuler reporter à tous les scripts sauf jQuery :
fonction add_defer_attribute($tag, $handle) {
// Ignorer jQuery
si ('jquery-core' === $handle || 'jquery' === $handle) {
renvoyer $tag;
}
retourner str_replace(' src', ' reporter src', $tag);
}
add_filter('script_loader_tag', 'add_defer_attribute', 10, 2);
Option 2 : Utiliser Async
Similaire à différer, vous pouvez utiliser asynchrone À la place, remplacez simplement « defer » par « async » dans le code ci-dessus. Attention : certains scripts dépendent de l'ordre de chargement et peuvent échouer.
Utilisation des plugins (avec prudence)
Si vous ne souhaitez pas toucher au code, ces plugins vous permettent de différer ou de synchroniser du JS :
- **WP Rocket** – Interface simple, fonctionne bien, mais payante.
- **Asset CleanUp** – Vous permet de différer ou de désactiver manuellement des scripts spécifiques.
- **Flying Scripts** – Léger et axé sur le report du JS après un délai.
⚠️ Testez toujours après l'activation : différer le mauvais script peut endommager la mise en page ou les fonctionnalités de votre site.
Comment tester l'impact
- Utilisez PageSpeed Insights ou GTmetrix avant/après
- Ouvrez votre site dans une fenêtre de navigation privée pour repérer tout problème visible
- Utilisez DevTools → onglet Réseau → vérifiez l'ordre et le timing de chargement
Conclusion : différer stratégiquement
Différer JavaScript est l'une des techniques les plus simples et les plus efficaces pour accélérer votre site WordPress. Commencez par des scripts sûrs, évitez de différer jQuery (sauf si vous l'intégrez) et effectuez des tests approfondis.
Envie d'aller plus loin ? Demandez un audit de performance gratuit auprès de SpeedWP Pro et nous vous aiderons à optimiser vos scripts et votre stratégie de chargement pour des résultats optimaux.