Une feuille de style dans l’en-tête, sans condition, bloque le premier affichage : le navigateur attend ce fichier avant de peindre. C’est voulu pour le CSS du haut de page. Ça ne l’est plus quand un thème charge cinq feuilles de plugins avant même le titre. Le correctif consiste à garder le CSS critique, et à sortir le reste du chemin de rendu.
Voir quelles feuilles bloquent
- Ouvrez la page en navigation privée, outils de développement, Lighthouse, catégorie Performances, mobile.
- Lisez l’audit « Éliminez les ressources qui bloquent le rendu ». Chaque CSS listé est demandé avant la première peinture.
- Dans Réseau, filtrez CSS. Notez la taille transférée et si le fichier vient d’un plugin que cette page n’utilise pas (slider sur une page article, par exemple).
- Repérez l’élément du LCP (souvent une image ou le titre). Le CSS qui le positionne et le colore doit rester dans le premier envoi.
Les seuils d’expérience et la lecture terrain sont dans Core Web Vitals en 2026. Le pas à pas des outils est dans tester les Core Web Vitals. Un CSS bloquant allonge surtout le LCP. Il peut aussi provoquer un CLS si le style arrive en deux temps et que les blocs changent de taille.
Compressez ces fichiers (Brotli ou Gzip) : ça raccourcit le transfert, ça ne les retire pas du chemin critique. Voir Brotli et Gzip.
Garder le critique, différer le reste
Le CSS critique est celui du premier écran. Deux pratiques tiennent la route.
L’inliner peu. Collez dans un <style> de l’en-tête uniquement les règles du header, du titre et de l’image principale. N’y collez pas tout le thème : un style inline géant retarde le HTML.
Charger la feuille complète sans bloquer, une fois ce premier style en place :
``
<link rel="preload" href="/theme.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/theme.css"></noscript>
``
Le noscript couvre les navigateurs sans JavaScript. Testez sans script : la page doit rester lisible.
L’ancienne variante media="print" changée en all au chargement fait le même travail. N’appliquez ni l’une ni l’autre à la seule feuille qui habille le contenu visible : vous obtiendrez un flash sans style, puis un saut de mise en page, donc un CLS.
media="(min-width: 900px)" est légitime pour une feuille qui ne concerne pas le mobile. Elle ne doit pas contenir des règles dont le mobile a besoin.
Réduire avant de différer
Différer un fichier inutile reste un fichier à maintenir. Avant le motif de chargement :
- retirez les CSS de plugins désactivés ou absents de cette page ;
- évitez une feuille par bloc de constructeur si elles peuvent être fusionnées sans redevenir énormes ;
- ne chargez pas la feuille d’une police entière pour un mot. Les polices se traitent avec
font-displayet un sous-ensemble, pas en bloquant trois familles.
Sur une fiche produit, le CSS du thème, de la galerie et des avis s’additionnent. Le diagnostic côté page est dans fiche produit lente.
Vérifier que le design tient
Après le changement, en mobile et en ordinateur :
- le premier écran a ses couleurs et ses emplacements, sans flash blanc long ;
- le LCP de laboratoire ne s’est pas dégradé (l’image principale n’attend plus une feuille tardive pour avoir une taille) ;
- le CLS de laboratoire n’a pas augmenté ;
- un parcours clavier et la page sans JavaScript restent utilisables grâce au
noscript.
Si une section basse de page apparaît sans style puis se corrige, son CSS est encore dans le fichier différé et il manquait au critique. Déplacez ces quelques règles dans le <style> initial, pas toute la feuille. Rechargez en navigation privée : le cache du navigateur sert volontiers l’ancienne feuille et masque le flash que verront les nouveaux visiteurs.