Critical CSS en 3 pasos sencillos
- Introduce la URL de la página para la que quieres generar el critical CSS
- Pega el resultado en una etiqueta <style> de la página, justo debajo de <title>
- Difiere 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 el critical CSS?
El critical CSS es un conjunto de declaraciones CSS que se usan para renderizar el viewport visible. Al viewport visible se le suele llamar contenido 'above the fold': es la parte de la página web que ves en el navegador sin tener que hacer scroll. Como el viewport visible es lo primero que ve un visitante, debes priorizar su renderizado. ¡El critical CSS te ayuda a conseguirlo!
¿Por qué deberías usar critical CSS?
En pocas palabras: ¡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 con mayor impacto para optimizar la entrega de CSS. Por cómo funcionan los navegadores modernos, todos los estilos de archivos externos se consideran render blocking. Esto significa que el navegador no empezará a renderizar (en concreto, a generar el render tree) hasta que haya descargado todos los archivos CSS externos del head de la página. Cuando el navegador tiene que descargar uno o más archivos CSS, la página puede bloquearse fácilmente 100 ms o más. Google PageSpeed Insights recomienda eliminar los recursos render blocking para que la página cargue más rápido.
Una forma de evitarlo es usar critical CSS. El critical CSS es el conjunto de CSS necesario para mostrar únicamente la parte visible de la página. Este critical CSS se suele incluir inline, en el head de la página. Así, el navegador no tiene que descargar uno o más archivos CSS antes de poder empezar a renderizar. Mientras tanto, con la página ya en pantalla, el navegador descarga el resto de los archivos CSS en segundo plano.
¿Cómo se usa el generador de critical CSS?
Primero tienes que generar el critical path CSS de tu página web. Solo introduce la URL de tu página y pulsa 'Generar critical CSS'. En 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>, justo debajo de <title>.
El siguiente paso es diferir el CSS original. Hay 3 métodos para diferir el CSS:
- Haz preload del CSS y cambia el rel al cargar
- Carga el CSS con media=print y cambia el atributo media al cargar
- Coloca los enlaces al CSS original en el footer de la página
Caché del CSS no crítico
El critical CSS es rapidísimo para usuarios nuevos que todavía no tienen los archivos CSS en la caché del navegador. Para usuarios recurrentes no suele hacer tanta falta el critical CSS, ya que los archivos CSS se pueden cargar desde la caché del navegador.
¿Deberías combinar las hojas de estilo?
Tras implementar critical CSS, ¿es más rápido combinar las hojas de estilo? No hay una respuesta sencilla. A veces es más rápido combinarlas y a veces no. Tiene que ver con el critical rendering path. Si hay más de 5 recursos de alta prioridad, suele tener sentido combinar algunas hojas de estilo.
¿Cómo funciona el generador de critical CSS?
El generador de critical CSS funciona sobre una plataforma propia en Node.js. Básicamente, abrimos tu página web con un navegador real basado en Chrome. Evaluamos la web en diferentes viewports y determinamos qué partes de las hojas de estilo se usan para renderizar el viewport visible (la parte visible de la página). Luego limpiamos y minificamos el CSS necesario para el renderizado.
¿Existe un plugin de WordPress para el generador de critical CSS?
Sí. Se llama plugin Core Web Vitals y está diseñado específicamente para funcionar junto con nuestro extractor de critical path.
Feedback / estado beta
Actualmente el generador de critical CSS está en estado beta. Eso significa que sigo haciendo pruebas constantemente. ¿No te funciona el generador de critical CSS? No te preocupes... ¡vuelve a probar en 5 minutos!
¿Tienes feedback o echas en falta alguna función? Avísame