Lorsque le CSS est regroupé dans un seul fichier, même après l’élimination du code mort (tree-shaking), il contient toujours beaucoup de CSS inutilisé en raison des différents contextes @media (mobile, tablette, bureau, thèmes clair/sombre/autres, etc.).
Un fichier CSS unique a un impact négatif sur les indicateurs clés de performance web (Core Web Vitals) et d’expérience utilisateur, notamment : le Délai de première interaction (FID), le Plus grand contenu peint (LCP), le Décalage de mise en page cumulatif (CLS), le First Contentful Paint (FCP), le Total Blocking Time (TBT), le Time to Interactive (TTI) et l’événement DOMContentLoaded.
Il est possible d’améliorer considérablement le chargement et le rendu du CSS en le divisant en différents fichiers, chaque fichier contenant uniquement le code pertinent pour ce contexte.
Divisez votre CSS en différents fichiers :
📄main.css - contient le CSS nécessaire pour toutes les conditions @media
📄screen.css - contient le CSS nécessaire uniquement pour la condition @media screen
📄print.css - contient le CSS nécessaire uniquement pour la condition @media print
📂breakpoints
📄x-small.css - contient le CSS nécessaire uniquement pour le point de rupture X-Small
📄sm.css - contient le CSS nécessaire uniquement pour le point de rupture Small
📄md.css - contient le CSS nécessaire uniquement pour le point de rupture Medium
📄lg.css - contient le CSS nécessaire uniquement pour le point de rupture Large
📄xl.css - contient le CSS nécessaire uniquement pour le point de rupture Extra large
📄xxl.css - contient le CSS nécessaire uniquement pour le point de rupture Extra extra large
📂themes
📄light.css - contient le CSS nécessaire uniquement pour le thème clair
📄dark.css - contient le CSS nécessaire uniquement pour le thème sombrePuis, incluez les fichiers CSS de cette manière :
<link rel="stylesheet" href="main.css" media="all">
<link rel="stylesheet" href="screen.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="x-small.css" media="(max-width: 575px)">
<link rel="stylesheet" href="sm.css" media="(min-width: 576px)">
<link rel="stylesheet" href="md.css" media="(min-width: 768px)">
<link rel="stylesheet" href="lg.css" media="(min-width: 992px)">
<link rel="stylesheet" href="xl.css" media="(min-width: 1200px)">
<link rel="stylesheet" href="xxl.css" media="(min-width: 1400px)">
<link rel="stylesheet" href="light.css" media="(prefers-color-scheme: light)">
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">Avec cette approche, les navigateurs modernes priorisent le chargement du CSS correspondant aux conditions @media courantes, ce qui accélère considérablement le rendu de la page, car les utilisateurs n’ont plus à attendre le chargement du CSS inutile.
Si tout votre CSS est regroupé dans un unique fichier et que vous ne spécifiez pas de conditions dans les attributs media des balises <link>, le navigateur attend le chargement complet du CSS avant de démarrer le rendu de la page, ce qui le ralentit fortement.
Les points de rupture de cet exemple sont basés sur Bootstrap 5. Cette approche prendra bientôt encore plus d’importance pour Bootstrap, car il est prévu qu’ils ajoutent la prise en charge des thèmes clair, sombre et autres.
Si vous souhaitez contribuer à rendre le web meilleur et plus rapide, veuillez :
- partagez cet article,
- envoyez cet article aux développeurs des frameworks que vous utilisez,
- implémentez cette séparation CSS sur vos sites.
Partagez sur les réseaux sociaux ou enregistrez pour plus tard :
Si vous souhaitez approfondir cette optimisation et comprendre le comportement du navigateur, veuillez consulter les ressources suivantes :
- L’article « Conditionally adaptive CSS. Browser behavior that might improve your performance » de Vadim Makeev. La capture d’écran de couverture de cet article provient de son excellent article, où il propose davantage de captures d’écran et d’expériences.
- MDN Web Docs : Optimisation des performances CSS.