Afficher rapidement le premier écran
Le Critical CSS regroupe les règles nécessaires au premier écran d’une page donnée. Les livrer en amont peut permettre l’affichage de ce premier écran pendant le chargement du reste de la feuille de style.
L’inlining a un coût : ces règles s’ajoutent au HTML et peuvent dupliquer une feuille de style téléchargée séparément. Il est utile lorsqu’il supprime un vrai délai de rendu, et non lorsqu’il déplace simplement toutes les règles de style dans le document.
Repérer les règles dont le premier écran a besoin
Inspectez le premier écran à des largeurs représentatives, sur ordinateur et sur mobile. Identifiez l’en-tête, la navigation, le titre principal, l’image et les contrôles, puis vérifiez quelles règles de mise en page, de typographie et de composants ils exigent.
Une fiche produit et une page de catégorie peuvent nécessiter des règles différentes. Les menus masqués, les points de rupture responsive et les polices de secours peuvent créer des dépendances qu’une capture d’écran sur ordinateur ne montre pas.
Tester les styles extraits
Gardez la feuille de style complète disponible pour le reste de la page. Dans un navigateur de test, retardez-la volontairement et inspectez le premier écran : éléments sans mise en forme, règles de mise en page manquantes, contrôles illisibles. Vérifiez le repli si un mécanisme de chargement en JavaScript échoue.
Comparez les premières visites et les visites suivantes. Un gain sur une première visite peut être annulé par du CSS dupliqué ou par la perte du bénéfice du cache. Utilisez le waterfall des requêtes et la trace de rendu pour vérifier que la modification supprime le délai d’origine.
Garder la cohérence avec le design
Revérifiez l’extraction après chaque changement de police, de composant ou de point de rupture. Un Critical CSS obsolète peut provoquer un flash de styles incorrects, ou un décalage à l’arrivée de la feuille complète.
Il n’existe aucun budget d’octets universel qui garantisse une extraction correcte. Le bon résultat : un premier écran rendu rapidement et stable, le reste des styles étant chargé de façon fiable.