Extraer CSS crítico

Aprende a mejorar los tiempos de renderización con una técnica crítica de CSS.

El navegador debe descargar y analizar los archivos CSS antes de mostrar la página, lo que convierte a CSS en un recurso que bloquea la renderización. Si los archivos CSS son grandes o el estado de la red es deficiente, las solicitudes de archivos CSS pueden aumentar significativamente el tiempo que tarda una página web en procesarse.

Ilustración de una laptop y un dispositivo móvil con páginas web que desbordan los bordes de las pantallas

La intercalación de estilos extraídos en el <head> del documento HTML elimina la necesidad de realizar una solicitud adicional para recuperar estos estilos. El resto del CSS se puede cargar de forma asíncrona.

Archivo HTML con CSS crítico intercalado en el encabezado
CSS crítico intercalado

Mejorar los tiempos de renderización puede marcar una gran diferencia en el rendimiento percibido, especialmente en condiciones de red deficientes. En las redes móviles, la latencia alta es un problema independientemente del ancho de banda.

Comparación en la vista de tira de película de la carga de una página con CSS que bloquea la renderización (parte superior) y la misma página con CSS crítico intercalado (inferior) en una conexión 3G. La tira de película superior muestra seis fotogramas en blanco antes de mostrar el contenido. La tira de película inferior muestra contenido significativo en el primer fotograma.
Comparación entre la carga de una página con CSS que bloquea la renderización (arriba) y la misma página con CSS crítico intercalado (abajo) en una conexión 3G

Si tienes un Primer procesamiento de imagen con contenido (FCP) deficiente y consulta "Elimina el recurso de bloqueo de renderización" en las auditorías de Lighthouse, se recomienda probar CSS crítica.

Auditoría de Lighthouse con “Elimina el recurso de bloqueo de renderización” o &quot;Aplaza las CSS sin usar&quot; oportunidades

Para minimizar la cantidad de recorridos hasta el primer procesamiento, intenta mantener el contenido de la mitad superior de la página por debajo de 14 KB (comprimido).

El impacto en el rendimiento que puedes lograr con esta técnica depende del tipo de sitio web. En términos generales, cuanto más CSS tenga un sitio, mayor será el impacto posible del CSS intercalado.

Descripción general de las herramientas

Existen varias herramientas excelentes que pueden determinar automáticamente el CSS crítico de una página. Esto es una buena noticia, ya que hacerlo manualmente sería un proceso tedioso. Requiere el análisis de todo el DOM para determinar los estilos que se aplican a cada elemento en el viewport.

Crítico

Critical extrae, reduce e intercala el código CSS de la mitad superior de la página, y está disponible como módulo npm. Se puede usar con Gulp (directamente) o con Grunt (como complemento), y también hay un complemento webpack.

Es una herramienta simple que les quita mucho tiempo a pensar en el proceso. Ni siquiera es necesario especificar las hojas de estilo; la función crítica las detecta automáticamente. También admite la extracción de CSS crítico para varias resoluciones de pantalla.

criticalCSS

CriticalCSS es otro módulo de npm que extrae elementos CSS de la mitad superior de la página. También está disponible como CLI.

No tiene opciones para intercalar y reducir el CSS crítico, pero te permite incluir de manera forzosa reglas que, en realidad, no pertenecen a un CSS crítico, y te brinda un control más detallado sobre la inclusión de declaraciones de @font-face.

Penthouse

Penthouse es una buena opción si tu sitio o app tiene una gran cantidad de estilos que se insertan de forma dinámica en el DOM (común en apps de Angular). Usa Puppeteer de forma interna y también cuenta con una versión alojada en línea.

Penthouse no detecta hojas de estilo automáticamente; debes especificar los archivos HTML y CSS para los que deseas generar CSS crítica. La ventaja es que permite ejecutar muchos trabajos en paralelo.