Generador de CSS crítico.

Qué es el CSS crítico

El CSS crítico es un conjunto de declaraciones de CSS usadas para renderizar el viewport visible. El viewport visible suele llamarse contenido 'above the fold'. Es la parte de una página web que puedes ver en tu navegador sin tener que hacer scroll. Como el viewport visible es lo primero que ve un visitante, debes priorizar su renderizado. ¡El CSS crítico puede ayudarte con esto!

Por qué debería usar CSS crítico

En resumen: ¡porque es mucho más rápido! El CSS del critical path (above-the-fold) es una de las técnicas más importantes y de mayor impacto disponibles para optimizar la entrega de CSS. Por cómo funcionan todos los navegadores modernos, todos los estilos de archivos externos se consideran render blocking. Esto significa que un navegador no empezará a renderizar (a generar el árbol de renderizado, en concreto) hasta que haya descargado todos los archivos CSS externos del head de la página. Cuando un navegador tiene que descargar 1 o más archivos CSS, una página puede bloquearse fácilmente 100 ms 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 evitar esto es usar CSS crítico. El CSS crítico es un conjunto de CSS necesario para mostrar solo la parte visible de la página. Este CSS crítico suele mostrarse 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 empezar 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 CSS crítico?

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

1. Haz preload del CSS e intercambia el rel al cargar
2. Carga el CSS con media=print y al cargar intercambia el elemento media
3. Coloca los enlaces del CSS original en el footer de tu página

Caché del CSS no crítico

El CSS crítico es extremadamente rápido para los visitantes nuevos que aún no tienen tus archivos CSS almacenados en la caché de su navegador. Para los visitantes recurrentes, normalmente hay poca necesidad de usar CSS crítico, ya que los archivos CSS se pueden cargar desde la caché del navegador.

¿Debería combinar mis hojas de estilo?

¿Es más rápido combinar tus hojas de estilo después de implementar el CSS crítico? No hay una respuesta fácil a esta 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, normalmente tiene sentido combinar algunas hojas de estilo.

¿Cómo funciona el generador de CSS crítico?

El generador de CSS crítico funciona en una plataforma NodeJs a medida. 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 usan 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 tu generador de CSS crítico?

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

Feedback / estado beta

Actualmente el generador de CSS crítico está en fase beta. Eso significa que sigo experimentando todo el tiempo. ¿No te funciona el generador de CSS crítico? No te preocupes... ¡vuelve a intentarlo en 5 minutos!

¿Tienes feedback o echas en falta alguna función? Dímelo