# CSS critique sur WordPress : générer, injecter et charger le reste en différé
> Générez le CSS critique par template, injectez-le dans le head et différez la feuille principale pour éliminer le flash de contenu sans style.
- Auteur : Clément Hadrot
- Publié le : 2020-01-15
- Mis à jour le : 2020-01-15
- Catégorie : Performance
- URL : https://wpmoderne.dev.wordpress-developpement.fr/performance/css-critique-wordpress-generer-injecter-differe/
## L’essentiel
- Un CSS critique par gabarit, pas un seul pour tout le site
- Injection inline, jamais via une requête bloquante
- Chargement différé sans provoquer de FOUC
Un client nous a envoyé une capture d'écran un peu paniquée : sa page d'accueil affichait pendant une fraction de seconde un mur de texte sans mise en forme, avant que tout se stabilise d'un coup. Ce phénomène a un nom, le FOUC (flash of unstyled content), et il vient presque toujours de la même cause : le navigateur bloque le rendu tant qu'il n'a pas téléchargé et parsé la feuille de style principale.
La solution consiste à extraire uniquement les règles nécessaires à l'affichage de ce qui est visible sans défiler (le fameux « above the fold »), à les injecter directement dans le ``, puis à charger le reste du CSS sans bloquer le rendu. Voici comment le mettre en place proprement sur un thème WordPress classique, gabarit par gabarit.
## Étape 1 : identifier les gabarits qui comptent
Il est tentant de vouloir un seul CSS critique « générique » pour tout le site. C'est une erreur : la page d'accueil, une fiche produit et un article de blog n'affichent pas le même contenu au-dessus de la ligne de flottaison. Commencez par lister vos gabarits réels : `front-page.php`, `single.php`, `page.php`, `archive.php`, et éventuellement une fiche produit WooCommerce si le site en propose.
Pour chaque gabarit, prévoyez un fichier de CSS critique distinct, par exemple `critical-front.css`, `critical-single.css`, etc. C'est plus de travail à la mise en place, mais c'est la seule approche qui tienne dans la durée.
## Étape 2 : générer le CSS critique
Plusieurs outils en ligne de commande font ce travail en rendant la page dans un navigateur headless et en relevant les règles réellement appliquées à la zone visible. Le principe reste le même quel que soit l'outil choisi :
```
npx critical https://exemple-client.test/ \
--base ./dist/ \
--css ./dist/style.css \
--width 1280 --height 720 \
--target critical-front.css
```
Il faut générer une version par largeur d'écran significative (mobile et desktop au minimum), car les éléments visibles sans défiler ne sont pas les mêmes. Dans la pratique, deux CSS critiques par gabarit (mobile-first, puis un ajustement desktop) suffisent dans la grande majorité des cas.
> L'essentiel à retenir : Un CSS critique par gabarit, pas un seul pour tout le site ; Injection inline, jamais via une requête bloquante ; Chargement différé sans provoquer de FOUC
## Étape 3 : injecter le CSS critique dans le head
Le CSS critique doit être **inline**, jamais chargé via une balise `` classique, sinon vous réintroduisez exactement le problème que vous cherchez à résoudre. Sur WordPress, on accroche cette injection à `wp_head` avec une priorité basse pour qu'elle arrive tôt :
```
function wpm_inline_critical_css() {
$template = wpm_get_current_template_slug();
$path = get_stylesheet_directory() . "/critical/{$template}.css";
if ( file_exists( $path ) ) {
echo '';
}
}
add_action( 'wp_head', 'wpm_inline_critical_css', 1 );
```
La fonction `wpm_get_current_template_slug` est à écrire selon votre logique de gabarits (elle peut simplement s'appuyer sur `is_front_page()`, `is_single()`, etc.). L'essentiel est que le fichier lu corresponde exactement à la page affichée.
## Étape 4 : différer la feuille de style principale
Une fois le CSS critique en place, la feuille complète doit être chargée sans bloquer le rendu. La technique la plus fiable reste le chargement en `media="print"` basculé en `media="all"` une fois chargé, avec un repli en `