Comment différer l'analyse de JavaScript dans WordPress

Que vous exploitiez un site Web WordPress ou tout autre site Web, vous devez savoir qu'une mesure critique des performances de votre site Web est la vitesse de la page.

Si vous utilisez l'un des outils de test des performances du site comme GTmetrix ou Google PageSpeed ​​Insights, cela peut vous suggérer de différer l'analyse de JavaScript.

Maintenant, l'expression peut être déroutante, mais elle joue un rôle important dans l'augmentation du temps de chargement de votre site Web.

Alors, que signifie l'analyse différée de JavaScript ?

Eh bien, nous en reparlerons plus tard en détail. En bref, différer l'analyse de JavaScript permet au navigateur de charger d'abord le contenu du site Web, sans attendre la fin du téléchargement des scripts.

Ce processus est essentiel car les navigateurs affichent et téléchargent JavaScript à partir du serveur avant de charger tout autre contenu de site Web. Cela nuit à la vitesse de votre site Web et interrompt le temps de chargement de votre page.

Heureusement, différer l'analyse de JavaScript est le meilleur moyen d'atténuer le problème.

J'ai expliqué les cinq méthodes éprouvées pour différer l'analyse de JavaScript dans WordPress dans cet article. Mais avant cela, obtenons plus d'informations sur la signification de la phrase et sachons si vous devez différer l'analyse de Javascript.

Commençons !

Qu'entendez-vous par différer l'analyse de JavaScript dans WordPress ?

Avant de comprendre la technique pour différer l'analyse JavaScript, vous devez savoir comment un navigateur Web restitue une page Web.

Pour commencer, lorsque votre navigateur envoie une requête à votre serveur Web, il reçoit la page, qui est téléchargée sous la forme d'un document HTML. Ce document HTML comprend du texte, du code qui affiche divers éléments DOM et différentes ressources telles que des images, des feuilles de style et des scripts.

Par défaut, le navigateur télécharge ces ressources dans une séquence. Le rendu de la page Web ne reprend qu'après le téléchargement de toutes les ressources. En outre, les ressources importantes affectent négativement le temps de chargement de votre page Web.

Chaque fois que votre navigateur parcourt le code pour rendre votre site Web, il arrête le rendu s'il trouve du JavaScript. Le processus est interrompu jusqu'à ce qu'il puisse récupérer et analyser le fichier JavaScript. Cela a un impact négatif sur la vitesse de votre site Web.

Heureusement, le processus de report de l'analyse de JavaScript avertit le navigateur d'attendre pour télécharger et analyser un fichier JavaScript jusqu'à la fin du chargement du contenu principal de votre site Web. À ce stade, vos visiteurs peuvent interagir avec votre site Web afin que le temps nécessaire pour télécharger et analyser JavaScript ne compromette plus le temps de chargement de votre site.

Comment savoir que vous devez différer l'analyse de JavaScript ?

Comme nous l'avons dit précédemment, les outils de test des performances du site tels que GTmetrix, Google PageSpeed ​​Insights ou WP Engine Speed ​​Tool vous suggèrent souvent de différer l'analyse de JavaScript lorsqu'ils analysent votre site Web.

GTmetrix, en particulier, vous fournit une note et répertorie les scripts spécifiques qui doivent être différés pour améliorer la vitesse de chargement de votre page.

Vous pouvez simplement entrer l'URL de votre site Web et attendre que l'outil l'évalue. Une fois l'évaluation terminée, accédez à l'onglet PageSpeed ​​et développez la section Différer l'analyse de JavaScript.

Cette section vous propose une liste de scripts non essentiels qui sont chargés pendant le processus de rendu, comme illustré dans l'exemple ci-dessous :

Attributs asynchrones ou différés

Il est essentiel de s'assurer que le téléchargement d'un script n'interfère pas avec le rendu de la page Web. Il y a deux façons de faire ça:

• Asynchrone
• Reporter

Vous pouvez inclure l'attribut async à la balise de script comme :

 <script src= “path/to/script” async> </script>

Cela indique à votre navigateur de charger le script de manière asynchrone. Pour être précis, le navigateur télécharge la ressource dès qu'il la rencontre dans le code mais procède à l'analyse du code HTML pendant que la ressource est encore en cours de téléchargement.

D'autre part, vous pouvez ajouter l'attribut defer à la balise de script comme :

 <script src= “path/to/script” defer> </script>

