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](https://developer.chrome.google.cn/static/docs/lighthouse/performance/unused-javascript/image/a-screenshot-the-audit-5e55ec7ebbacf.jpg?authuser=5&hl=fr)
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
- Code source pour l'audit Supprimer le code inutilisé
- Supprimer le code inutilisé
- Ajouter de l'interactivité avec JavaScript
- Diviser le code
- Élimination du code mort
- Code importé mort
- Trouver le code JavaScript et CSS inutilisés grâce à l'onglet "Couverture" dans les outils pour les développeurs Chrome
- Classe:
Coverage