Minification du CSS

Silktide vérifie si les feuilles de style que votre page télécharge ont été minifiées — réécrites pour supprimer les espacements, commentaires et répétitions qui importent seulement aux personnes lisant le code. Les feuilles de style non minifiées sont plus lourdes qu’elles ne devraient l’être, ce qui ralentit l’apparition de la page.

ne change rien à l’apparence de la page. Par exemple :

/* Avant minification : lisible, mais lourd */
h1 {
  background-color: #000000;
}
h2 {
  background-color: #000000;
}

/* Après : résultat identique, taille réduite à une fraction */
h1,h2{background-color:#000}

Pourquoi c’est important

Les feuilles de style bloquent généralement le rendu : le navigateur télécharge le de la page avant d’afficher quoi que ce soit, donc chaque octet inutile dans une feuille de style prolonge directement le délai pendant lequel la page reste blanche avant d’apparaître. La minification réduit habituellement de façon significative la taille des feuilles de style, et l’économie se répète pour chaque visiteur et chaque affichage de page non mis en cache.

Parce que la minification est automatique et ne change aucun comportement, des feuilles de style de production non minifiées sont presque toujours un oubli : une étape de génération sautée, ou des fichiers de développement déployés par erreur.

Comment corriger

Activez la minification du CSS dans le processus de génération du site. Tout outil moderne de génération inclut un minificateur, généralement activé par défaut pour les versions de production.
Si le site n’a pas de processus de génération, vérifiez le : la plupart offrent un paramètre ou un module d’extension qui minifie automatiquement les feuilles de style.
En dernier recours, passez les fichiers dans un minificateur autonome avant de les téléverser. Conservez les originaux lisibles — ce sont ceux-là que vous modifiez, puis vous publiez la version minifiée.
Si une feuille de style signalée appartient à un tiers, vérifiez s’il offre une version minifiée, ce que font la plupart.

Comment Silktide teste cela

Charge la page dans un véritable navigateur, en utilisant le type d’appareil, la vitesse de connexion et l’emplacement d’essai configurés pour vos tests de vitesse.
Examine chaque feuille de style téléchargée par la page et estime de combien elle pourrait être réduite si elle était minifiée.
Signale chaque fichier présentant une économie potentielle significative et attribue une note à 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 une feuille de style légèrement compactée peut encore receler des économies significatives. Le contrôle indique de combien le fichier pourrait être réduit; le passer dans un minificateur à jour saisit généralement la différence.

Nous avons besoin de styles lisibles pour le débogage

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