Isolez les règles utilisées par le haut de page

Les développeurs front peuvent isoler le CSS nécessaire avant d’optimiser une page dont la partie visible doit apparaître plus vite.

Isolez les règles utilisées par le haut de page. La sortie reste sur votre appareil et peut être copiée ou adaptée dès qu’elle apparaît.

Mode d’emploi

Collez le code HTML de la partie visible en haut de la page.
Ajoutez une ligne de séparation composée de deux tirets.
Collez ensuite la feuille de style complète utilisée par la page.
Lancez l’extraction pour obtenir les règles utiles au premier rendu.

Exemple

Un développeur front reprend une page d’accueil dont le titre et le menu doivent apparaître vite. Il colle le HTML de l’en-tête, sépare avec deux tirets, puis ajoute la feuille de style complète. Le résultat aide à préparer un CSS critique avant optimisation. Il teste ensuite le rendu sur une copie pour repérer les règles manquantes.

Entrée

<h1 class="title">Bonjour</h1>
--
.title { color: #333; }
p { margin: 0; }

Résultat

/* CSS critique : 1 regle(s) gardee(s) sur 2 */
.title { color: #333; }

/* --- ecartees : 1 regle(s) */
/* p { margin: 0; } */

/* A poser en <style> dans le <head>, et a charger le reste en differe.
   Ce tri est STATIQUE : il ne voit ni les classes ajoutees par JavaScript, ni
   les etats declenches plus tard (:hover, :focus). Verifiez le rendu avant de
   supprimer quoi que ce soit de la feuille complete. */

Limites et formats

L’outil ne télécharge pas une page depuis une adresse, il faut fournir le HTML et le CSS.
Les styles injectés par JavaScript ou les pseudo-éléments complexes peuvent manquer.
Le résultat doit être testé dans le navigateur avant toute mise en production.
Une page très volumineuse peut demander une sélection manuelle plus fine.
Les commentaires et les règles inutilisées peuvent alourdir le résultat.

Où le traitement a lieu

Le HTML et le CSS que vous collez restent dans votre navigateur. L’extraction des règles s’effectue sur votre appareil, sans envoi vers l’extérieur. Le résultat n’est pas conservé une fois la page quittée.

Questions fréquentes

Quel HTML dois-je fournir ?

Fournissez le balisage de la partie visible au chargement, comme l’en-tête, la navigation et le premier bloc de contenu. Le CSS critique dépend de ce qui apparaît avant tout défilement. Un extrait trop large donne des règles moins ciblées.

Pourquoi certaines règles manquent-elles ?

L’outil analyse le HTML et le CSS fournis, sans exécuter le JavaScript de la page. Les classes ajoutées dynamiquement ou les styles calculés par le navigateur peuvent donc être absents. Complétez le résultat à la main si nécessaire.

Puis-je publier le CSS obtenu tel quel ?

Il vaut mieux le tester d’abord sur une copie de la page. Vérifiez que le rendu initial ne casse pas et que les polices restent disponibles. Le CSS critique complète la feuille principale, il ne la remplace pas toujours.