Générateur de CSS critique.

Générez le CSS du chemin critique et accélérez votre site Web

⚙

Le CSS critique en 3 étapes simples

  1. Entrez l'URL de la page pour laquelle vous souhaitez créer un CSS critique
  2. Collez les résultats dans une balise <style> sur votre page, juste en dessous de <title>
  3. Différez le chargement des feuilles de style originales
    <link rel = "preload" href = "orig.css" type = "text / css" as = "style" onload = "this.onload = null; this.rel = 'stylesheet' ; "/>

Qu'est-ce que le CSS critique

Le CSS critique est une collection de déclarations CSS utilisées pour rendre la zone d'affichage visible. La zone d'affichage visible est souvent appelée "contenu au-dessus de la ligne de flottaison". C'est la partie d'une page Web que vous pouvez voir dans votre navigateur sans avoir à faire défiler. Étant donné que la zone d'affichage visible est la première chose qu'un visiteur voit, vous devez prioriser le rendu de la zone d'affichage visible. Le CSS critique peut vous aider à faire cela !

Pourquoi devrais-je utiliser le CSS critique

En bref : parce que c'est beaucoup plus rapide ! Le CSS du chemin critique (au-dessus de la ligne de flottaison) est l'une des techniques les plus importantes et les plus impactantes disponibles pour optimiser la livraison de CSS. En raison de la façon dont tous les navigateurs modernes fonctionnent, tous les styles provenant de fichiers externes sont considérés comme bloquant le rendu. Cela signifie qu'un navigateur ne commencera pas le rendu (générer l'arbre de rendu pour être précis) tant qu'il n'aura pas téléchargé tous les fichiers CSS externes dans l'en-tête de la page. Lorsqu'un navigateur doit télécharger 1 ou plusieurs fichiers CSS, une page peut facilement bloquer 100 ms ou plus. Google PageSpeed Insights suggère d'éliminer les ressources bloquant le rendu pour aider votre page à se charger plus rapidement.
Une façon d'éviter cela est d'utiliser le CSS critique. Le CSS critique est une collection de CSS requise pour afficher uniquement la partie visible de la page. Ce CSS critique est souvent affiché en ligne, dans l'en-tête de la page. En conséquence, un navigateur n'a pas à télécharger 1 ou plusieurs fichiers CSS avant de pouvoir commencer le rendu. Pendant ce temps, alors que la page est affichée, votre navigateur télécharge les fichiers CSS finaux en arrière-plan.

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

Tout d'abord, vous devez générer le CSS du chemin critique pour votre page Web. Fournissez simplement l'URL de votre page, puis appuyez sur "Générer le CSS critique". Après quelques secondes, vous verrez le CSS extrait
Copiez ce CSS et placez-le dans le <head> de la page dans une balise <style> sur votre page, juste en dessous de <title>
L'étape suivante consiste à différer votre CSS d'origine. Il existe 3 méthodes pour différer votre CSS.

  1. Préchargez le CSS et permutez le rel au chargement
  2. Chargez le CSS avec media=print et permutez l'élément media au chargement
  3. Placez les liens CSS originaux dans le pied de page de votre page

Mise en cache du CSS non critique

Le CSS critique est extrêmement rapide pour les nouveaux visiteurs qui n'ont pas encore vos fichiers CSS stockés dans le cache de leur navigateur. Pour les visiteurs récurrents, il n'y a généralement que peu besoin de CSS critique car les fichiers CSS peuvent être chargés à partir du cache du navigateur.

Dois-je combiner mes feuilles de style ?

Est-ce plus rapide, après avoir implémenté le CSS critique, de combiner vos feuilles de style ? Il n'y a pas de réponse facile à cette question. Parfois, il est plus rapide de combiner vos feuilles de style et parfois non. Cela a à voir avec le chemin de rendu critique. S'il y a plus de 5 ressources à haute priorité, il est généralement logique de combiner quelques feuilles de style.

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

Le générateur de CSS critique fonctionne sur une plateforme NodeJs personnalisée. Nous visitons essentiellement votre page Web avec un vrai navigateur basé sur Chrome. Nous évaluons votre site Web sur différentes fenêtres d'affichage et déterminons quelles parties de vos feuilles de style sont utilisées pour le rendu de la zone d'affichage visible (la partie visible de votre page). Nous nettoyons et minimisons ensuite le CSS nécessaire au rendu.

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

Oui, il y en a un. Il s'appelle le plugin Core Web Vitals, spécifiquement conçu pour fonctionner avec notre extracteur de chemin critique.

Feedback / statut bêta

Actuellement, le générateur de CSS critique est en statut bêta. Cela signifie que j'expérimente encore tout le temps. Le générateur de CSS critique ne fonctionne pas pour vous ? Ne vous inquiétez pas... réessayez dans 5 minutes !

Commentaires ou fonctionnalité manquante ? Faites-le moi savoir