Cela indique à votre navigateur de ne pas télécharger les ressources tant qu'il n'a pas terminé l'analyse de la page Web. Une fois l'analyse et le rendu terminés, il télécharge la liste des scripts différés qu'il a rencontrés précédemment.

La principale différence entre les attributs asynchrones et différés réside dans le moment où les ressources sont téléchargées.

Si vous avez une application Web compacte, il est recommandé d'utiliser le report pour vous assurer que les interdépendances sont satisfaites. De plus, si vous n'avez que quelques scripts dans le chemin de rendu, aucune différence entre l'utilisation de ces deux attributs ne vous dérangerait.

Voici un exemple pour comprendre les attributs asynchrones et différés :

Disons que vous avez deux scripts JS1 et JS2.

La condition est que JS2 apparaisse dans le code après JS1, JS2 a une dépendance sur JS1, mais JS1 est plus grand que JS2.

Maintenant, si vous utilisez async , il est possible que JS2 termine le téléchargement avant que JS1 ne soit complètement téléchargé. Cela conduit à une erreur car JS2 est exécuté en l'absence de JS1.

D'autre part, si vous utilisez defer , JS1 et JS2 sont téléchargés séquentiellement, en s'assurant qu'il n'y a pas d'erreur.

Pourquoi avez-vous besoin de différer l'analyse de JavaScript ?

Nous avons mentionné plus tôt que la vitesse des pages est l'aspect le plus critique qui fait ou défait les performances de votre site Web. Étant donné que les fichiers JavaScript sont assez volumineux et qu'ils prennent plus de temps à charger, retarder leur exécution pendant un certain temps s'avère pratique pour augmenter la vitesse de votre site Web.

Voici quelques-unes des raisons pour lesquelles vous devez différer l'analyse de JavaScript dans WordPress :

1. Pour booster les classements de recherche :

Lorsque Google ou tout autre moteur de recherche évalue votre site Web pour un classement dans les moteurs de recherche, ils prennent la vitesse de la page comme point de mesure critique. Si votre site Web se charge plus rapidement, il apparaîtra forcément sur la première page des résultats des moteurs de recherche.

Selon la recherche, 1 personne sur 2 s'attend à ce qu'une page se charge en moins de 2 secondes. Si votre site Web ne peut pas se charger correctement dans les 2 secondes, Google favorisera votre concurrent au lieu de vous. Par conséquent, cela peut avoir un impact négatif sur votre classement de recherche.

Par conséquent, il est nécessaire de différer l'analyse de JavaScript afin d'augmenter considérablement le temps de chargement de votre site Web.

Si vous recherchez plus d'options pour accélérer votre site Web WordPress, consultez ces 7 techniques de référencement sur la page qui doubleront votre trafic de recherche.

2. Pour augmenter le taux de conversion :

Si votre site Web se charge plus lentement, vos visiteurs sont tenus de le quitter et de rechercher d'autres meilleures options. Étant donné que vos utilisateurs recherchent souvent des informations rapides et fiables sur votre site Web, une page à chargement lent peut être un tueur d'humeur.

De même, si vous exploitez un site affilié et vendez des produits via votre site Web, vous vous attendez à ce que vos utilisateurs agissent davantage. Cependant, une page Web plus lente peut décourager vos visiteurs de prendre des mesures.

La recherche présentée sur HubSpot montre qu'un retard ne serait-ce que d'une seconde dans le temps de chargement du site Web fait chuter le taux de conversion de 7 % . C'est pourquoi il est crucial d'augmenter le temps de chargement de votre site Web et d'augmenter le taux de conversion.

La technique pour différer l'analyse de JavaScript vous aide à augmenter la vitesse de votre site Web et à améliorer son taux de conversion.

3. Pour offrir une meilleure expérience utilisateur :

Pas de prise de tête ! Les sites Web plus lents créent une expérience utilisateur terrible. Si votre site Web prend plus de temps que d'habitude à se charger, vous pouvez vous attendre à ce que vos visiteurs quittent votre site Web, ce qui augmente son taux de rebond.

Vous devriez envisager de différer l'analyse de JavaScript afin que les fichiers JS ne soient exécutés qu'après le chargement du contenu de votre page Web. Cette technique vous aide à accélérer votre site WordPress et à offrir une excellente meilleure expérience à vos utilisateurs.

