Générateur de CSS critique

Un widget de navigateur gratuit pour un générateur CSS critique avancé et un optimiseur au-dessus de la ligne de flottaison .

Optimiseur au-dessus de la ligne de flottaison

Générateur CSS critique et optimiseur au-dessus de la ligne de flottaison

Introduction

Le générateur CSS critique permet de résoudre les Core Web Vitals de Google et de supprimer la pénalité CSS inutilisée , uniquement sur la base du CSS minimum. Il permet d'obtenir un résultat au pixel près .

Le meilleur résultat CSS critique est obtenu dans un vrai navigateur.

Le widget du navigateur est exécuté sur la page sur laquelle le CSS critique doit être extrait et dispose donc d'un accès natif complet à l'environnement CSS d'origine.

Vous pouvez sélectionner les feuilles de style ou les éléments de feuille de style en ligne à partir desquels extraire le CSS critique. C'est pratique pour créer du CSS critique qui peut être partagé entre les pages.

Le widget du navigateur dispose également d'une fonction permettant de supprimer les CSS critiques des feuilles de style.

L'outil est sans espion. Pas de Google Analytics ni de suivi. Sûr à utiliser et peut être utilisé localement via un cache Service Worker.

Le widget de navigateur fournit un exemple de logiciel CSS critique plus avancé qui peut être utilisé via un navigateur Chrome dans Google Cloud. Consultez pour plus d’informations notre plugin d’optimisation professionnel .

Installer

Pour installer le widget, faites glisser ce lien🗔 Critical-CSS vers la barre des favoris ou copiez-collez le code ci-dessous.

javascript:(function(r,a,k,l,f,g,b,m){function n(c,b,d){a.open();b&&(r.onmessage=b);d&&a.addEventListener("securitypolicyviolation",d);a.write(c);a.close()}f="https://x.pagespeed.pro/";g="Critical-CSS widget";var c=a.createElement("script");c.src=f+"x.js";c.onerror=function(){function p(d){if(c=d?d.violatedDirective:0){if("script-src"==c||m)return;m=1;b&&l(b)}if(!q){var h=f+"#"+a.location;a.getElementById("e").innerHTML='<h2 style="color:red;">'+g+(c?' blocked by CSP <font color="blue">'+c+"</font>":" failed to load")+'.</h2><h3>Redirecting <a href="'+h+'">'+h+"</a>...</h3>";b=k(function(){a.location.href=h},3E3)}}var q;n("<h2>Loading "+g+" via Service Worker...</h2><iframe src="+f+'go height=50></iframe><p id="e"></p>',function(a){q=1;b&&l(b);n("<script>"+a.data+"\x3c/script>")},p);b=k(p,2E3)};a.head.appendChild(c)})(window,document,setTimeout,clearTimeout);

Fonctionnalités

1. Générateur CSS critique avancé

   1. Développé sur mesure basé sur PostCSS , l'un des meilleurs analyseurs CSS.
   2. Prend en charge plusieurs fenêtres (bureau + mobile) pour un CSS critique réactif .
   3. Marionnettiste comme le contrôle du navigateur, y compris le clic, les événements de la souris (survol, déplacement, etc.), le défilement, l'exécution de code javascript personnalisé et bien plus encore.
   4. Sortie CSS critique pure non optimisée brute.

2. Optimiseur au-dessus de la ligne de flottaison

   1. Comparez le CSS critique avec le CSS d'origine.
   2. Règles de mesure de pixel personnalisables.

3. Outils d'optimisation avancés

   1. Suppresseur de CSS inutilisé pour supprimer les CSS critiques des feuilles de style.
   2. Logiciel professionnel de compression CSS (minify) et d'optimisation.
   3. Réparation CSS cassée. Un outil pour corriger les CSS malformés.
   4. Préfixe automatique. Un outil pour appliquer les préfixes du navigateur au CSS.
   5. Statistiques et analyses CSS.
   6. CSS embellir.
   7. Charpie CSS avancée.
   8. Suppresseur de CSS en double.
   9. Éditeur CSS avancé connecté à la charpie CSS avec des conseils d'optimisation.

Comment utiliser

Étape 1 : démarrer le widget du navigateur sur une page

Accédez à la page pour laquelle vous souhaitez extraire le CSS critique et démarrez le widget du navigateur. Cliquez ici pour les instructions d'installation.

Étape 2 : générer du CSS critique

Le générateur CSS critique est accessible via l'onglet Outils dans l'en-tête.

Configurez le JSON à l'aide des options de la documentation .

Étape 3 : optimiser le résultat

La sortie du générateur CSS critique est brute et nécessite une optimisation supplémentaire telle que la compression.

Le bouton Optimiser dans le menu de l'éditeur permet d'appliquer une optimisation et une compression avancées du code.

Documentation

Générateur de CSS critique

Le générateur CSS critique accepte les options suivantes.

Afficher un exemple de configuration

