Ayuda y documentación
Velocidad Impacto alto Medio 30 a 60 minutos
Recursos de bloqueo de renderizado
CSS y JS en el head que retrasan el primer render.
Qué es
Los recursos de bloqueo de renderizado son archivos (normalmente CSS y JS síncrono en <head>) que el navegador debe descargar y procesar antes de renderizar el contenido. Hasta entonces el usuario no ve nada.
Por qué importa
Son la causa más común de un primer renderizado lento y un LCP deficiente. Cuanto más hay y más grandes son, más tiempo tarda en aparecer el contenido.
Cómo hacerlo
- 1Aplazar scripts mediante aplazar/async.
- 2Identifique "CSS crítico" (estilos para la parte visible) e inclúyalo, cargando el resto de forma asincrónica.
- 3Combine y minimice archivos CSS/JS, elimine estilos no utilizados.
- 4Cargue fuentes externas con font-display: cámbielas y precárguelas.
Conclusión
El objetivo es ofrecer contenido visible lo antes posible y posponer todo lo demás. Comience por posponer los scripts (una ganancia rápida) y optimizar CSS (CSS crítico). Esta área tiene un impacto directo en LCP, una métrica que Google rastrea.
Temas relacionados