Générateur de CSS critique.

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

⚙

Le CSS critique en 3 étapes simples

  1. Entrez l'URL de la page pour laquelle générer le CSS critique
  2. Collez les résultats dans une balise <style> sur votre page, juste sous le <title>
  3. Différez le chargement des feuilles de style d'origine
    <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 un ensemble de déclarations CSS utilisé pour afficher le viewport visible. Ce viewport visible est souvent appelé le contenu au-dessus de la ligne de flottaison. C'est la partie de la page visible dans le navigateur sans défilement. Le visiteur voit ce viewport en premier. Priorisez son rendu. Le CSS critique vous permet de le faire.

Pourquoi utiliser le CSS critique ?

En bref : 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 efficaces pour optimiser la livraison du CSS. Le fonctionnement des navigateurs modernes rend tous les styles des fichiers externes render blocking. Le navigateur ne démarre pas le rendu (la génération du render tree) avant d'avoir téléchargé tous les fichiers CSS externes du head de la page. Quand un navigateur doit télécharger 1 ou plusieurs fichiers CSS, une page bloque facilement 100 ms ou plus. PageSpeed Insights recommande d'éliminer les ressources render blocking pour accélérer le chargement de la page.
Le CSS critique évite ce blocage. Il regroupe le CSS nécessaire pour afficher uniquement la partie visible de la page. Ce CSS critique s'insère souvent en inline, dans le head de la page. Ainsi, le navigateur n'a pas à télécharger de fichiers CSS avant de lancer le rendu. Pendant l'affichage de la page, votre navigateur télécharge les fichiers CSS finaux en arrière-plan.

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

Vous devez d'abord générer le CSS du chemin critique pour votre page. Indiquez l'URL de votre page et cliquez sur « Générer le CSS critique ». Vous obtenez le CSS extrait en quelques secondes.
Copiez ce CSS et placez-le dans le <head> de la page, dans 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échargez le CSS et permutez l'attribut rel au chargement
  2. Chargez le CSS avec media=print et permutez l'élément media au chargement
  3. Placez les liens CSS d'origine dans le footer 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, le CSS critique est souvent inutile car les fichiers CSS se chargent depuis le cache du navigateur.

Faut-il combiner les feuilles de style ?

Est-il plus rapide, après avoir implémenté le CSS critique, de combiner vos feuilles de style ? Il n'y a pas de réponse simple. Parfois c'est plus rapide, parfois non. Cela dépend du chemin critique de rendu. Au-delà de 5 ressources à priorité élevée, combiner quelques feuilles de style est logique.

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

Le générateur de CSS critique tourne sur une plateforme NodeJS sur mesure. Nous visitons votre page avec 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 CSS critique ?

Oui. Il s'agit du plugin Core Web Vitals, conçu spécifiquement pour fonctionner avec notre extracteur de chemin critique.

Retours / statut bêta

Actuellement, le générateur de CSS critique est en bêta. J'expérimente en permanence. Le générateur ne fonctionne pas pour vous ? Pas d'inquiétude... réessayez dans 5 minutes !

Un retour ou une fonctionnalité manquante ? Contactez-moi