Aprende a mejorar los tiempos de renderización con la técnica fundamental de CSS.
El navegador debe descargar y analizar los archivos CSS para poder mostrar la página, lo que convierte al CSS en un recurso que bloquea la representació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 de procesamiento de una página web.
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.
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.
Si tienes un Primer procesamiento de imagen con contenido (FCP) deficiente y ves la oportunidad de "Eliminar el recurso de bloqueo de renderización" en las auditorías de Lighthouse, te recomendamos que pruebes las CSS importantes.
Para minimizar la cantidad de recorridos hasta la primera renderización, intenta mantener el contenido de la mitad superior de la página por debajo de los 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, cuantos más CSS tenga un sitio, mayor será el impacto posible del CSS intercalado.
Descripción general de las herramientas
Existen muchas herramientas excelentes que pueden determinar automáticamente el CSS crítico para una página. Esto es una buena noticia porque hacer esto manualmente sería un proceso tedioso. Requiere el análisis de todo el DOM para determinar los estilos que se aplican a cada elemento del viewport.
Crítico
Critical extrae, reduce e alinea CSS en la mitad superior de la página y está disponible como módulo de npm. Se puede usar con Gulp (directamente) o con Grunt (como un plugin) y también hay un complemento para webpack.
Es una herramienta simple que requiere pensar mucho en el proceso. Ni siquiera es necesario especificar las hojas de estilo, ya que la función crítica las detecta automáticamente. También admite la extracción de CSS críticas para varias resoluciones de pantalla.
criticalCSS
CriticalCSS es otro módulo de npm que extrae CSS de la mitad superior de la página. También está disponible como CLI.
No tiene opciones para intercalar ni reducir el CSS críticos, pero te permite forzar la inclusión de 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 @font-face.
Penthouse
Penthouse es una buena opción si tu sitio o app tiene una gran cantidad de estilos o estilos que se insertan dinámicamente en el DOM (común en las apps de Angular). Usa Puppeteer de forma interna y cuenta con una versión alojada en línea.
Penthouse no detecta las hojas de estilo automáticamente. Debes especificar los archivos HTML y CSS para los que quieras generar una CSS crítica. La ventaja es que sirve para ejecutar muchos trabajos en paralelo.