Supprimer les ressources JavaScript inutilisées

Si vous n'utilisez pas de code JavaScript, cela peut ralentir le chargement de votre page:

  • Si le code JavaScript bloque le rendu, le navigateur doit télécharger, analyser, compiler et évaluer le script avant de pouvoir effectuer toutes les autres tâches nécessaires à l'affichage de la page.
  • Même si le code JavaScript est asynchrone (et ne bloque pas l'affichage), le code entre en concurrence avec d'autres ressources pour la bande passante lors de son téléchargement, ce qui a des conséquences importantes sur les performances. L'envoi de code inutilisé via le réseau est également gaspillage pour les utilisateurs mobiles qui n'ont pas de forfait Internet illimité.

Échec de l'audit JavaScript inutilisé

Lighthouse signale chaque fichier JavaScript contenant plus de 20 kibioctets de code inutilisé:

Une capture d'écran de l'audit
Cliquez sur une valeur de la colonne URL pour ouvrir le code source du script dans un nouvel onglet.

Supprimer les ressources JavaScript inutilisées

Détecter les ressources JavaScript inutilisées

L'onglet Couverture des outils pour les développeurs Chrome vous permet de détailler ligne par ligne le code inutilisé.

La classe Coverage de Puppeteer peut vous aider à automatiser le processus de détection du code inutilisé et de son extraction.

Outil de création permettant de supprimer le code inutilisé

Consultez les tests Tooling.Report suivants pour savoir si votre bundler est compatible avec des fonctionnalités qui permettent d'éviter ou de supprimer plus facilement le code inutilisé:

Conseils spécifiques à la pile

Angular

Si vous utilisez Angular CLI, incluez des mappages sources dans votre build de production pour inspecter vos bundles.

Drupal

Pensez à supprimer les éléments JavaScript inutilisés et à n'associer que les bibliothèques Drupal nécessaires à la page ou au composant de page concernés. Pour en savoir plus, consultez Définir une bibliothèque.

Joomla

Envisagez de réduire le nombre d'extensions Joomla qui chargent du code JavaScript inutilisé dans votre page.

Magento

Désactivez le regroupement JavaScript intégré de Magento.

React

Si vous n'effectuez pas de rendu côté serveur, divisez vos bundles JavaScript avec React.lazy(). Sinon, divisez le code à l'aide d'une bibliothèque tierce telle que loadable-components.

Vue

Si vous n'effectuez pas de rendu côté serveur et utilisez le routeur Vue, divisez les lots par routes de chargement différé.

WordPress

Envisagez de réduire le nombre de plug-ins WordPress qui chargent du code JavaScript inutilisé dans votre page, ou d'en modifier plusieurs.

Ressources