Optimisation web : supprimer le code mort avec l'onglet Coverage de Chrome

Le web moderne est de plus en plus lourd. Les sites chargent des fichiers immenses. Pourtant, une grande partie de ce code ne sert jamais. Les développeurs utilisent souvent des bibliothèques complètes. Ils n’utilisent qu’une petite partie des fonctions. Ce surplus de données ralentit la navigation. Il consomme de la batterie sur mobile. Il gaspille de la bande passante.

Google Chrome propose un outil intégré très puissant. Il s’appelle l’onglet Coverage (Couverture). Cet outil analyse votre code pendant que vous naviguez. Il montre ce qui est exécuté. Il montre surtout ce qui reste inactif. Supprimer ce code mort est une priorité pour la performance. C’est essentiel pour améliorer vos Core Web Vitals.

#Pourquoi le code mort est-il dangereux ?

Chaque octet envoyé a un coût technique. Le navigateur suit un processus strict pour afficher une page.

L’impact sur le rendu CSS

Le CSS bloque l’affichage de la page. Le navigateur doit lire tout le fichier avant de dessiner. Si votre fichier fait 200 Ko mais que 10 Ko sont utiles, vous perdez du temps. L’utilisateur voit un écran blanc. Cela augmente le score * *LCP (Largest Contentful Paint)**. Un site rapide retient mieux ses visiteurs.

Le coût du JavaScript

Le JavaScript est très coûteux pour le processeur. Le navigateur doit télécharger le fichier. Ensuite, il doit le décompresser. Puis, il doit l’analyser et le compiler. Ce travail utilise beaucoup de ressources. Sur un smartphone ancien, cela crée des saccades. L’outil Coverage vous aide à réduire le TBT (Total Blocking Time).

#Comment ouvrir l’onglet Coverage ?

L’outil se cache dans les options avancées de Chrome. Voici les étapes pour y accéder :

1. Ouvrez votre site web dans Chrome.
2. Ouvrez les outils de développement avec la touche F12.
3. Appuyez sur Ctrl + Shift + P (ou Cmd + Shift + P sur Mac).
4. Une barre de recherche apparaît.
5. Tapez le mot “Coverage”.
6. Sélectionnez l’option “Show Coverage”.

Un nouveau panneau s’ouvre en bas de votre fenêtre. Pour commencer l’analyse, cliquez sur le bouton de rechargement. C’est l’icône avec une flèche circulaire. La page va se rafraîchir. L’outil va alors enregistrer chaque ligne de code utilisée.

#Comprendre la visualisation des données

L’onglet Coverage présente un tableau complet. Chaque ligne correspond à un fichier chargé.

• URL : Le nom et l’adresse du fichier. Cela inclut vos scripts et vos styles.
• Type : Indique s’il s’agit de JS ou de CSS.
• Total Bytes : Le poids total du fichier.
• Unused Bytes : La quantité de code qui n’a pas servi.
• Usage Visualization : Une barre horizontale très utile.

Analyser les couleurs

Dans cet outil, les couleurs sont simples à comprendre. La barre rouge représente le code qui n’a jamais été exécuté. La barre grise représente le code utile.

Si vous voyez une barre presque totalement rouge, le fichier est un problème. Dans l’image ci-dessus, certains fichiers affichent 100 % de code inutilisé. C’est une perte d’efficacité totale. Cela arrive souvent avec les polices d’icônes ou les vieux scripts de suivi.

#Analyse détaillée dans les sources

Cliquez sur une ligne du tableau. Le fichier s’ouvre dans l’onglet Sources. Regardez à gauche des numéros de ligne. Des bandes de couleur apparaissent.

• Une bande grise signifie que la ligne a été lue par le navigateur.
• Une bande rouge signifie que la ligne est ignorée.

#Le facteur humain : l’interaction

L’outil Coverage est un enregistreur en direct. Il ne peut pas deviner le futur. Au chargement de la page, tout ce qui concerne les menus déroulants ou les pop-up sera rouge. C’est normal. Le code n’a pas encore servi.

Pour obtenir un rapport fiable :

1. Lancez l’enregistrement.
2. Parcourez toute votre page.
3. Cliquez sur tous les boutons.
4. Ouvrez les menus.
5. Faites défiler jusqu’au pied de page.

Vous verrez les barres rouges devenir grises en temps réel. Le code dont vous avez vraiment besoin se révèle petit à petit.

#Comment éliminer le code inutile ?

Une fois le diagnostic terminé, vous devez agir. Voici trois méthodes pour nettoyer votre projet.

1. La suppression manuelle

C’est la méthode la plus simple pour le CSS. Si l’outil montre que des styles entiers sont rouges sur tout le site, supprimez-les. C’est souvent du vieux code oublié.

2. Le fractionnement du code

Ne chargez pas le code de votre page “Contact” sur votre “Accueil”. Divisez vos scripts en petits morceaux. Chargez-les uniquement quand c’est nécessaire. C’est très facile à faire avec des frameworks modernes.

Voici un exemple de chargement conditionnel en JavaScript :

Copierconst feedbackBtn = document.querySelector('.js-feedback');

if (feedbackBtn)
{
  import('./modules/feedback.js').then(module =>
  {
    module.init();
  });
}

3. Le Tree Shaking

C’est une technique automatique. Elle retire le code mort lors de la création du site. Pour cela, utilisez des outils comme Vite ou Webpack. Ils analysent votre code et retirent ce qui n’est pas appelé.

Copier// On importe seulement ce qui est utile
import {computeTotal} from './math-library.js';

const result = computeTotal(10, 20);
console.log(result);

// La fonction multiply() dans math-library.js restera inutilisée
// Elle ne sera pas incluse dans le fichier final

#Les extensions de navigateur et l’onglet Coverage

L’image de l’onglet Coverage montre souvent des lignes commençant par chrome-extension://. Ce n’est pas le code de votre site. Ce sont les scripts de vos propres extensions (comme uBlock ou LastPass).

Attention : Ne confondez pas ces fichiers avec vos propres actifs. Concentrez-vous uniquement sur les fichiers qui commencent par http:// ou https:// avec votre nom de domaine. Les extensions consomment beaucoup de ressources. Elles peuvent fausser vos tests de performance. Testez toujours votre site en mode Incognito pour éviter cela.

#Bénéfices pour le SEO et l’indexation

Un site léger est un site mieux classé sur Google. Le moteur de recherche analyse la vitesse. Si vos fichiers JS sont trop lourds, le robot de Google passera moins de temps à indexer vos pages. On appelle cela le budget de crawl.

En réduisant le code mort :

• Le site charge plus vite.
• L’expérience utilisateur s’améliore.
• Le taux de rebond diminue.
• Votre score Lighthouse augmente.

#Conclusion

L’onglet Coverage est un outil de diagnostic vital. Il permet de voir l’invisible. En quelques clics, vous identifiez les coupables de la lenteur. Nettoyer son code est une marque de respect pour l’utilisateur.

Commencez dès aujourd’hui. Ouvrez vos outils. Lancez une analyse. Chaque ligne rouge supprimée rend le web plus rapide et plus écologique.

Questions Fréquentes

Lionel Péramo

Expert Performance Web & Écoconception

Développeur full stack et créateur du framework OTRA (PHP) et de la librairie EcoComposer. J'écris pour rendre le web plus rapide et inclusif.

En savoir plus →