Corriger l'avertissement Lighthouse 'reduce unused JavaScript'

Qu'est-ce que l'avertissement Lighthouse 'reduce unused JavaScript' ?

Qu'est-ce que l'avertissement reduce unused JavaScript dans Lighthouse ? Lighthouse signale les scripts qui ont plus de 20 ko d'octets inutilisés.

L'avertissement 'reduce unused JavaScript' impacte directement le score Lighthouse.

Le JavaScript inutilisé est également assez important pour réussir les Core Web Vitals car le JavaScript inutilisé a un coût ! Il peut entrer en concurrence pour les ressources réseau et bloquer le thread principal. Cela ralentira les Core Web Vitals, en particulier le Largest Contentful Paint (LCP) et l'Interaction to Next Paint (INP).

Qu'est-ce qui cause le JavaScript inutilisé ?

Le JavaScript inutilisé peut avoir de nombreuses raisons. Le JavaScript inutilisé est généralement causé par :

• Trop de plugins dans votre CMS.
• Code mort.
• Mauvais codage.
• Accès illimité au Tag Manager
• Imports inutiles
  
• Code qui a été chargé immédiatement mais qui aurait pu être chargé juste avant son utilisation.

Comment le 'JavaScript inutilisé' affecte-t-il PageSpeed

Le JavaScript inutilisé impacte directement les métriques Lighthouse. Cela rend le rendu d'une page web inutilement compliqué, rendant presque impossible l'obtention de ce score Lighthouse élevé. Votre navigateur devra faire plus de travail avant que la page web puisse être affichée à l'écran. 

Cependant, gardez à l'esprit qu'un score Lighthouse n'est pas un score Core Web Vitals. Les Core Web Vitals sont mesurés avec les données CrUX.

Il y a 2 problèmes avec le JavaScript inutilisé.

• Tout d'abord, ce JavaScript doit être téléchargé. Ces scripts entreront en concurrence pour les ressources réseau. Cela peut avoir un impact énorme sur le Largest Contentful Paint (LCP)
• Deuxièmement, le navigateur devra exécuter tout ce JavaScript. Pendant qu'un navigateur exécute ce JavaScript, il arrêtera essentiellement de faire autre chose et ne pourra pas répondre aux entrées de l'utilisateur ni continuer à analyser la page. Cela affectera à la fois le Largest Contentful Paint (LCP) et l'Interaction to Next Paint (INP)

Comment trouver le 'JavaScript inutilisé'

Pour trouver le 'JavaScript inutilisé', vous pouvez lire l'audit Lighthouse ou utiliser l'outil 'Chrome Coverage Tool' pour obtenir une liste complète de tous les fichiers JavaScript et leur quantité d'octets inutilisés.

Ouvrez les Chrome Dev Tools avec le raccourci ctrl-shift-i . Utilisez ensuite le raccourci ctrl-shift-p pour ouvrir le menu de commande et tapez 'coverage'. Sélectionnez 'Start instrumenting coverage and reload page'. Cela rechargera la page et vous montrera la quantité d'octets inutilisés pour tous les fichiers qui contiennent du code css ou javascript.

Comment corriger 'reduce unused JavaScript'

Pour corriger l'avertissement 'reduce unused JavaScript', vous devrez d'abord tracer ses origines. Lighthouse vous donnera une indication des scripts qui ont une grande quantité d'octets inutilisés. Il y a 5 suspects habituels :

1. Supprimez les plugins inutiles ou triviaux. Si vous utilisez un CMS basé sur des plugins comme WordPress, la méthode la plus simple et la plus efficace pour nettoyer votre code inutilisé est de loin de supprimer les plugins dont vous n'avez pas besoin ou qui peuvent facilement être remplacés par un simple changement de code (par exemple votre plugin d'analyse, plugin de chat, plugin de partage social)
   
2. Supprimez le code mort. Le code mort est du code qui n'est plus utilisé par le site web actuel. Il ne fait que prendre de l'espace et de la bande passante. Si vous possédez un site web, je vous suggère de programmer un marathon de code mort au moins deux fois par an où vous examinez attentivement vos scripts personnalisés et supprimez le code qui n'est plus nécessaire.
   
3. Réécrivez les scripts mal codés.  Les scripts mal codés ont tendance à avoir beaucoup de vérifications inutiles et d'instructions if/else. Ces vérifications peuvent ne jamais être utilisées et certaines conditions if/else peuvent ne pas être nécessaires. Si vous avez beaucoup d'anciens scripts ou si votre développeur JavaScript actuel est meilleur que le précédent, il peut être judicieux de revoir les anciens scripts.
   
4. Nettoyez votre Tag Manager et limitez l'accès. Le Tag Manager est une source courante de code inutilisé, surtout lorsque des départements moins techniques sont autorisés à ajouter des balises. Souvent, ils oublieront de supprimer leurs balises inutilisées et le Tag Manager devient la principale source de JavaScript inutilisé.
5. Supprimez les imports inutiles (NextJS, React, VUE, etc.). La plupart des environnements SPA importent trop de composants / fonctions. Vérifiez deux fois vos imports et supprimez le code inutilisé. 
6. Chargez paresseusement (Lazy load) les routes ou composants  (NextJS, React, VUE, etc.). Le chargement paresseux des composants n'importera ces composants qu'une fois qu'ils seront nécessaires. Cela supprimera immédiatement l'avertissement Lighthouse pour le javascript inutilisé pour ces pages où vous chargez paresseusement du code inutilisé.
7. Différez le chargement des scripts non critiques. Parfois, vous avez besoin d'un script (par exemple, pour soumettre un formulaire) mais vous n'en avez pas besoin tout de suite. Et, soyons honnêtes, 98 % de vos visiteurs ne s'inscriront pas de toute façon. Donc, pour la plupart, ces scripts sont inutilisés. Il serait plus logique de charger ce script lorsque le visiteur interagit avec le formulaire, et non pendant le chargement de la page.

Solution de contournement pour 'reduce unused JavaScript'

Parfois, il n'est pas possible de corriger tous les avertissements de JavaScript inutilisé. Dans ce cas, vous pourriez essayer de minimiser l'impact de ces ressources inutilisées

- Chargez toutes les ressources javascript depuis votre domaine principal (cela évite une nouvelle connexion réseau)
- Préchargez les ressources plus importantes comme vos polices et l'élément image LCP.
- Différez autant de JavaScript que vous le pouvez
- Placez le JavaScript moins important en bas de la page