JavaScript minifié

Silktide vérifie si les fichiers de script que votre page télécharge ont été minifiés - réécrits pour enlever les espaces, les commentaires et les longs noms qui ne comptent que pour les personnes qui lisent le code. Les scripts non minifiés sont beaucoup plus volumineux qu'ils ne devraient l'être, ce qui ralentit le chargement de la page.

ne change rien au comportement du code. Par exemple:

\/\/ Avant minification : lisible, mais lourd
function calculateTotalPrice(itemPrice, quantity) {
    return itemPrice * quantity;
}

\/\/ Après : comportement identique, une fraction de la taille
function c(a,b){return a*b}

Pourquoi c'est important

est souvent l'élément le plus lourd qu'une page télécharge, et contrairement aux images il doit aussi être traité avant que la page devienne pleinement interactive. Les scripts non minifiés diminuent couramment de moitié ou plus, et cette économie se répète pour chaque visiteur et chaque affichage de page non mis en cache - les visiteurs sur téléphone et avec des connexions plus lentes le ressentent le plus.

Comme la minification est automatique et ne change pas le comportement, des scripts de production non minifiés sont presque toujours un oubli : une étape de build qui a été sautée, ou des fichiers de développement déployés par erreur.

Comment le corriger

Activez la minification dans le processus de build du site. Chaque outil de build moderne inclut un minificateur, généralement activé par défaut pour les builds de production.
Si le site n'a pas de processus de build, vérifiez le : la plupart offrent un réglage ou un module (plugin) qui minifie automatiquement les scripts.
En dernier recours, faites passer les fichiers dans un minificateur autonome avant de les téléverser. Conservez les originaux lisibles - ce sont eux que vous modifiez, et vous publiez la version minifiée.
Si un fichier signalé appartient à un tiers, vérifiez s'ils offrent une version minifiée, ce qui est généralement le cas.

Comment Silktide teste cela

Chargez la page dans un vrai navigateur, en utilisant le type d'appareil, la vitesse de connexion et l'emplacement de test configurés pour vos tests de vitesse.
Examinez chaque fichier de script que la page télécharge et estimez de combien il serait plus petit s'il était minifié.
Signalez chaque fichier présentant une économie potentielle significative, et évaluez la page selon le total : environ 50 Ko d'économies potentielles fait baisser la note, et 250 Ko ou plus est jugé médiocre.

Dépannage

Le fichier semble déjà minifié

Les minificateurs varient en agressivité, donc un fichier légèrement compacté peut encore offrir des économies notables. Le test indique de combien le fichier pourrait être réduit; le passer dans un minificateur actuel capte généralement cette différence.

Nous avons besoin d'un code lisible pour le débogage

Conservez des fichiers sources lisibles dans votre projet et déboguez avec des cartes des sources (source maps), qui permettent aux outils de développement du navigateur d'afficher le code original pendant que les visiteurs reçoivent la version minifiée. Vous n'avez jamais à servir du code lisible pour obtenir un débogage lisible.