Extraer CSS crítico
Aprenda a mejorar los tiempos de renderizado con la técnica de CSS crítico.
El navegador debe descargar y analizar los archivos CSS antes de poder mostrar la página, lo que convierte al CSS en un recurso de bloqueo de renderizado. Si los archivos CSS son grandes o las condiciones de la red son malas, las solicitudes de archivos CSS pueden aumentar significativamente el tiempo que tarda una página web en procesarse.
Insertar estilos extraídos en el <head> del documento HTML elimina la necesidad de realizar una solicitud adicional para obtener estos estilos. El resto del CSS se puede cargar de forma asincrónica.
La mejora de los tiempos de renderizado 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.
Si tiene un First Contentful Paint o FCP (primer despliegue de contenido) deficiente y ve la oportunidad de "Eliminar el recurso de bloqueo de renderizado" en las auditorías de Lighthouse, es una buena idea probar el CSS crítico.
Para minimizar el número de viajes de ida y vuelta para renderizar por primera vez, intente mantener el contenido de la mitad superior de la página por debajo de 14 KB (comprimido).
El impacto en el rendimiento que puede lograr con esta técnica depende del tipo de su sitio web. En términos generales, cuanto más CSS tenga un sitio, mayor será el posible impacto del CSS en línea.
Descripción general de herramientas #
Hay una serie de excelentes herramientas que pueden determinar automáticamente el CSS crítico de una página. Esta es una buena noticia, porque hacerlo manualmente sería un proceso tedioso. Requiere un análisis de todo el DOM para determinar los estilos que se aplican a cada elemento en la ventana gráfica.
Critical #
Critical extrae, minimiza e inserta CSS en la parte 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 de webpack.
Es una herramienta sencilla que simplifica el proceso. Ni siquiera tiene que especificar las hojas de estilo, Critical las detecta automáticamente. También admite la extracción de CSS crítico para múltiples resoluciones de pantalla.
CriticalCSS #
CriticalCSS es otro módulo npm que extrae CSS de la mitad superior de la página. También está disponible como CLI.
No tiene opciones para incorporar y minimizar CSS crítico, pero permite forzar la inclusión de reglas que en realidad no pertenecen al CSS crítico y le brinda un control más granular sobre la inclusión de declaraciones @font-face.
Penthouse #
Penthouse es una buena opción si su sitio o aplicación tiene una gran cantidad de estilos o estilos que se inyectan dinámicamente en el DOM (común en las aplicaciones de Angular). Utiliza Puppeteer de manera discreta e incluso cuenta con una versión alojada en línea.
Penthouse no detecta las hojas de estilo automáticamente, debe especificar los archivos HTML y CSS para los que desea generar CSS crítico. La ventaja es que es bueno para ejecutar muchos trabajos en paralelo.