Generador de CSS crítico

Un widget de navegador gratuito para un generador de CSS crítico avanzado y un optimizador de la mitad superior de la página .

Optimizador de la mitad superior de la página

Generador de CSS crítico y optimizador de la parte superior de la página

Introducción

El generador de CSS crítico permite resolver los Core Web Vitals de Google y eliminar la penalización de CSS no utilizado , basándose únicamente en el CSS mínimo. Permite lograr un resultado perfecto en píxeles .

El mejor resultado crítico de CSS se logra en un navegador real.

El widget del navegador se ejecuta en la página en la que se va a extraer el CSS crítico y, por lo tanto, tiene acceso nativo completo al entorno CSS original.

Puede seleccionar las hojas de estilo o los elementos de la hoja de estilo en línea desde los que extraer CSS crítico. Esto es útil para crear CSS crítico que se puede compartir entre páginas.

El widget del navegador también tiene una función para eliminar el CSS crítico de las hojas de estilo.

La herramienta está libre de espías. Sin Google Analytics ni seguimiento. Seguro de usar y se puede usar localmente a través de un caché de Service Worker.

El widget del navegador proporciona un ejemplo de software CSS crítico más avanzado que se puede utilizar a través de un navegador Chrome en Google Cloud. Consulte para obtener más información nuestro complemento de optimización profesional .

Instalar

Para instalar el widget, arrastra este enlace🗔 CSS crítico a la barra de favoritos o copie y pegue el código a continuación.

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="CSS cr&iacute;tico 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);

Características

1. Generador de CSS crítico avanzado

   1. Desarrollado a medida basado en PostCSS , uno de los mejores analizadores de CSS.
   2. Admite múltiples ventanas gráficas (escritorio + móvil) para CSS crítico receptivo .
   3. Titiritero como el control del navegador que incluye clic, eventos del mouse (desplazar, mover, etc.), desplazamiento, ejecución de código javascript personalizado y mucho más.
   4. Salida CSS crítica pura no optimizada sin procesar.

2. Optimizador de la mitad superior de la página

   1. Compare el CSS crítico con el CSS original.
   2. Reglas de medida de píxeles personalizables.

3. Herramientas de optimización avanzadas

   1. Eliminador de CSS no utilizado para eliminar CSS crítico de las hojas de estilo.
   2. Software profesional de compresión (minify) y optimización de CSS.
   3. Reparación de CSS roto. Una herramienta para arreglar CSS malformado.
   4. Autoprefijador. Una herramienta para aplicar prefijos de navegador a CSS.
   5. Estadísticas y análisis de CSS.
   6. CSS embellecer.
   7. Pelusa CSS avanzada.
   8. Eliminador de CSS duplicado.
   9. Editor de CSS avanzado conectado a CSS lint con consejos de optimización.

Cómo utilizar

Paso 1: inicie el widget del navegador en una página

Navegue hasta la página para la que desea extraer CSS crítico e inicie el widget del navegador. Haga clic aquí para obtener instrucciones de instalación.

Paso 2: generar CSS crítico

Se puede acceder al generador de CSS crítico a través de la pestaña Herramientas en el encabezado.

Configure el JSON usando las opciones de la documentación .

Paso 3: optimizar el resultado

La salida del generador de CSS crítico es sin procesar y requiere una mayor optimización, como la compresión.

El botón Optimizar en el menú del editor permite aplicar optimización y compresión de código avanzadas.

Documentación

Generador de CSS crítico

El generador de CSS crítico acepta las siguientes opciones.

Mostrar configuración de ejemplo

{
  "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": "Configure la ventana gráfica para el descubrimiento de CSS en la mitad superior de la página."
    },
    {
      "wait": 1000,
      "notes": "Espere 1000 ms para habilitar la representación de la ventana gráfica."
    },
    {
      "run": true,
      "notes": "Ejecute el generador de CSS crítico (cálculo de CSS en la parte superior de la página)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "Dispara un nuevo MouseEvent en un elemento DOM de menú nav."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "Ejecute un script, en este caso cierre el menú antes de continuar con la siguiente ventana gráfica."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

Acciones de interfaz de usuario del generador de CSS crítico

El generador de CSS crítico proporciona un control de navegación similar al de Puppeteer. El parámetro ui_actions acepta una matriz con objetos de acción de la interfaz de usuario que definen los cambios de estado de la interfaz de usuario en orden cronológico.

{
  "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": "descripción de la acción de la interfaz de usuario para uso personal"
}

Mostrar configuración de ejemplo

{
  "ui_actions": [
    {
      "viewport": "360x640",
      "notes": "Configure la ventana gráfica para el descubrimiento de CSS en la mitad superior de la página."
    },
    {
      "wait": 1000,
      "notes": "Espere 1000 ms para habilitar la representación de la ventana gráfica."
    },
    {
      "run": true,
      "notes": "Ejecute el generador de CSS crítico (cálculo de CSS en la parte superior de la página)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "Dispara un nuevo MouseEvent en un elemento DOM de menú nav."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "Ejecute un script, en este caso cierre el menú antes de continuar con la siguiente ventana gráfica."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

Eliminador de CSS no utilizado

El eliminador de CSS no utilizado utiliza el mismo software que el extractor de CSS crítico y acepta casi las mismas opciones de configuración, incluido el control del navegador similar a Puppeteer a través de acciones de la interfaz de usuario. La herramienta también permite extraer CSS no utilizado.

Mostrar configuración de ejemplo

{
  "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
    }
  ]
}

Eliminador de CSS duplicado

El eliminador de CSS duplicado permite comparar dos hojas de estilo y eliminar o extraer el CSS duplicado.

Mostrar configuración de ejemplo

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

El segundo campo de entrada acepta el número de índice de la hoja de estilo. Puede encontrar el índice de una hoja de estilo en la descripción general de la hoja de estilo en la pestaña de configuración.

Descripción general del índice de la hoja de estilo

Puede cargar una hoja de estilo o comparar hojas de estilo desde URL(s) externas creando una nueva hoja de estilo. Luego puede importar URL o cargar las hojas de estilo y usar el índice de la nueva hoja de estilo en el eliminador de CSS duplicado.

Importar o cargar hojas de estilo

Una vez configurado, presione el botón para iniciar el eliminador de CSS duplicado. Un comentario de CSS mostrará estadísticas básicas del CSS reducido resultante.

Resultado del eliminador de CSS duplicado