La section "Opportunités" de votre rapport Lighthouse répertorie tous les fichiers CSS non réduits, ainsi que les économies potentielles en kibioctets (Kio) lorsque ces fichiers sont réduits:
Comment réduire la taille des fichiers CSS peut améliorer les performances
La minimisation des fichiers CSS peut améliorer les performances de chargement de vos pages. Les fichiers CSS sont souvent plus volumineux que nécessaire. Exemple :
/* Header background should match brand colors. */
h1 {
background-color: #000000;
}
h2 {
background-color: #000000;
}
Peut être réduit à :
h1,
h2 {
background-color: #000000;
}
Du point de vue du navigateur, ces deux exemples de code sont fonctionnellement équivalents, mais le second exemple utilise moins d'octets. Les outils de minification peuvent encore améliorer l'efficacité en octets en supprimant les espaces blancs :
h1,
h2 {
background-color: #000000;
}
Certains outils de réduction de taille utilisent des astuces bien pensées pour réduire les octets.
Par exemple, la valeur de couleur #000000 peut être réduite à #000, qui est son équivalent abrégé.
Lighthouse fournit une estimation des économies potentielles basée sur les commentaires et les espaces blancs qu'il trouve dans votre CSS.
Il s'agit d'une estimation prudente.
Comme indiqué précédemment, les outils de minification peuvent effectuer des optimisations intelligentes (telles que la réduction de #000000 à #000) pour réduire davantage la taille de vos fichiers.
Par conséquent, si vous utilisez un outil de minification, vous pouvez constater des économies plus importantes que celles indiquées par Lighthouse.
Utiliser un outil de minification CSS pour réduire la taille de votre code CSS
Pour les petits sites que vous ne mettez pas à jour souvent, vous pouvez probablement utiliser un service en ligne pour minifier manuellement vos fichiers. Vous collez votre CSS dans l'interface utilisateur du service, et il renvoie une version réduite du code.
Pour les développeurs professionnels, vous souhaitez probablement configurer un workflow automatisé qui réduit automatiquement la taille de votre CSS avant de déployer votre code mis à jour. Pour ce faire, vous utiliserez généralement un outil de compilation tel que Gulp ou Webpack.
Découvrez comment réduire la taille de votre code CSS dans Réduire la taille du CSS.
Conseils spécifiques aux piles
Drupal
Assurez-vous d'avoir activé l'option "Regrouper les fichiers CSS" sur la page Administration > Configuration > Développement.
Joomla
Un certain nombre d'extensions Joomla peuvent accélérer l'affichage de votre site en concaténant, en minimisant et en compressant vos styles CSS. D'autres modèles proposent également cette fonctionnalité.
Magento
Activez l'option Minifier les fichiers CSS dans les paramètres développeur de votre magasin.
React
Si votre système de compilation réduit automatiquement la taille de vos fichiers CSS, assurez-vous de déployer le build de production de votre application. Vous pouvez le vérifier avec l'extension React Developer Tools.
WordPress
Un certain nombre de plug-ins WordPress peuvent accélérer l'affichage de votre site en concaténant, en minimisant et en compressant vos styles. Si possible, utilisez un processus de compilation pour réaliser cette minimisation en amont.