Generador de Critical CSS.

Genere Critical Path CSS y acelere su sitio web

⚙

Critical CSS en 3 pasos simples

  1. Ingrese la URL de la página para la que desea crear Critical CSS
  2. Pegue los resultados en una etiqueta <style> en su página, justo debajo de <title>
  3. Difiera la carga de las hojas de estilo originales
    <link rel = "preload" href = "orig.css" type = "text / css" as = "style" onload = "this.onload = null; this.rel = 'stylesheet' ; "/>

¿Qué es Critical CSS?

Critical CSS es una colección de declaraciones CSS que se utilizan para renderizar el viewport visible. El viewport visible a menudo se denomina 'contenido above-the-fold'. Es esa parte de una página web que puede ver en su navegador sin tener que desplazarse. Dado que el viewport visible es lo primero que ve un visitante, debe priorizar el renderizado del viewport visible. ¡Critical CSS puede ayudarlo a hacer eso!

¿Por qué debería usar Critical CSS?

En resumen: ¡porque es mucho más rápido! \r\nCritical path (above-the-fold) css es una de las técnicas más importantes e impactantes disponibles para optimizar la entrega de CSS. Debido a la forma en que funcionan todos los navegadores modernos, todos los estilos de archivos externos se consideran bloqueo de renderizado. \r\n Esto significa que un navegador no comenzará a renderizar (generar el árbol de renderizado para ser específicos) hasta que haya descargado todos los archivos CSS externos en el head de la página. Cuando un navegador tiene que descargar 1 o más archivos CSS, una página puede bloquearse fácilmente 100ms o más. Google PageSpeed Insights sugiere eliminar los recursos que bloquean el renderizado para ayudar a que su página cargue más rápido.
Una forma de evitar eso es usar Critical CSS. Critical CSS es una colección de CSS que se requiere para mostrar solo la parte visible de la página. Este Critical CSS a menudo se muestra en línea, en el head de la página. Como resultado, un navegador no tiene que descargar 1 o más archivos CSS antes de poder comenzar a renderizar. Mientras tanto, mientras se muestra la página, su navegador descarga los archivos CSS finales en segundo plano.

¿Cómo uso el generador de Critical CSS?

Primero debe generar el Critical Path CSS para su página web. Simplemente proporcione la url de su página y luego presione 'Generar Critical CSS'. Después de unos segundos verá el CSS extraído
Copie ese CSS y colóquelo en el <head> de la página en una etiqueta <style> en su página, justo debajo del <title>
El siguiente paso es diferir su CSS original. Hay 3 métodos para diferir su CSS.

  1. Precargue el CSS e intercambie el rel al cargar (on load)
  2. Cargue el CSS con media=print e intercambie el elemento media al cargar
  3. Coloque los enlaces CSS originales en el pie de página de su sitio

Almacenamiento en caché de CSS no crítico

Critical CSS es increíblemente rápido para los visitantes primerizos que aún no tienen sus archivos CSS almacenados en la caché de sus navegadores. Para los visitantes recurrentes, generalmente hay poca necesidad de Critical CSS ya que los archivos CSS se pueden cargar desde la caché de los navegadores.

¿Debería combinar mis hojas de estilo?

¿Es más rápido, después de implementar Critical CSS, combinar sus hojas de estilo? No hay una respuesta fácil a esa pregunta. A veces es más rápido combinar sus hojas de estilo y a veces no. Esto tiene que ver con la ruta de renderizado crítica. Si hay más de 5 recursos de alta prioridad, generalmente tiene sentido combinar algunas hojas de estilo.

¿Cómo funciona el generador de Critical CSS?

El generador de Critical CSS funciona en una plataforma NodeJs personalizada. Básicamente visitamos su página web con un navegador web real basado en Chrome. Evaluamos su sitio web en diferentes viewports y determinamos qué partes de sus hojas de estilo se utilizan para el renderizado del viewport visible (la parte visible de su página). Luego limpiamos y minificamos el CSS que se necesita para el renderizado.

¿Hay un plugin de WordPress para su generador de Critical CSS?

Sí, lo hay. Se llama plugin Core Web Vitals, diseñado específicamente para trabajar junto con nuestro extractor de Critical Path.

Comentarios / estado beta

Actualmente el generador de Critical CSS está en estado beta. Eso significa que todavía estoy experimentando todo el tiempo. ¿El generador de Critical CSS no funciona para usted? No se preocupe... ¡inténtelo de nuevo en 5 minutos!

¿Comentarios o falta alguna función? Hágamelo saber