Éviter le CSS bloquant l’affichage
Le CSS bloque le rendu par défaut. Utilisez types et requêtes média pour débloquer l'affichage et accélérer le premier rendu de vos pages.
Par défaut, le CSS est une ressource qui bloque le rendu : le navigateur n’affiche aucun contenu tant qu’il n’a pas construit le CSSOM. La raison est simple : pour bâtir l’arborescence de rendu, il a besoin à la fois du DOM (issu du HTML) et du CSSOM (issu du CSS). Sans CSS, une page s’afficherait sans style, dans un état souvent inutilisable, un effet connu sous le nom de FOUC (Flash of Unstyled Content).
Pour le SEO, maîtriser ce blocage est décisif. Le CSS critique conditionne le délai du premier rendu, donc le FCP et le LCP : il s’inscrit pleinement dans le travail visant à comprendre le chemin critique de rendu. L’objectif n’est pas de supprimer le CSS, mais de transmettre au plus vite celui qui est nécessaire au premier affichage et de rendre non bloquant le CSS qui ne l’est pas.
Le CSS qui bloque le rendu reste l’un des freins les plus sous-estimés que je rencontre en audit. On accepte sans broncher qu’une feuille de styles entière retarde le premier affichage, alors qu’une partie ne sert qu’à l’impression ou à certains écrans. Découper le critique du reste avec les requêtes média est souvent un gain rapide sur le FCP.
Pourquoi le CSS bloque le rendu
Le navigateur considère le CSS comme suffisamment critique pour suspendre l’affichage jusqu’à son traitement. La comparaison d’une page avec et sans CSS le montre clairement : sans feuille de style, le contenu apparaît brut et désorganisé. Bloquer le rendu jusqu’à disposer du CSSOM évite cette mauvaise expérience.
La règle à retenir : le CSS est une ressource bloquant l’affichage, transmettez-le au client dès que possible pour optimiser le délai de premier rendu, un geste central pour optimiser le chemin critique. Mais tout le CSS n’est pas nécessaire en permanence : certaines feuilles ne servent qu’à l’impression ou à des écrans larges. Inutile de bloquer le rendu pour celles-ci.
Débloquer avec les requêtes média
Les types de média et les requêtes multimédias permettent de marquer certaines feuilles comme non bloquantes pour le rendu initial. Une feuille sans type ni requête s’applique dans tous les cas et bloque donc toujours le rendu. Une feuille réservée à l’impression ne bloque pas le premier affichage. Une feuille assortie d’une requête est évaluée au chargement : elle ne bloque que si la condition est remplie.
Le tableau ci-dessous récapitule le comportement de quelques déclarations courantes, puis l’exemple de code montre la syntaxe correspondante. En complément, pensez à compresser et minifier vos feuilles pour réduire encore le délai du premier rendu.
| Déclaration link | Comportement au premier rendu | Remarque |
|---|---|---|
rel=stylesheet (sans media) |
Bloquant |
S’applique dans toutes les conditions |
media= »all » |
Bloquant |
Type par défaut, équivalent à sans media |
media= »print » |
Non bloquant |
Appliqué uniquement à l’impression |
media= »(min-width: 40em) » |
Selon la condition |
Bloquant seulement si la requête correspond |
media= »(orientation: portrait) » |
Selon la condition |
Évalué dynamiquement au chargement |
<!-- Bloquant : nécessaire au premier rendu -->
<link href="style.css" rel="stylesheet" />
<!-- Non bloquant : réservé à l'impression -->
<link href="print.css" rel="stylesheet" media="print" />
<!-- Conditionnel : bloque seulement si la requête correspond -->
<link href="large.css" rel="stylesheet" media="(min-width: 40em)" />Le blocage du rendu concerne uniquement le fait de retenir ou non le premier affichage sur une ressource. Dans tous les cas, le navigateur télécharge le CSS, simplement avec une priorité plus faible pour les feuilles non bloquantes. Soignez donc vos types et requêtes média : une feuille mal déclarée comme bloquante alors qu’elle n’est pas nécessaire au premier rendu pénalise inutilement le chemin critique.
À faire
- livrer le CSS critique le plus tôt possible
- assigner un media adapté aux feuilles conditionnelles
- alléger le CSS pour réduire le délai du premier rendu
- vérifier l’orientation et la largeur ciblées par vos requêtes
À éviter
- charger tout le CSS de façon bloquante sans distinction
- oublier le media sur une feuille d’impression
- croire qu’une feuille non bloquante n’est pas téléchargée
- sous-estimer l’impact des requêtes média sur le chemin critique
Points clés à retenir
- Retenez que le CSS bloque le rendu par défaut
- Utilisez types et requêtes média pour débloquer les feuilles non critiques
- Réservez media="print" aux styles d'impression
- Sachez que le CSS non bloquant est tout de même téléchargé, à priorité réduite
- Transmettez le CSS critique au client dès que possible
Éviter le CSS bloquant, c’est livrer vite le CSS critique et rendre le reste non bloquant.
Quiz : testez vos connaissances
Quiz : testez vos connaissances
-
Pourquoi le CSS bloque-t-il l'affichage par défaut ?
- Parce que le navigateur attend le chargement complet de toutes les images avant de lire le CSS
- Parce que le navigateur a besoin du CSSOM pour construire l'arborescence de rendu, sans quoi la page s'afficherait dans un état souvent inutilisable
- Parce que le CSS doit être validé par un serveur distant avant tout affichage
Le navigateur a besoin du CSSOM, construit à partir du CSS, pour assembler l’arborescence de rendu. Sans lui, la page apparaîtrait brute et désorganisée, d’où ce blocage par défaut.
-
Comment rendre une feuille CSS non bloquante pour le premier rendu ?
- En supprimant tous les sélecteurs de la feuille pour la vider
- En lui attribuant un attribut media qui ne correspond pas au contexte de l'affichage, par exemple media="print"
- En la plaçant obligatoirement à la fin du document HTML
Une feuille dotée d’un attribut
mediaqui ne correspond pas au contexte du premier rendu, commemedia="print"ou une requête non satisfaite, ne bloque pas l’affichage initial. -
Une feuille CSS marquée comme non bloquante est-elle ignorée par le navigateur ?
- Oui, elle n'est téléchargée que si l'utilisateur lance une impression
- Oui, elle est complètement ignorée et jamais téléchargée
- Non, le navigateur la télécharge quand même, mais avec une priorité plus faible
Le blocage du rendu concerne seulement la rétention du premier affichage. Une feuille non bloquante est tout de même téléchargée, simplement avec une priorité moindre, sans retarder le premier rendu.
À propos de l'auteur
Besoin d'un accompagnement SEO ?
Votre CSS retarde le premier rendu et vous ne savez pas quoi rendre non bloquant ?