Cinq méthodes différentes pour différer l'analyse de JavaScript dans WordPress

Pour différer l'analyse de JavaScript, vous pouvez choisir l'une des trois routes principales, notamment :

• Brancher
• Méthode Varvy
• Fichier Functions.php

En utilisant ces itinéraires, nous avons créé cinq méthodes différentes pour différer l'analyse de JavaScript dans WordPress.

Méthode 1 : Utilisation du plugin JavaScript asynchrone gratuit

Async JavaScript est un plugin WordPress gratuit qui aide à éliminer le JavaScript bloquant le rendu dans le contenu au-dessus de la ligne de flottaison.

Le plugin vous offre un contrôle total sur les scripts à ajouter ou à exclure d'un attribut asynchrone ou différé pour augmenter les performances de votre site Web WordPress. La chose dont vous devez vous souvenir avant de choisir entre asynchrone et différé est :

• Async télécharge JavaScript tout en analysant les fichiers HTML, mais interrompt ensuite l'analyse HTML pour exécuter les fichiers JavaScript.
• Différer les téléchargements JavaScript tout en analysant les fichiers HTML et attendre pour l'exécuter une fois l'analyse HTML terminée.

Voici chaque étape pour différer l'analyse de JavaScript dans WordPress à l'aide du plugin Async JavaScript :

Tout d'abord, redirigez vers Plugins -> Ajouter nouveau depuis votre tableau de bord WordPress.

Recherchez maintenant le plugin Async JavaScript dans la barre de recherche, puis installez -le et activez -le.

Une fois l'installation et l'activation du plug-in terminées, accédez à la page Paramètres pour effectuer les modifications nécessaires.

Maintenant, cochez l'option Enable Async JavaScript et sélectionnez Defer as Async JavaScript Method comme indiqué dans l'image ci-dessous :

Pour des options plus avancées, vous pouvez faire défiler jusqu'à la page. Ici, vous pouvez inclure les scripts auxquels vous souhaitez appliquer les balises async et defer et également ajouter une liste de scripts à exclure.

Vous pouvez également répertorier les plugins et les thèmes que vous pouvez exclure de toute modification apportée par le plugin Async JavaScript.

Une fois que vous avez apporté les modifications nécessaires, faites défiler vers le bas de la page et appuyez sur le bouton Enregistrer les paramètres .

Méthode 2 : Utiliser le plugin WP Rocket

WP Rocket est considéré comme l'un des plugins de mise en cache WordPress les plus puissants qui accélère le chargement de votre site Web en quelques clics. Le plugin offre la mise en cache des pages, le préchargement du cache, la compression de fichiers statiques et de nombreuses autres fonctionnalités intéressantes.

En dehors de cela, WP Rocket vous aide également à différer l'analyse de JavaScript dans l'onglet Optimisation des fichiers du tableau de bord WP Rocket.

Une fois que vous avez acheté, installé et activé le plug-in WP Rocket, redirigez vers l'option Paramètres et cliquez sur l'onglet Optimisation des fichiers dans le menu pour commencer.

Après cela, faites défiler jusqu'à la section Fichiers JavaScript, cochez l'option Charger JavaScript différé et activez le Mode sans échec pour jQuery .

Lorsque vous avez terminé l'ensemble du processus, faites défiler jusqu'à la fin de la page et cliquez sur le bouton Enregistrer les modifications .

Méthode 3 : Utilisation du plugin W3 Total Cache

W3 Total Cache est un autre plugin WordPress essentiel qui améliore le référencement et l'expérience utilisateur de votre site Web. Il améliore les performances de votre site Web et réduit le temps de chargement en tirant parti de l'intégration du réseau de diffusion de contenu (CDN).

W3 Total Cache est gratuit et très efficace. Vous pouvez utiliser ce plugin pour différer l'analyse de JavaScript sur votre site Web WordPress.

Voici toutes les étapes pour différer l'analyse de JavaScript dans WordPress à l'aide du plugin W3 Total Cache :

Tout d'abord, redirigez vers Plugins -> Ajouter nouveau depuis votre tableau de bord WordPress.

Recherchez maintenant le plugin W3 Total Cache dans la barre de recherche, puis installez -le et activez -le.

Une fois l'installation et l'activation du plugin terminées, accédez à Performances -> Paramètres généraux dans la barre latérale gauche de WordPress pour apporter les modifications nécessaires.

