BrowserUX Critical CSS
Éliminez les CSS bloquants et améliorez drastiquement votre score LCP.
BrowserUX Critical CSS est
un plugin Vite qui extrait automatiquement le CSS nécessaire au rendu du contenu visible sans
défilement (above-the-fold), l'intègre directement dans le head sous forme de balise style,
et charge le reste de la feuille de style de manière asynchrone via le pattern link rel="preload".
L'extraction utilise un navigateur headless avec des dimensions de viewport configurables, pour une
précision maximale sur mobile comme sur desktop. Le résultat : une page qui s'affiche
instantanément sans attendre le téléchargement du moindre fichier CSS.
npm install vite-plugin-critical-css
Plugin pour Vite
Voir le CHANGELOG
Fonctionnalités clés de BrowserUX Critical CSS
- 🚀 Intègre le CSS critique (above-the-fold) directement dans le
headpour un premier affichage instantané - ⚡ Élimine les feuilles de style bloquantes pour un impact majeur sur le LCP
- 📱 Analyse multi-viewport, extrait le CSS pour mobile et desktop en une seule passe
- 🔁 Charge le CSS non-critique en différé avec
link rel="preload" as="style" onloadet un fallbacknoscript - 📄 Traite automatiquement tous les fichiers HTML du répertoire de sortie
- 🔍 Supporte les patterns glob pour cibler des pages spécifiques
- 🎯 Force l'inclusion de sélecteurs CSS actifs uniquement après exécution du JavaScript (ex. sélecteurs de thème)
- ⏱️ Timeout du navigateur headless configurable par page
- 📦 Journalisation des résultats par fichier en option
- 🛠️ Propulsé par penthouse, extraction headless directe, sans fichier temporaire intermédiaire
- 🖥️ Compatible WSL2, utilise un serveur HTTP local à la place des URLs
file://, pour que Chrome Windows puisse charger vos pages