Quand on cherche à optimiser les performances d’un site WordPress, une des premières choses à faire, est de mettre en place est une bonne gestion des ressources JavaScript. C’est d’ailleurs un des premiers éléments que les outils d’analyse de sites web tels que Google PageSpeed vous recommande d’améliorer.
Defer Parsing of Javascript
Defer Parsing of Javascript de son nom original se réfère à une technique d’optimisation de sites web qui consiste à retarder l’analyse et l’exécution des scripts JavaScript, et ce jusqu’à ce que le reste du contenu de la page (comme le HTML et le CSS) soit complètement chargé. Cela permet de réduire le temps nécessaire pour afficher le contenu principal de la page, améliorant ainsi la vitesse de chargement perçue par l’utilisateur et la performance globale du site.
Defer Parsing of Javascript sur un site WordPress
Dans ce tutoriel, nous allons explorer en détail comment différer l’analyse de JavaScript. Comme d’habitude, nous étudierons 2 approches : avec et sans plugin.
Pourquoi devriez-vous différer l’analyse de JavaScript ?
Quand vous accèdez à une page sur internet, votre navigateur reçoit le contenu du site sous forme de code renvoyé par le serveur. Il charge ensuite ce code de haut en bas. Lorsque le navigateur trouve du Javascript, il arrête de charger le html jusqu’à ce qu’il ait fini de télécharger tout le JavaScript. Ce qui peut grandement dimunuer les performances de chargement de la page en question.
Pour résoudre ce problème, vous pouvez différer l’analyse du JavaScript, ce qui permet au navigateur de charger le contenu complet sans attendre le chargement des différents scripts, permettant ainsi que l’analyse du JavaScript n’ait pas d’incidence négative sur le temps de chargement de vos pages.
Gardez à l’esprit qu’il n’est pas mauvais d’avoir du code JavaScript sur son site. Il permet de dynamiser et d’étendre les fonctionnalités de celui-ci. Il faut juste faire en sorte que celui-ci ne ralentisse pas le chargement des pages.
Quels sont les avantages de différer le javascript ?
- Une meilleure expérience utilisateur : les visiteurs attendent moins longtemps pour voir votre site.
- Un meilleur signal pour les moteurs de recherche : Tous les moteurs de recherchent pensent avant tout à l’expérience utilisateur, et recommandent ce genre de pratique. Ils seront donc plus enclain à vous classer plus haut dans les résultats de recherche.
Comment différer l’analyse de JavaScript dans WordPress ?
Comme nous l’avons évoqué plus haut, vous avez 2 solutions : 1 pour les néophytes (plugin), et 1 pour les utilisateurs avancés (sans plugin). Mais avant cela, commençons par analyser les performances actuelles de votre site afin de pouvoir observer la progression de cette modification.
Rendez-vous sur un outil d’analyse de site web au choix, pour cet exemple nous utiliserons PageSpeed de Google, mais vous pouvez utiliser celui que vous préférez comme pare exemple GTmetrix ou Pingdom. Lors de l’analyse, vous trouverez l’opportunité suivante : éliminez les ressources qui bloquent le rendu.
Ce message indique qu’il y a un problème concernant l’analyse du code à cause de JavaScript, et donc qu’il est recommandé de différer la diffusion des scripts JS.
Différer l’analyse de JavaScript dans WordPress
Passons maintenant choses sérieuses, comment différer l’analyse de JavaScript sur WordPress ? Première méthode, avec un plugin ! ( Si vous souhaitez faire sans, allez directement au point 2.
1. Différez javascript avec un plugin
L’une des façons les plus simples de différer l’analyse JavaScript est d’utiliser un plugin. 99% des plugins de cache vous proposent cette option, et je vous recommande de vous tourner vers votre plugin de cache si vous en avez déjà un. Sinon, vous pouvez regarder du côté de Async Javascript. (Il existe des dizaines de plugins pour un même résultat, libre à vous d’en choisir un autre.) L’avantage de Async Javascript est qu’il se contente d’aller a l’essentiel, différer javascript, sans ajouter d’options inutiles.
Sur le même sujet : comment installer un plugin WordPress ?
Une fois que vous avez installer votre plugin, rendez-vous dans votre tableau de bord. (les 2 points suivants peuvent différer en fonction du plugin que vous aurez choisi).
- Dans la barre latérale gauche, rendez-vous dans “Réglages > Async Javascript”.
- Activez l’utilisation du plugin en cochant la case : “Enable Async JavaScript”.
- Cliquez sur le bouton “Apply Defer” pour mettre en place l’optimisation.
Vous l’aurez certainement constaté, il existe d’autres options autour de celle-ci, si vous vous sentez l’âme d’un explorateur, n’hésitez pas à faire quelques tests pour voir ce qui donne le meilleur résultat sur votre site.
2. Différer l’analyse du JavaScript via functions.php
Pour les utilisateurs expérimentés, il est également possible de différer l’éxécution de JavaScript sans plugin, avec quelques lignes de code.
- Avec votre éditeur de code préféré, ouvrez le fichier functions.php de votre thème enfant.
- à la fin de celui-ci, ajoutez le code suivant :
function wppln_defer_javascript ( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return "$url' defer ";
}
add_filter( 'clean_url', 'wppln_defer_javascript', 11, 1 );- Sauvegardez vos modifications
- Mettez à jour le fichier en ligne
Regardez la différence
Quelle que soit la méthode que vous avez choisi d’utiliser, vous pouvez maintenant retourner sur votre outil d’analyse de site internet et relancer le test afin de voir si vous observez une différence.
Sur notre site test, voici le résultat après mise en place :
Avant :
Après :
Comme vous pouvez le constater, nous sommes passés de 2,89s de chargement à 1,02s pour ce qui est du Javascript. Nous avons presque diviser par 3 le temps nécéssaire. Vos utilisateurs ne vous en remercierons jamais assez !
PS : si vous n’observez AUCUN changement, il est probable que vous deviez vider le cache de votre site, ou que votre plugin de cache justement, prenait déjà en charge cette optimisation de votre site.
Quelle est la différence entre Defer et Async ?
Certains d’entres vous me demandent souvent : Quelle est la différence entre DEFER et ASYNC ? Car on entends parler des 2 solutions quand on veut améliorer la vitresse de chargement de son site.
<strong>Defer</strong> et <strong>Async</strong> sont deux attributs utilisés dans les balises script HTML pour contrôler le chargement des fichiers JavaScript, mais ils fonctionnent de manière légèrement différente :
- Defer : Lorsque vous utilisez l’attribut
defer, le navigateur continuera de charger le document HTML tout en chargeant le fichier JavaScript en arrière-plan. L’exécution du script est retardée jusqu’à ce que le document HTML soit complètement chargé. Cela est utile pour les scripts qui ont besoin d’interagir avec l’intégralité de la page et dont l’exécution peut être reportée sans impacter l’affichage initial. - Async : Avec l’attribut
async, le navigateur charge également le fichier JavaScript en arrière-plan, mais exécute le script dès qu’il est téléchargé, sans attendre que le reste de la page soit chargé. Cela peut accélérer l’exécution de scripts indépendants du contenu de la page, mais peut poser des problèmes pour les scripts qui dépendent ou modifient le contenu du DOM.
En conclusion donc, defer est généralement utilisé pour les scripts qui nécessitent une interaction complète avec la page, tandis que async est préférable pour les scripts indépendants qui n’interfèrent pas avec le chargement initial de la page.
