Ayuda y documentación
Velocidad Impacto alto Difícil 1 a 3 horas
Reducir el bloqueo de CSS
Un CSS grande en el encabezado retrasa el renderizado.
Qué es
CSS bloquea de forma predeterminada: el navegador no muestra nada hasta que haya descargado y procesado los estilos. Los archivos CSS grandes o numerosos retrasan así la primera pintura de la página.
Por qué importa
Cargar un archivo CSS grande para todo el sitio retrasa incluso una página simple. La optimización mejora directamente el LCP y la velocidad percibida.
Cómo hacerlo
- 1Extraiga "CSS crítico" para la parte visible e inclúyalo en <head>.
- 2Cargue el resto del CSS de forma asíncrona (el truco media="print" o rel="preload" + onload).
- 3Elimine los estilos no utilizados (PurgeCSS/la herramienta Cobertura en devtools).
- 4Divida CSS por página/componente en lugar de un monolito.
Carga asincrónica de CSS no crítico
Correcto
<link rel="preload" href="/css/styles.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/styles.css"></noscript>Conclusión
CSS crítico en línea + el resto de forma asincrónica es el patrón más efectivo contra el bloqueo de CSS. Es un cambio más exigente, pero en sitios lentos aporta una aceleración significativa del primer renderizado. Las herramientas y marcos de construcción modernos lo hacen más fácil.
Temas relacionados