JavaScript inutilisé

Silktide charge vos pages dans un véritable navigateur et mesure quelle part de chaque script s’exécute réellement pendant le chargement de la page. Les scripts contenant une grande quantité de code inutilisé sont signalés, ainsi que les économies potentielles.

Pourquoi c’est important

Le inutilisé coûte deux fois à vos visiteurs : une fois pour le télécharger, et une autre lorsque le navigateur analyse et compile du code qui ne s’exécute jamais. Sur téléphone intelligent, ce second coût domine — un appareil de milieu de gamme peut passer plusieurs fois plus de temps à traiter un script qu’à le télécharger, pendant lequel la page ne peut pas répondre aux touchers ni au défilement.

Le code inutilisé s’accumule de la même façon que le CSS inutilisé : les frameworks et bibliothèques livrent des fonctionnalités que vous n’utilisez pas, et l’ancien code est rarement supprimé. Chaque visiteur en paie le prix à chaque affichage de page.

Comment corriger

Supprimez les scripts dont la page n’a plus besoin, y compris les balises de services que vous avez cessé d’utiliser.
Scindez les gros bundles afin que chaque page ne charge que le code qu’elle utilise. Les outils modernes de build prennent en charge le découpage du code (code splitting), ce qui l’automatise.
Chargez le code des fonctionnalités sous la ligne de flottaison ou à la demande — fenêtres modales, lecteurs, widgets — uniquement lorsqu’il est nécessaire, plutôt qu’à l’avance :

\/\/ Charge le widget de clavardage seulement lorsque le visiteur le demande
button.addEventListener('click', async () => {
  const { openChat } = await import('.\/chat.js');
  openChat();
});

Comment Silktide teste cela

Charger la page dans un véritable navigateur et enregistrer quelles parties de chaque script s’exécutent pendant le chargement de la page.
Pour chaque script, mesurer combien de ses octets ne se sont jamais exécutés.
Signaler chaque script avec un gaspillage significatif, en indiquant sa taille actuelle, le pourcentage inutilisé et le nombre d’octets que vous pourriez économiser.

Dépannage

Le code s’exécute, mais pas pendant le chargement de la page

La mesure couvre le chargement initial. Le code qui ne s’exécute que plus tard — validation de formulaires, gestion des menus, fonctionnalités déclenchées par des clics — est comptabilisé comme inutilisé même si la page en a éventuellement besoin. Ce code est un bon candidat pour un chargement à la demande plutôt qu’à l’avance.

Le code inutilisé se trouve dans un script tiers

Vous ne pouvez généralement pas réduire le bundle de quelqu’un d’autre, mais vous pouvez contrôler le moment où il se charge. Voir Code de tiers et Façades pour le code de tiers pour des approches.