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 minimisés:
Améliorer les performances en minimisant les fichiers CSS
Réduire la taille 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 équivalents d'un point de vue fonctionnel, mais le second utilise moins d'octets. Les outils de réduction peuvent encore améliorer l'efficacité des octets en supprimant les espaces blancs:
h1,
h2 {
background-color: #000000;
}
Certains réducteurs utilisent des astuces astucieuses pour réduire les octets.
Par exemple, la valeur de couleur #000000 peut être réduite davantage à #000, ce qui est son équivalent abrégé.
Lighthouse fournit une estimation des économies potentielles en fonction des commentaires et des espaces blancs qu'il trouve dans votre CSS.
Il s'agit d'une estimation prudente.
Comme indiqué précédemment, les outils de réduction peuvent effectuer des optimisations astucieuses (par exemple, réduire la taille de #000000 à #000) afin de réduire davantage la taille de votre fichier.
Ainsi, si vous utilisez un outil de réduction de taille, vous constaterez peut-être plus d'économies que celles indiquées par Lighthouse.
Utilisez un outil de réduction de taille CSS pour réduire la taille de votre code CSS.
Pour les petits sites que vous ne mettez pas souvent à jour, vous pouvez probablement utiliser un service en ligne pour minimiser manuellement la taille des fichiers. Vous collez votre code CSS dans l'interface utilisateur du service pour qu'il renvoie une version réduite du code.
Pour les développeurs professionnels, vous souhaiterez probablement configurer un workflow automatisé qui réduit automatiquement la taille de votre code CSS avant de déployer votre code mis à jour. Pour ce faire, vous utiliserez généralement un outil de création tel que Gulp ou Webpack.
Découvrez comment réduire la taille de votre code CSS dans Minifier CSS.
Conseils spécifiques à la pile
Drupal
Activez l'option Regrouper les fichiers CSS sous Administration > Configuration > Développement. Vous pouvez également configurer des options d'agrégation plus avancées via des modules supplémentaires pour accélérer votre site en concaténant, en minimisant et en compressant vos styles CSS.
Joomla
Un certain nombre d'extensions Joomla peuvent accélérer votre site en concaténant, en minimisant et en compressant vos styles CSS. Il existe également des modèles offrant cette fonctionnalité.
Magento
Activez l'option Minify CSS Files (Minifier les fichiers CSS) dans les paramètres de développeur de votre magasin.
React
Si votre système de compilation réduit automatiquement la taille des fichiers CSS, assurez-vous de déployer la 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 votre site en concaténant, en minimisant et en compressant vos styles. Si possible, vous pouvez également utiliser un processus de compilation pour effectuer cette minimisation en amont.