{
  "atRulesToKeep": [],
  "atRulesToRemove": [],
  "selectorsToKeep": [
    "*",
    "*:before",
    "*:after",
    "html",
    "body"
  ],
  "selectorsToRemove": [
    "/\#C/",
    "/\.chattxt/"
  ],
  "propertiesToKeep": [],
  "propertiesToRemove": [
    "/(.*)transition(.*)/i",
    "cursor",
    "pointer-events",
    "/(-webkit-)?tap-highlight-color/i",
    "/(.*)user-select/i"
  ],
  "pseudoSelectorsToKeep": [
    "::before",
    "::after",
    "::first-letter",
    "::first-line",
    ":before",
    ":after",
    ":first-letter",
    ":first-line",
    ":visited",
    "/:nth-child.*/"
  ],
  "pseudoSelectorsToRemove": [],
  "maxElementsToCheckPerSelector": false,
  "maxEmbeddedBase64Length": 1000,
  "strictParser": false,
  "ui_actions": [
    {
      "viewport": "360x640",
      "notes": "Définissez la fenêtre d'affichage pour la découverte CSS au-dessus de la ligne de flottaison."
    },
    {
      "wait": 1000,
      "notes": "Attendez 1000 ms pour activer le rendu de la fenêtre."
    },
    {
      "run": true,
      "notes": "Exécutez un générateur CSS critique (calcul CSS au-dessus de la ligne de flottaison)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "Lancez un nouvel événement MouseEvent sur un élément DOM du menu.nav."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "Exécutez un script, dans ce cas fermez le menu avant de passer à la fenêtre suivante."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

Actions de l'interface utilisateur du générateur CSS critique

Le générateur CSS critique fournit un contrôle de navigateur de type Puppeteer. Le paramètre ui_actions accepte un tableau avec des objets d'action d'interface utilisateur qui définissent les changements d'état de l'interface utilisateur dans l'ordre chronologique.

{
  "run": true
}

{
  "wait": 1000
}

{
  "viewport": "1300x900"
}

{
  "scroll": 400
}

{
  "event": "click",
  "selector": "a.link"
}

{
  "mouseevent": "mouseover",
  "selector": "a.link",
  "mouseEventInit": {
    "bubbles": true,
    "cancelable": true
  }
}

{
  "script": "Popups.close();"
}

{
  "fn": "action_to_perform",
  "promise": true
}

{
  "script": "add_to_cart();",
  "notes": "description de l'action de l'interface utilisateur pour un usage personnel"
}

Afficher un exemple de configuration

{
  "ui_actions": [
    {
      "viewport": "360x640",
      "notes": "Définissez la fenêtre d'affichage pour la découverte CSS au-dessus de la ligne de flottaison."
    },
    {
      "wait": 1000,
      "notes": "Attendez 1000 ms pour activer le rendu de la fenêtre."
    },
    {
      "run": true,
      "notes": "Exécutez un générateur CSS critique (calcul CSS au-dessus de la ligne de flottaison)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "Lancez un nouvel événement MouseEvent sur un élément DOM du menu.nav."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "Exécutez un script, dans ce cas fermez le menu avant de passer à la fenêtre suivante."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

Suppresseur CSS inutilisé

Le suppresseur CSS inutilisé utilise le même logiciel que l'extracteur CSS critique et accepte presque les mêmes options de configuration, y compris le contrôle du navigateur de type Puppeteer via des actions d'interface utilisateur. L'outil permet également d'extraire les CSS inutilisés.

Afficher un exemple de configuration

{
  "atRulesToKeep": [
    "charset",
    "keyframes",
    "import",
    "namespace",
    "page"
  ],
  "atRulesToRemove": [],
  "selectorsToKeep": [
    "*",
    "*:before",
    "*:after",
    "html",
    "body"
  ],
  "selectorsToRemove": [],
  "propertiesToKeep": [],
  "propertiesToRemove": [],
  "pseudoSelectorsToKeep": [
    "/:.*/"
  ],
  "pseudoSelectorsToRemove": [],
  "maxElementsToCheckPerSelector": false,
  "strictParser": false,
  "ui_actions": [
    {
      run: true
    }
  ]
}

Suppresseur de CSS en double

Le suppresseur de CSS en double permet de comparer deux feuilles de style et de supprimer ou d'extraire le CSS en double.

Afficher un exemple de configuration

{
  "atRulesToKeep": [],
  "atRulesToRemove": [],
  "selectorsToKeep": [],
  "selectorsToRemove": [],
  "propertiesToKeep": [],
  "propertiesToRemove": [],
  "strictParser": false
}

Le deuxième champ de saisie accepte le numéro d'index de la feuille de style. Vous pouvez trouver l'index d'une feuille de style dans l'aperçu de la feuille de style dans l'onglet Paramètres.

Présentation de l'index des feuilles de style

Vous pouvez télécharger une feuille de style ou comparer des feuilles de style à partir d'URL externes en créant une nouvelle feuille de style. Vous pouvez ensuite importer des URL ou télécharger les feuilles de style et utiliser l'index de la nouvelle feuille de style dans le suppresseur de doublons CSS.

Importer ou télécharger des feuilles de style

Une fois configuré, appuyez sur le bouton pour démarrer le suppresseur de CSS en double. Un commentaire CSS affichera les statistiques de base du CSS réduit résultant.

Résultat du suppresseur de CSS en double