CSS critique et blocage du rendu
Intégrez le CSS critique visible au-dessus de la ligne de flottaison et différez les styles non critiques afin d’éliminer le blocage du rendu.
CSS critique et blocage du rendu est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Comment le navigateur effectue le rendu
Le navigateur analyse le HTML pour construire un DOM, le CSS pour construire un CSSOM, les combine dans un arbre de rendu, effectue la mise en page, puis peint. Le CSS bloque le rendu jusqu’à ce que le CSSOM soit terminé : chaque octet de CSS sur le chemin critique retarde la première peinture.
Qu’est-ce que le CSS critique ?
Le CSS critique est l’ensemble minimal de styles requis pour afficher le contenu visible sans défilement. L’intégrer dans des balises <style> placées dans <head> élimine, pour la vue initiale, la requête de feuille de style qui bloque le rendu.
Ressources bloquant le rendu
Tout élément <link rel="stylesheet"> placé dans l’en-tête bloque le rendu. Les scripts dépourvus de async/defer bloquent également l’analyse du HTML. Réduire les ressources bloquant le rendu améliore directement le rendu du plus grand élément de contenu (LCP) et le premier rendu de contenu (FCP).
Extraction du CSS critique
Des outils comme critical (npm), Penthouse et les extracteurs fondés sur Puppeteer effectuent le rendu d’une page à des tailles de fenêtre précises et récupèrent les styles qui s’appliquent aux éléments visibles. Le résultat est intégré à la page ; la feuille de style complète est chargée de manière asynchrone.
Charger le CSS non critique de manière asynchrone
Chargez la feuille de style complète sans bloquer le rendu en utilisant media="print" avec un remplacement dans onload, ou le modèle rel="preload" + as="style" + onload="this.rel='stylesheet'".
<pre class="snippet"><link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript></pre>Les requêtes média comme indications de chargement
Les fichiers CSS chargés avec une requête média qui ne correspond pas, par exemple media="print", sont téléchargés avec une faible priorité et ne bloquent pas le rendu. Il s’agit de l’astuce classique pour charger des feuilles de style sans bloquer le chemin critique.
HTTP/2 et séparation du CSS
Avec le multiplexage HTTP/2, séparer le CSS en de nombreux petits fichiers entraîne moins de surcharge qu’avec HTTP/1. Chargez uniquement le CSS nécessaire à chaque route, comme home.css ou checkout.css, plutôt qu’un paquet monolithique contenant les styles de toutes les pages.
CSS et Scanner de préchargement
Le Scanner de préchargement du navigateur détecte tôt les balises de feuille de style <link> et commence à les télécharger avant que l’analyseur HTML ne les atteigne. Assurez-vous que les feuilles de style se trouvent dans <head>, et non dans body, afin que le Scanner de préchargement les détecte rapidement.
Mesurer l’impact du blocage du rendu
Le panneau Réseau de Chrome DevTools affiche le temps de blocage des ressources dans le diagramme en cascade. Lighthouse signale « Éliminer les ressources bloquant le rendu » et indique les économies pour chaque ressource. WebPageTest affiche renderBlockingResources dans sa vue en bande de film.
CSS critique côté serveur
Des frameworks comme Next.js et Astro intègrent automatiquement le CSS critique pendant le SSR. Le serveur détermine quels styles s’appliquent au HTML initial et les intègre : aucune étape d’extraction côté client n’est nécessaire.
Compromis pratiques
Intégrer trop de CSS augmente la taille du HTML, ralentit le TTFB et réduit l’efficacité de la mise en cache (le HTML n’est pas mis en cache aussi longtemps que les fichiers CSS). Visez au plus 14 Ko de CSS critique intégré afin de tenir dans la première fenêtre de congestion TCP.
Vérification des connaissances
Pourquoi une feuille de style qui bloque le rendu retarde-t-elle le premier rendu de contenu ?
Résumé
Le CSS critique intègre les styles du contenu visible sans défilement afin d’éliminer les délais dus au blocage du rendu. Chargez le CSS restant de manière asynchrone à l’aide du préchargement ou d’astuces fondées sur les requêtes média. Mesurez l’impact avec Lighthouse et DevTools, et visez une charge de CSS critique inférieure à 14 Ko pour obtenir des performances optimales.
Questions Fréquemment Posées
La leçon « CSS critique et blocage du rendu » est-elle gratuite ?
Oui — le texte complet de « CSS critique et blocage du rendu » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « CSS critique et blocage du rendu » ?
Intégrez le CSS critique visible au-dessus de la ligne de flottaison et différez les styles non critiques afin d’éliminer le blocage du rendu. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « CSS critique et blocage du rendu » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- CSS critique et blocage du rendu
- Mise en page, peinture et composition : la chaîne de rendu
- will-change et promotion des couches
- Couverture CSS et styles inutilisés