Générateur de Critical CSS.

Qu'est-ce que le Critical CSS

Le Critical CSS est un ensemble de déclarations CSS utilisées pour le rendu du viewport visible. On qualifie souvent ce dernier de contenu « au-dessus de la ligne de flottaison ». C'est la partie d'une page web visible dans le navigateur sans avoir à faire défiler. Comme le viewport visible est la première chose que voit un visiteur, vous devez prioriser son rendu. Le Critical CSS permet précisément de le faire !

Pourquoi utiliser le Critical CSS

En résumé : parce que c'est bien plus rapide ! Le CSS du chemin critique (au-dessus de la ligne de flottaison) est l'une des techniques les plus importantes et efficaces pour optimiser le chargement du CSS. En raison du fonctionnement des navigateurs modernes, tous les styles issus de fichiers externes sont considérés comme render blocking. Cela signifie qu'un navigateur ne commencera pas le rendu (plus précisément, la génération du render tree) tant qu'il n'aura pas téléchargé tous les fichiers CSS externes dans le head de la page. Quand un navigateur doit télécharger un ou plusieurs fichiers CSS, la page peut facilement être bloquée pendant 100 ms ou plus. Google PageSpeed Insights recommande d'éliminer les ressources render blocking pour que votre page charge plus vite.
Une solution consiste à utiliser le Critical CSS. Le Critical CSS regroupe le CSS nécessaire pour afficher uniquement la partie visible de la page. Ce Critical CSS est généralement inséré inline, dans le head de la page. Résultat : le navigateur n'a pas besoin de télécharger un ou plusieurs fichiers CSS pour commencer le rendu. Pendant que la page s'affiche, le navigateur télécharge le reste des fichiers CSS en arrière-plan.

Comment utiliser le générateur de Critical CSS ?

Vous devez d'abord générer le Critical Path CSS de votre page web. Indiquez simplement l'URL de votre page, puis cliquez sur « Générer le Critical CSS ». Après quelques secondes, le CSS extrait s'affiche.
Copiez ce CSS et placez-le dans le <head> de la page au sein d'une balise <style>, juste sous le <title>
L'étape suivante consiste à différer votre CSS d'origine. Il existe 3 méthodes pour différer votre CSS.

1. Précharger le CSS et remplacer l'attribut rel au chargement
2. Charger le CSS avec media=print et remplacer l'attribut media au chargement
3. Placer les liens CSS d'origine dans le footer de la page

Mise en cache du CSS non critique

Le Critical CSS est extrêmement rapide pour les nouveaux visiteurs qui n'ont pas encore vos fichiers CSS dans le cache de leur navigateur. Pour les visiteurs récurrents, le Critical CSS a généralement peu d'intérêt, car les fichiers CSS peuvent être chargés directement depuis le cache du navigateur.

Faut-il combiner les feuilles de style ?

Est-il plus rapide de combiner vos feuilles de style après avoir mis en place le Critical CSS ? Il n'y a pas de réponse simple à cette question. Parfois oui, parfois non. Cela dépend du critical rendering path. S'il y a plus de 5 ressources à haute priorité, combiner quelques feuilles de style a généralement du sens.

Comment fonctionne le générateur de Critical CSS ?

Le générateur de Critical CSS fonctionne sur une plateforme Node.js sur mesure. Nous chargeons votre page web dans un véritable navigateur basé sur Chrome. Nous évaluons votre site sur différents viewports et déterminons quelles parties de vos feuilles de style servent au rendu du viewport visible (la partie visible de votre page). Ensuite, nous nettoyons et minifions le CSS nécessaire au rendu.

Existe-t-il un plugin WordPress pour votre générateur de Critical CSS ?

Oui. Il s'agit du plugin Core Web Vitals, spécialement conçu pour fonctionner avec notre extracteur de Critical Path.

Feedback / statut bêta

Le générateur de Critical CSS est actuellement en version bêta. J'expérimente encore en permanence. Le générateur de Critical CSS ne fonctionne pas chez vous ? Pas d'inquiétude... réessayez dans 5 minutes !

Un feedback ou une fonctionnalité manquante ? Dites-le-moi