Minification CSS

Silktide vérifie si les feuilles de style téléchargées par votre page ont été minifiées — réécrites pour supprimer les espaces, commentaires et répétitions qui n'importent qu'aux personnes lisant le code. Des feuilles de style non minifiées sont plus volumineuses que nécessaire, ce qui ralentit l'apparition de la page.

La 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, une fraction de la taille *\/
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 temps d'écran blanc avant l'apparition de votre page. La minification réduit souvent considérablement la taille des feuilles de style, et l'économie se répète pour chaque visiteur à chaque affichage de page non mise 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 build sautée, ou des fichiers de développement déployés par erreur.

Comment le corriger

Activez la minification CSS dans le processus de build du site. Chaque outil de build moderne inclut un outil de minification, 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 proposent un paramètre ou une extension qui minifie automatiquement les feuilles de style.
En dernier recours, passez les fichiers dans un outil de minification autonome avant de les mettre en ligne. Conservez les originaux lisibles : vous éditez ceux-ci et publiez la sortie minifiée.
Si une feuille de style signalée appartient à un tiers, vérifiez s'il propose 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 feuille de style téléchargée par la page et estimez combien elle pourrait être réduite si elle était minifiée.
Signalez chaque fichier avec une économie potentielle significative et évaluez la page selon le total : environ 50 Ko d'économies potentielles dégrade la note, et 250 Ko ou plus est jugé médiocre.

Dépannage

Le fichier semble déjà minifié

Les outils de minification varient en agressivité, donc une feuille de style légèrement compactée peut encore contenir des économies significatives. Le contrôle indique de combien le fichier pourrait être réduit ; le passer par un outil de minification à jour capture généralement la différence.

Nous avons besoin de styles lisibles pour le débogage

Conservez les 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 tandis 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.