Avez-vous testé votre site WordPress dans un outil de test de performances seulement pour avoir rencontré un avertissement Defer Parsing of Javascript dans WordPress ?
La mise en œuvre de ce changement peut avoir un impact positif sur les temps de chargement des pages de votre site, en particulier pour les visiteurs mobiles. Mais l’avertissement peut être un peu difficile à comprendre, c’est pourquoi nous allons vous expliquer exactement ce que cela signifie Defer Parsing of Javascript et comment vous pouvez implémenter ce changement sur votre site WordPress.
Vous préférez regarder la version vidéo ?
Qu’est-ce que cela signifie Defer Parsing of Javascript dans WordPress ?
Si vous avez déjà testé votre site WordPress dans Google PageSpeed Insights, GTmetrix, ou d’autres outils de test de vitesse de page, vous avez probablement rencontré l’avertissement Defer Parsing of Javascript.
Mais… qu’est-ce que ça veut dire ? Et pourquoi est-ce un facteur de performance important ?
En gros, quand quelqu’un visite votre site WordPress, le serveur de votre site livre le contenu HTML de votre site au navigateur de ce visiteur.
Le navigateur du visiteur commence alors en haut de la page et passe en revue le code pour afficher votre site. Si, en se déplaçant de haut en bas, il trouve du JavaScript, il arrêtera d’afficher le reste de la page jusqu’à ce qu’il puisse récupérer et analyser le fichier JavaScript.
Il le fera pour chaque script qu’il trouve, ce qui peut avoir un effet négatif sur le temps de chargement des pages de votre site car le visiteur doit regarder un écran vide pendant que son navigateur télécharge et analyse tout le JavaScript.
Si un certain script n’est pas nécessaire au fonctionnement de base de votre site (au moins au chargement de la page initiale), vous ne voulez pas qu’il vous empêche de charger des parties plus importantes de votre site, c’est pourquoi ces outils de test de vitesse de page vous disent toujours Defer Parsing of Javascript.
Qu’est-ce que cela signifie Defer Parsing of Javascript ?
Essentiellement, votre site dira aux navigateurs des visiteurs d’attendre pour télécharger et/ou analyser le JavaScript jusqu’à ce que le contenu principal de votre site ait fini de se charger. À ce stade, les visiteurs peuvent déjà voir votre page et interagir, de sorte que les temps d’attente pour télécharger et analyser le JavaScript n’ont plus un tel effet négatif.
En accélérant les temps de chargement de votre contenu, vous rendez Google heureux et créez une expérience meilleure et plus rapide pour vos visiteurs.
Comment dire si vous avez besoin de “différer l’analyse de JavaScript”
Pour tester si votre site WordPress a besoin de “différer l’analyse de JavaScript”, vous pouvez exécuter votre site via GTmetrix.
GTmetrix vous donnera une note et vous indiquera également les scripts spécifiques qui doivent être différés :
Les différentes méthodes pour corriger l’avertissement Defer Parsing of Javascript
Il y a plusieurs façons de corriger l’avertissement Defer Parsing of Javascript. Tout d’abord, il y a deux attributs que vous pouvez ajouter à vos scripts :
- Async
- Defer
Ces deux attributs permettent aux navigateurs des visiteurs de télécharger JavaScript sans interrompre l’analyse HTML. Cependant, la différence est que si async n’interrompt pas l’analyse HTML pour récupérer le script (comme le ferait le comportement par défaut), il interrompt l’analyseur HTML pour exécuter le script une fois qu’il a été récupéré.
Avec defer, les navigateurs des visiteurs continueront de télécharger les scripts tout en analysant le HTML, mais ils attendront que l’analyse du script soit terminée avant de l’analyser.
Ce graphique de Growing with the Web explique très bien la différence :
Une autre option, recommandée par Patrick Sexton de Varvy, utilise un script pour appeler un fichier JavaScript externe seulement après que le chargement de la page initiale soit terminé. Cela signifie que les navigateurs des visiteurs ne téléchargeront ou n’exécuteront aucun JavaScript jusqu’à ce que le chargement de la page initiale soit terminé.
Enfin, une autre approche que vous verrez est de simplement déplacer votre JavaScript vers le bas de la page. Cependant, cette méthode n’est pas une bonne solution car, même si votre page sera visible plus tôt, les navigateurs des visiteurs afficheront toujours la page comme en chargement jusqu’à ce que tous les scripts soient terminés. Cela pourrait empêcher certains visiteurs d’interagir avec votre page parce qu’ils pensent que le contenu n’est pas entièrement chargé.
Comment différer l’analyse de JavaScript dans WordPress (4 méthodes)
Pour différer l’analyse de JavaScript dans WordPress, il y a trois routes principales que vous pouvez prendre :
- Extension – il existe d’excellentes extensions WordPress gratuites et payantes pour différer l’analyse JavaScript. Nous allons vous montrer comment faire avec deux extensions populaires.
- Méthode Varvy – si vous êtes technophile, vous pouvez éditer le code de votre site directement et utiliser l’extrait de code (snippet) de Varvy.
- Fichier functions.php – vous pouvez ajouter un extrait de code au fichier functions.php de votre thème enfant pour reporter automatiquement les scripts.
Vous pouvez cliquer ci-dessus pour passer directement à votre méthode préférée ou lire toutes les techniques pour trouver celle qui vous convient le mieux.
1. Extension gratuite Async JavaScript
Async JavaScript est une extension WordPress gratuite de Frank Goossens, le même gars derrière l’extension populaire Autoptimize.
Cela vous donne un moyen simple de différer l’analyse JavaScript en utilisant soit async, soit defer.
Pour commencer, vous pouvez installer et activer l’extension gratuite depuis WordPress.org. Ensuite, allez dans Réglages → Async JavaScript pour configurer l’extension.
En haut, vous pouvez activer la fonctionnalité de l’extension et choisir entre async et defer. Souvennez-vous :
- Async télécharge JavaScript tout en continuant d’analyser le HTML, mais interrompt ensuite l’analyse HTML pour exécuter le JavaScript.
- Defer télécharge JavaScript tout en continuant à analyser le HTML et attend de l’exécuter jusqu’à ce que l’analyse HTML soit terminée.
Plus bas, vous pouvez également choisir comment gérer jQuery. Beaucoup de thèmes et d’extensions dépendent fortement de jQuery, donc si vous essayez de différer l’analyse des scripts jQuery, vous risquez de casser certaines des fonctionnalités de base de votre site. L’approche la plus sûre est d’exclure jQuery, mais vous pouvez expérimenter avec defer. Assurez-vous simplement de tester votre site à fond.
Plus bas, vous pouvez également inclure ou exclure manuellement des scripts spécifiques à différer, y compris une fonction conviviale qui vous permet de cibler des thèmes ou extensions spécifiques qui sont actifs sur votre site :
2. Utilisez l’extension WP Rocket
Bien que nous n’autorisions pas la plupart des extensions de mise en cache chez Kinsta, nous avons autorisé l’extension WP Rocket parce qu’elle inclut une intégration construite pour bien jouer avec la mise en cache au niveau du serveur de Kinsta.
En plus d’un tas d’autres techniques d’optimisation des performances, WP Rocket peut vous aider à différer l’analyse de JavaScript dans l’onglet Optimisation de fichiers du tableau de bord de WP Rocket. Recherchez l’option Charger les fichiers JavaScript différés dans la section Fichiers JavaScript.
Comme l’extension JavaScript Async, WP Rocket vous permet également d’exclure jQuery pour éviter les problèmes avec le contenu de votre site :
3. Utiliser la méthode recommandée par Varvy (code)
Plus tôt, nous avons mentionné que Patrick Sexton de Varvy recommande d’utiliser un extrait de code qui attend de télécharger et d’exécuter JavaScript jusqu’à ce que votre site ait terminé le chargement de sa page initiale.
Vous pouvez implémenter cette méthode en ajustant l’extrait de code fourni par Varvy et en ajoutant ensuite le script à votre thème immédiatement avant la balise de fermeture du </body> .
Voici le code de Varvy :
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>Assurez-vous de remplacer « defer.js » par le nom/chemin du fichier JavaScript que vous souhaitez reporter. Ensuite, vous pouvez utiliser wp_footer hook pour injecter le code via le fichier functions.php de votre thème enfant.
Avec cette approche, vous envelopperiez le code de Varvy dans quelque chose comme ceci :
/**
Defer parsing of JavaScript with code snippet from Varvy
*/
add_action( 'wp_footer', 'my_footer_scripts' );
function my_footer_scripts(){
?>
REPLACE_WITH_VARVY_SCRIPT
<?php
}4. Différer le JavaScript via le fichier functions.php
Enfin, vous pouvez également ajouter l’attribut defer à vos fichiers JavaScript sans avoir besoin d’une extension en ajoutant l’extrait de code suivant à votre fichier functions.php :
function defer_parsing_of_js( $url ) {
if ( is_user_logged_in() ) return $url; //don't break WP Admin
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return str_replace( ' src', ' defer src', $url );
}
add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );Essentiellement, cet extrait demande à WordPress d’ajouter l’attribut defer à tous vos fichiers JavaScript sauf jQuery.
C’est rapide et facile, mais cela ne vous donne pas le niveau de contrôle granulaire qu’offre quelque chose comme l’extension JavaScript Async.
Résumé
Reporter l’analyse de JavaScript sur votre site WordPress est un facteur de performance important.
Une fois que vous avez utilisé l’une des méthodes ci-dessus pour corriger l’avertissement Defer Parsing of Javascript dans WordPress, nous vous recommandons de faire deux choses :
- Testez votre site pour vous assurer que le report de certains scripts n’a pas brisé le contenu. Encore une fois, cela peut arriver couramment avec jQuery, c’est pourquoi beaucoup d’outils vous permettent d’exclure jQuery.js. Cependant, cela peut aussi arriver avec d’autres scripts.
- Exécutez à nouveau votre site sur GTmetrix pour vous assurer que votre site diffère autant de scripts que possible (vous pourriez ne pas obtenir un score parfait si vous excluez jQuery – mais votre score devrait être meilleur).
Avez-vous des questions sur l’avertissement Defer Parsing of Javascript dans WordPress ? Demandez dans les commentaires !
Brian a une grande passion pour WordPress, l'utilise depuis plus de dix ans et développe même quelques plugins de qualité. Brian aime les blogs, les films et les randonnées. Connectez avec Brian sur Twitter.
Laisser un commentaire