CSS critique (Critical CSS)
Le CSS critique est une technique d’optimisation des performances qui consiste à extraire et à intégrer directement dans le HTML le style nécessaire à l’affichage de la partie supérieure de la page.
Définition
Le CSS critique désigne le volume minimal de règles CSS requises pour afficher le contenu situé "au-dessus de la ligne de flottaison" (Above-the-Fold) lors du chargement initial. En injectant ce code inline (balise <style> dans le <head>), on élimine la requête réseau bloquante vers le fichier CSS complet, ce qui accélère drastiquement le FCP et le LCP.
Bonnes pratiques
- Implémenter progressivement : Identifier les styles essentiels pour chaque gabarit de page (Home, Article, Produit) et différer le chargement du reste du fichier CSS (non-critique) via
rel="preload". - Mesurer avec Lighthouse : Surveiller l’indicateur "Éliminer les ressources qui bloquent le rendu" pour valider l’efficacité de l’injection.
- Automatiser le monitoring : Utiliser des outils de build (comme Critical ou PurgeCSS) pour régénérer automatiquement le CSS critique lors de chaque modification de design.
À éviter
- Chargements bloquants : Laisser la feuille de style principale en haut du document sans attribut
media="print"ouonload, ce qui annulerait les bénéfices du CSS critique. - Assets non optimisés : Injecter trop de CSS inline (plus de 14-20 Ko), ce qui alourdirait excessivement le document HTML et retarderait son transfert.
- Modifications non mesurées : Oublier de mettre à jour le CSS critique après un changement de mise en page, au risque de voir apparaître un "flash de contenu non stylisé" (FOUC).
ㅤ
- Ils font confiance à Devsource