Après cela, faites défiler jusqu'à la section Minify et cochez l'option Activer . De plus, sélectionnez l'option Manuel du mode Minify et cliquez sur le bouton Enregistrer tous les paramètres pour continuer.

Maintenant, redirigez vers l'onglet Performance -> Minify dans la barre latérale gauche et faites défiler jusqu'à l'en-tête JS , où vous pouvez voir la section Opérations dans les zones avec deux balises HTML.

Sélectionnez Non bloquant à l'aide de l'option "différer" dans le type d'intégration de la balise Avant </head> .

Dans la même section, vous pouvez voir l'en-tête de gestion de fichiers JS où vous devez sélectionner votre thème WordPress actif et cliquer sur le bouton Ajouter un script pour inclure l'URI de JavaScript que vous souhaitez analyser.

Vous pouvez ajouter autant d'URI que vous le souhaitez en cliquant sur le bouton Ajouter un script .

Une fois les modifications terminées, cliquez sur le bouton Enregistrer les paramètres et purger les caches pour continuer.

Après cela, faites défiler jusqu'à la section CSS . Vous pouvez ensuite cliquer sur le bouton Ajouter une feuille de style sous l'en-tête de gestion des fichiers CSS pour insérer les URI des feuilles de style CSS. Vous pouvez en ajouter plusieurs en fonction des suggestions fournies par les outils de surveillance de la vitesse en ligne.

Une fois les modifications terminées, cliquez sur le bouton Enregistrer les paramètres et purger les caches pour continuer.

Méthode 4 : Utilisation de la méthode recommandée par Varvy

Une autre méthode, recommandée par Patrick Sexton de Varvy, utilise un script pour appeler un fichier JavaScript externe une fois le chargement initial de la page terminé. Cela signifie que le navigateur ne téléchargera ni n'exécutera aucun code JavaScript tant que la page Web n'aura pas fini de se charger.

Vous pouvez utiliser cette méthode en modifiant l'extrait de code fourni par Varvy, puis en ajoutant le script à votre fichier de thème immédiatement avant la balise de fermeture </body> .

Voici le code à ajouter dans la partie body de votre thème pour différer l'analyse du JavaScript dans WordPress :

 <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>

Remarque : Assurez-vous de remplacer le fichier defer.js par le nom de votre fichier JavaScript externe. Après cela, vous pouvez utiliser le crochet wp_footer pour injecter le code via le fichier functions.php de votre thème enfant.

Avec cette approche, vous pouvez encapsuler le code de Varvy 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 }

Voici chaque étape de cette méthode expliquée avec des images claires :

Connectez-vous à votre tableau de bord WordPress et accédez à Apparence -> Éditeur de thème

Maintenant, cliquez sur le fichier header.php du côté droit de l'écran, puis collez le code mentionné ci-dessus avant de fermer </body tag>.

Après cela, cliquez sur le bouton Mettre à jour le fichier .

Méthode 5 : Utilisation du fichier functions.php

Si vous avez une idée du développement de WordPress, vous devez être familiarisé avec le fait que vous ne devez pas ajouter de scripts directement via le balisage HTML. Au lieu de cela, vous devez utiliser les fonctions intégrées de WordPress pour demander des ressources et également sauvegarder votre site Web si nécessaire.

Vous pouvez utiliser l'attribut defer pour vos fichiers Javascript en ajoutant l'extrait de code à votre fichier functions.php .
Pour cela, vous devez vous rendre dans l' éditeur de thèmes depuis votre tableau de bord WordPress. Après cela, cliquez sur functions.php et ajoutez-y le code suivant :

 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 );

