JavaScript inutilisé

Silktide charge vos pages dans un vrai 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, avec l’économie potentielle.

Pourquoi c’est important

Le inutilisé coûte deux fois à vos visiteurs : une première fois pour le télécharger, et une seconde lorsque le navigateur analyse et compile du code qui ne s’exécutera jamais. Sur mobile, ce second coût domine : un smartphone milieu de gamme peut passer plusieurs fois plus de temps à traiter un script qu’à le télécharger, période pendant laquelle la page ne peut pas répondre aux appuis ni au défilement.

Le code inutilisé s’accumule comme le CSS inutilisé : les frameworks et bibliothèques embarquent des fonctionnalités dont vous ne vous servez pas, et l’ancien code est rarement supprimé. Chaque visiteur en paie le prix à chaque affichage de page.

Comment y remédier

Supprimez les scripts dont la page n’a plus besoin, y compris les balises de services que vous n’utilisez plus.
Fractionnez les gros bundles pour que chaque page ne charge que le code qu’elle utilise. Les outils de build modernes prennent en charge le code splitting et le font automatiquement.
Chargez le code des fonctionnalités situées sous la ligne de flottaison ou à la demande — modales, lecteurs, widgets — uniquement lorsqu’elles sont nécessaires, plutôt qu’en amont :

\/\/ Charge le widget de chat uniquement 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 vrai navigateur et enregistrer quelles parties de chaque script s’exécutent pendant le chargement de la page.
Pour chaque script, mesurer combien d’octets n’ont jamais été exécutés.
Signaler chaque script présentant 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 aura besoin ensuite. Ce code est un bon candidat pour un chargement à la demande plutôt qu’en amont.

Le code inutilisé se trouve dans un script tiers

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