Generador de Critical CSS.

Genera Critical Path CSS y acelera tu sitio web

⚙

Critical CSS en 3 simples pasos

  1. Ingresa la URL de la página para la cual quieres crear Critical CSS
  2. Pega los resultados en una etiqueta <style> en tu página, justo debajo del <title>
  3. Aplaza 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 conoce como ‘contenido above the fold’. Es la parte de una página web que puedes ver en tu navegador sin tener que desplazarte. Dado que el viewport visible es lo primero que ve un visitante, deberías priorizar el renderizado del viewport visible. ¡Critical CSS puede ayudarte a hacerlo!

¿Por qué debería usar Critical CSS?

En resumen: ¡porque es mucho más rápido! El CSS de Critical Path (above-the-fold) 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 render blocking. Esto significa que un navegador no comenzará a renderizar (generar el render tree 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 render-blocking para ayudar a que tu página cargue más rápido.
Una forma de evitarlo es usar Critical CSS. Critical CSS es una colección de CSS necesario para mostrar solo la parte visible de la página. Este Critical CSS a menudo se muestra inline, 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, tu navegador descarga los archivos CSS finales en segundo plano.

¿Cómo uso el generador de Critical CSS?

Primero necesitas generar el Critical Path CSS para tu página web. Simplemente proporciona la URL de tu página y luego presiona ‘Generar Critical CSS’. Después de unos segundos verás el CSS extraído
Copia ese CSS y colócalo en el <head> de la página en una etiqueta <style> en tu página, justo debajo del <title>
El siguiente paso es aplazar tu CSS original. Hay 3 métodos para aplazar tu CSS.

  1. Precargar el CSS y cambiar el rel al cargar
  2. Cargar el CSS con media=print y al cargar cambiar el elemento media
  3. Colocar los enlaces CSS originales en el footer de tu página

Caché de CSS no crítico

Critical CSS es increíblemente rápido para visitantes nuevos que aún no tienen tus archivos CSS almacenados en la caché de su navegador. Para visitantes recurrentes generalmente hay poca necesidad de Critical CSS ya que los archivos CSS pueden cargarse desde la caché del navegador.

¿Debería combinar mis hojas de estilo?

¿Es más rápido, después de implementar Critical CSS, combinar tus hojas de estilo? No hay una respuesta fácil a esa pregunta. A veces es más rápido combinar tus hojas de estilo y a veces no. Esto tiene que ver con el critical rendering path. 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 personalizada de NodeJS. Básicamente visitamos tu página web con un navegador real basado en Chrome. Evaluamos tu sitio web en diferentes viewports y determinamos qué partes de tus hojas de estilo se utilizan para el renderizado del viewport visible (la parte visible de tu página). Luego limpiamos y minificamos el CSS necesario para el renderizado.

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

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

Feedback / 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 ti? No te preocupes... ¡inténtalo de nuevo en 5 minutos!

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