Cet extrait indique à WordPress d'ajouter l'attribut defer à tous vos fichiers JavaScript, à l'exception de JQuery.
Vous pouvez également facilement ajouter le code suivant pour utiliser l'attribut async ou defer dans vos fichiers JavaScript via le fichier functions.php :

 add_filter('script_loader_tag', 'add_defer_tags_to_scripts'); function add_defer_tags_to_scripts($tag){ # List scripts to add attributes to $scripts_to_defer = array('script_a', 'script_b'); $scripts_to_async = array('script_c', 'script_d'); # add the defer tags to scripts_to_defer array foreach($scripts_to_defer as $current_script){ if(true == strpos($tag, $current_script)) return str_replace(' src', ' defer="defer" src', $tag); } # add the async tags to scripts_to_async array foreach($scripts_to_async as $current_script){ if(true == strpos($tag, $current_script)) return str_replace(' src', ' async="async" src', $tag); } return $tag; }

Eh bien, n'oubliez pas qu'avant d'ajouter les attributs async et defer aux balises de script, vous devez mettre chaque script en file d'attente pour que WordPress puisse y accéder. Voici le code pour cela :

 add_action('wp_enqueue_scripts', 'enqueue_custom_js'); function enqueue_custom_js() { wp_enqueue_script('script_a', get_stylesheet_directory_uri().'/script_a.js'); wp_enqueue_script('script_b', get_stylesheet_directory_uri().'/script_b.js'); wp_enqueue_script('script_c', get_stylesheet_directory_uri().'/script_c.js'); wp_enqueue_script('script_d', get_stylesheet_directory_uri().'/script_d.js'); }

Lorsque vous avez terminé d'ajouter du code au fichier functions.php, cliquez sur le bouton Mettre à jour le fichier .

Voici chaque étape de cette méthode expliquée avec des images claires :

Connectez-vous à votre tableau de bord WordPress et accédez à Apparence -> Éditeur de thème

Maintenant, cliquez sur le fichier functions.php situé sur le côté droit de l'écran. Vous pouvez ensuite coller le code mentionné ci-dessus et cliquer sur le bouton Mettre à jour le fichier pour enregistrer les modifications nécessaires.

Plugins alternatifs pour différer l'analyse de JavaScript dans WordPress

Si vous recherchez d'autres options que les plugins Async JavaScript et WP Rocket pour différer l'analyse de JavaScript dans WordPress, vous en avez beaucoup. Certains d'entre eux incluent:

1. Pack booster de vitesse :

Il s'agit d'un plugin WordPress gratuit avec une interface facile à utiliser pour vous aider à optimiser JavaScript et de nombreuses autres techniques d'optimisation de la vitesse.

Avantages du Speed ​​Booster Pack :

• Très simple et facile à utiliser et est livré avec une interface utilisateur interactive
• Aide à l'optimisation JavaScript, à l'optimisation CSS, au chargement différé et à l'intégration du réseau de diffusion de contenu (CDN)
• Mis à jour régulièrement pour des performances exceptionnelles et des améliorations de bugs

Inconvénients du Speed ​​Booster Pack :

• Il y a un risque que l'activation de ce plugin ou de l'une de ses fonctionnalités entre en conflit avec d'autres plugins sur votre site Web

2. JavaScripts différés WP :

Ce plugin WordPress diffère le chargement de tous les JavaScripts ajoutés par le biais de wp_enqueue_script(), en utilisant LABJS. Le résultat est la bonne optimisation du temps de chargement.

Avantages des JavaScripts différés WP :

• Très facile à utiliser et est l'une des solutions les plus populaires sur le marché
• Explicitement conçu pour différer l'analyse de JavaScript dans WordPress, pas seulement comme une fonctionnalité complémentaire

Inconvénients des JavaScripts différés WP :

• Mises à jour peu fréquentes et peut-être incompatibles avec les nouvelles versions de WordPress
• Peut entraîner la panne d'autres plugins sur votre site Web

FAQ (Foire Aux Questions)

Conclusion

Il est très important de différer l'analyse de JavaScript dans WordPress pour améliorer la vitesse et les performances de votre site Web. Nous espérons que vous trouverez cet article perspicace car nous avons présenté les différentes façons de mettre en œuvre cette technique, qui consiste à utiliser des plugins et à ajouter vous-même des codes aux fichiers de thème.

Dans le cas où vous auriez des difficultés à ajouter des codes aux fichiers de thème, nous vous recommandons vivement d'utiliser les plugins mentionnés ci-dessus pour différer l'analyse de JavaScript. Les plugins sont faciles à utiliser et vous pouvez terminer l'ensemble du processus en quelques clics.

Une fois le processus terminé, assurez-vous d'exécuter votre site Web via les outils de test de performances du site tels que GTmetrix pour vous assurer que votre site Web diffère autant de scripts que possible.

Avez-vous des inquiétudes et des questions sur la façon de différer l'analyse de JavaScript dans WordPress ? Abattez-les dans la section des commentaires ci-dessous!