Aide et documentation
Vitesse Impact élevé Difficile 1 à 3 heures
Réduire le blocage des CSS
Un CSS volumineux dans la tête retarde le rendu.
Ce que c’est
CSS bloque par défaut : le navigateur ne restitue rien tant qu'il n'a pas téléchargé et traité les styles. Les fichiers CSS volumineux ou nombreux retardent ainsi la première peinture de la page.
Pourquoi c’est important
Le chargement d'un gros fichier CSS pour l'ensemble du site retarde même une simple page. L'optimisation améliore directement le LCP et la vitesse perçue.
Comment faire
- 1Extrayez le « CSS critique » pour la partie visible et insérez-le dans <head>.
- 2Chargez le reste du CSS de manière asynchrone (l'astuce media="print" ou rel="preload" + onload).
- 3Supprimez les styles inutilisés (PurgeCSS / l'outil Coverage dans devtools).
- 4Divisez le CSS par page/composant au lieu d'un monolithe.
Chargement asynchrone de CSS non critiques
Correct
<link rel="preload" href="/css/styles.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/styles.css"></noscript>Conclusion
CSS critique en ligne + le reste de manière asynchrone est le modèle le plus efficace contre le blocage du CSS. C'est un changement plus exigeant, mais sur les sites lents, cela apporte une accélération significative du premier rendu. Les outils et frameworks de construction modernes facilitent la tâche.
Sujets liés