Extracteur de CSS critique : styles above the fold en inline | We.Inc
Collez votre HTML et votre CSS, choisissez une taille d'écran et gardez uniquement les règles qui stylisent ce qui s'affiche avant de défiler. Copiez un bloc style inline et le motif de preload.
Extracteur de CSS critique
Le CSS critique est le petit ensemble de règles nécessaires pour afficher ce qu'un visiteur voit avant de défiler. Collez ici le HTML et la feuille de style d'une page, choisissez une taille d'écran, et cet outil met la page en page dans un cadre verrouillé, garde les règles qui correspondent aux éléments visibles, et vous fournit un bloc style inline ainsi qu'un lien de feuille de style différé.
Ce que l'extracteur conserve
Type de règle
Conservée quand
Pourquoi
Règle de style
Son sélecteur correspond à un élément dont le bord supérieur se trouve dans la hauteur choisie
Cet élément est affiché dès la première vue
html, body, :root, *
Toujours
Les polices, couleurs et propriétés personnalisées de base touchent tout ce qui est visible
Bloc @media
Conservé avec uniquement ses règles internes correspondantes
Les autres tailles d'écran obtiennent toujours le bon premier affichage
@font-face
Toujours (désactivable)
Le texte visible a besoin que sa police soit déclarée
@keyframes
Son nom est utilisé par une règle conservée
Les animations des éléments visibles fonctionnent toujours
Les navigateurs attendent chaque feuille de style du head avant d'afficher quoi que ce soit. Mettre en inline les quelques règles dont le premier écran a besoin, puis charger le fichier complet sans blocage, permet à la page d'apparaître plus tôt. Cet outil fait cette sélection pour vous à partir du code que vous collez. Il fonctionne dans votre navigateur et ne récupère jamais d'URL : collez donc le HTML et le CSS finaux de la page plutôt qu'un lien.
Collez le HTML de la page (le contenu du body suffit) et le CSS de sa feuille de style.
Choisissez un préréglage de taille d'écran ou saisissez une largeur et une hauteur de ligne de flottaison en pixels.
L'outil affiche votre HTML dans un cadre isolé à cette taille avec les scripts désactivés, puis teste chaque sélecteur sur les éléments à l'écran.
Copiez le bloc style inline pour le head et le lien preload qui charge ensuite la feuille de style complète. Les statistiques indiquent combien de règles ont été conservées et la taille du résultat.
Lancez-le à une taille de téléphone et à une taille d'ordinateur, puis fusionnez les deux résultats, car la ligne de flottaison n'est pas au même endroit sur chacun.
Les états interactifs comme :hover et :focus sont testés sur l'élément lui-même, donc un bouton visible garde sa règle de survol. Retirez-les à la main si vous voulez le résultat le plus léger.
Le contenu ajouté par JavaScript après le chargement n'est pas dans le HTML collé, ses styles ne sont donc pas détectés. Collez le HTML tel qu'il apparaît une fois rendu si votre page se construit dans le navigateur.
Gardez le bloc inline léger. web.dev conseille de garder le contenu above the fold sous environ 14 KB compressés pour qu'il arrive dans les premiers allers-retours.
Relancez l'extraction chaque fois que le haut de la page change. Un CSS critique obsolète provoque un flash de contenu sans style au premier chargement.
Questions fréquentes
Est-ce la même chose que les paquets Critical ou Penthouse ?
C'est la même idée, en plus simple. Ces outils en ligne de commande pilotent un vrai navigateur headless sur vos pages compilées. Cette page utilise votre propre navigateur et le code collé : considérez le résultat comme une approximation fidèle et testez la page ensuite.
Pourquoi le lien preload a-t-il besoin de onload ?
rel=preload avec as=style télécharge la feuille de style sans l'appliquer. Le gestionnaire onload passe rel à stylesheet dès que le fichier arrive, ce qui l'applique sans bloquer le premier affichage. La copie dans noscript couvre les visiteurs dont les scripts sont désactivés.
Mettre le CSS en inline nuit-il au cache ?
Les règles inline sont renvoyées avec chaque page HTML, c'est pourquoi le bloc doit rester léger. La feuille de style complète reste un fichier séparé, elle est donc mise en cache normalement après la première visite.
Peut-il lire mon site en ligne ?
Non. Une page statique dans votre navigateur ne peut pas charger le code d'un autre site, donc rien n'est récupéré. Ouvrez votre page, affichez sa source et sa feuille de style, puis collez les deux. Rien de ce que vous collez n'est envoyé.
Et si mon CSS utilise un framework comme Tailwind ?
Collez le fichier CSS compilé que produit votre build, pas la source avec les lignes @tailwind ou @import. L'extracteur travaille sur des règles finales, et les classes utilitaires de votre HTML sont testées comme n'importe quel autre sélecteur.
Où se trouve vraiment la ligne de flottaison
Il n'existe pas une seule ligne de flottaison. Un téléphone en portrait peut afficher 650 pixels de hauteur, un portable 800 et un grand écran davantage. Choisissez les tailles que vos visiteurs utilisent le plus, et prévoyez une marge sous la ligne, car les gens commencent souvent à défiler tout de suite.
L'extracteur considère un élément comme visible quand son bord supérieur se trouve au-dessus de la hauteur choisie. Un grand hero qui commence à l'écran et se termine en dessous est conservé, et c'est ce que vous voulez.
Intégrer le résultat à votre page
Placez le bloc style inline dans le head, avant tout autre élément qui s'affiche. Remplacez votre lien de feuille de style habituel par le motif preload pour que le reste du CSS se charge sans retarder le premier affichage.
Vérifiez le résultat avec un réseau bridé dans les outils de développement de votre navigateur. Si quelque chose saute ou change de style quand le fichier complet arrive, une règle d'un élément visible a été oubliée ; ajoutez-la au bloc inline.
Le motif de chargement que l'outil écrit
Règles critiques en inline, puis chargement du reste sans blocage
C'est le motif décrit sur web.dev. Le bloc style contient les règles extraites ; le lien preload récupère le fichier complet et l'applique au chargement, et la ligne noscript sert de solution de repli.
Limites connues d'un extracteur dans le navigateur
Ce qu'il faut vérifier à la main
Situation
Ce qui se passe
Que faire
Styles ajoutés par des scripts
Non vus, les scripts ne s'exécutent pas dans le cadre
Collez le HTML rendu plutôt que le template
Images sans width ni height
Peuvent s'écraser à une hauteur nulle et faire remonter le contenu suivant
Ajoutez les attributs width et height aux images
Polices web
Non téléchargées, le texte peut donc passer à la ligne différemment
Laissez une marge sous votre hauteur de ligne de flottaison
Sélecteurs rejetés par le navigateur
Écartés par le navigateur avant la vérification
Corrigez la syntaxe ; les statistiques indiquent combien de règles ont été lues
Pages très longues
Seul le premier écran est conservé, comme prévu
Relancez pour chaque taille d'écran qui vous importe
Extraire le CSS critique
L'outil se charge avec une page d'exemple de boulangerie pour que vous voyiez le résultat avant de coller votre propre code.
HTML de la page
CSS de la feuille de style
Taille d'écran
Tablette 820 x 1000
Portable 1366 x 768
Ordinateur 1920 x 1000
Largeur (px)
Hauteur de flottaison (px)
Toujours conserver les règles @font-face
Votre page à la taille choisie, scripts désactivés
La ligne en pointillés marque la ligne de flottaison.
{read} règles lues, {kept} conservées. Le CSS critique pèse {bytes} octets avant compression.
Mise en page en cours...
Aucune règle ne correspond. Vérifiez que le HTML et le CSS proviennent de la même page.