{"id":32097,"date":"2019-10-01T06:11:09","date_gmt":"2019-10-01T13:11:09","guid":{"rendered":"https:\/\/kinqsta.com\/?p=54531"},"modified":"2023-09-14T16:20:51","modified_gmt":"2023-09-14T15:20:51","slug":"defer-parsing-of-javascript","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/fr\/blog\/defer-parsing-of-javascript\/","title":{"rendered":"Comment corriger Defer Parsing of Javascript dans WordPress (4 m\u00e9thodes)"},"content":{"rendered":"

Avez-vous test\u00e9 votre site WordPress dans un outil de test de performances<\/a> seulement pour avoir rencontr\u00e9 un avertissement\u00a0Defer Parsing of Javascript dans WordPress ?<\/p>\n

La mise en \u0153uvre 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 \u00eatre un peu difficile \u00e0 comprendre, c’est pourquoi nous allons vous expliquer exactement ce que cela signifie Defer Parsing of Javascript et comment vous pouvez impl\u00e9menter ce changement sur votre site WordPress.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Vous pr\u00e9f\u00e9rez regarder la version vid\u00e9o<\/a> ?<\/strong>
\n<\/kinsta-video><\/p>\n

<\/a>Qu’est-ce que cela signifie Defer Parsing of Javascript dans WordPress ?<\/h2>\n

Si vous avez d\u00e9j\u00e0 test\u00e9 votre site WordPress dans Google PageSpeed Insights<\/a>, GTmetrix, ou d’autres outils de test de vitesse de page, vous avez probablement rencontr\u00e9 l’avertissement Defer Parsing of Javascript.<\/p>\n

Mais… qu’est-ce que \u00e7a veut dire ? Et pourquoi est-ce un facteur de performance important ?<\/p>\n

En gros, quand quelqu’un visite votre site WordPress<\/a>, le serveur de votre site livre le contenu HTML de votre site au navigateur de ce visiteur.<\/p>\n

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\u00e9pla\u00e7ant de haut en bas, il trouve du JavaScript, il arr\u00eatera d\u2019afficher le reste de la page jusqu’\u00e0 ce qu’il puisse r\u00e9cup\u00e9rer et analyser le fichier JavaScript.<\/p>\n

Il le fera pour chaque script qu’il trouve, ce qui peut avoir un effet n\u00e9gatif sur le temps de chargement des pages de votre site car le visiteur doit regarder un \u00e9cran vide pendant que son navigateur t\u00e9l\u00e9charge et analyse tout le JavaScript.<\/p>\n

Si un certain script n’est pas n\u00e9cessaire au fonctionnement de base de votre site (au moins au chargement de la page initiale<\/em>), vous ne voulez pas qu’il vous emp\u00eache de charger des parties plus importantes de votre site, c’est pourquoi ces outils de test de vitesse de page<\/a> vous disent toujours Defer Parsing of Javascript.<\/p>\n

Qu’est-ce que cela signifie Defer Parsing of Javascript ?<\/p>\n

Essentiellement, votre site dira aux navigateurs des visiteurs d’attendre pour t\u00e9l\u00e9charger et\/ou analyser le JavaScript jusqu’\u00e0 ce que le contenu principal de votre site ait fini de se charger. \u00c0 ce stade, les visiteurs peuvent d\u00e9j\u00e0 voir votre page et interagir, de sorte que les temps d’attente pour t\u00e9l\u00e9charger et analyser le JavaScript n’ont plus un tel effet n\u00e9gatif.<\/p>\n

En acc\u00e9l\u00e9rant les temps de chargement de votre contenu<\/a>, vous rendez Google heureux et cr\u00e9ez une exp\u00e9rience meilleure et plus rapide pour vos visiteurs.<\/p>\n

<\/a>Comment dire si vous avez besoin de \u201cdiff\u00e9rer l\u2019analyse de JavaScript\u201d<\/h2>\n

Pour tester si votre site WordPress a besoin de \u201cdiff\u00e9rer l’analyse de JavaScript\u201d, vous pouvez ex\u00e9cuter votre site via GTmetrix<\/a>.<\/p>\n

GTmetrix vous donnera une note et vous indiquera \u00e9galement les scripts sp\u00e9cifiques qui doivent \u00eatre diff\u00e9r\u00e9s :<\/p>\n

\"Test
Test pour diff\u00e9rer l’analyse du JavaScript dans GTmetrix<\/figcaption><\/figure>\n

<\/a>Les diff\u00e9rentes m\u00e9thodes pour corriger l’avertissement Defer Parsing of Javascript<\/h2>\n

Il y a plusieurs fa\u00e7ons de corriger l’avertissement Defer Parsing of Javascript. Tout d’abord, il y a deux attributs<\/a> que vous pouvez ajouter \u00e0 vos scripts :<\/p>\n

    \n
  1. Async<\/li>\n
  2. Defer<\/li>\n<\/ol>\n

    Ces deux attributs permettent aux navigateurs des visiteurs de t\u00e9l\u00e9charger JavaScript sans interrompre l’analyse HTML. Cependant, la diff\u00e9rence est que si async<\/strong> n’interrompt pas l’analyse HTML pour r\u00e9cup\u00e9rer le script (comme le ferait le comportement par d\u00e9faut), il interrompt l’analyseur HTML pour ex\u00e9cuter le script une fois qu’il a \u00e9t\u00e9 r\u00e9cup\u00e9r\u00e9.<\/p>\n

    Avec defer<\/strong>, les navigateurs des visiteurs continueront de t\u00e9l\u00e9charger les scripts tout en analysant le HTML, mais ils attendront que l’analyse du script soit termin\u00e9e avant de l’analyser.<\/p>\n

    Ce graphique de Growing with the Web<\/a> explique tr\u00e8s bien la diff\u00e9rence :<\/p>\n

    \"Graphique
    Graphique expliquant async par rapport \u00e0 defer<\/figcaption><\/figure>\n

    Une autre option, recommand\u00e9e par Patrick Sexton de Varvy, utilise un script pour appeler un fichier JavaScript externe seulement apr\u00e8s que le chargement de la page initiale soit termin\u00e9. Cela signifie que les navigateurs des visiteurs ne t\u00e9l\u00e9chargeront ou n’ex\u00e9cuteront aucun JavaScript jusqu’\u00e0 ce que le chargement de la page initiale soit termin\u00e9.<\/p>\n

    Enfin, une autre approche que vous verrez est de simplement d\u00e9placer votre JavaScript vers le bas de la page. Cependant, cette m\u00e9thode n’est pas une bonne solution car, m\u00eame si votre page sera visible plus t\u00f4t, les navigateurs des visiteurs afficheront toujours la page comme en\u00a0 chargement jusqu’\u00e0 ce que tous les scripts soient termin\u00e9s. Cela pourrait emp\u00eacher certains visiteurs d’interagir avec votre page parce qu’ils pensent que le contenu n’est pas enti\u00e8rement charg\u00e9.<\/p>\n

    <\/a>Comment diff\u00e9rer l’analyse de JavaScript dans WordPress (4 m\u00e9thodes)<\/h2>\n

    Pour diff\u00e9rer l’analyse de JavaScript dans WordPress, il y a trois routes principales que vous pouvez prendre :<\/p>\n