En la sección Oportunidades de tu informe de Lighthouse, se enumeran todas las URLs que bloquean el primer procesamiento de imagen de tu página. El objetivo es reducir el impacto de estas URLs que bloquean la renderización mediante la intercalación de recursos críticos, la aplazamiento de los recursos que no son críticos y la eliminación de todo lo que no se use.
¿Qué URLs se marcan como recursos que bloquean la renderización?
Lighthouse marca dos tipos de URL que bloquean la renderización: secuencias de comandos y hojas de estilo.
Una etiqueta <script> con las siguientes características:
- Está en el
<head>del documento. - No tiene un atributo
defer. - No tiene un atributo
async.
Una etiqueta <link rel="stylesheet"> con las siguientes características:
- No tiene un atributo
disabled. Cuando este atributo está presente, el navegador no descarga la hoja de estilo. - No tiene un atributo
mediaque coincida específicamente con el dispositivo del usuario.media="all"se considera que bloquea la renderización.
Cómo identificar los recursos fundamentales
El primer paso para reducir el impacto de los recursos que bloquean la renderización es identificar lo que es fundamental y lo que no. Usa la pestaña Cobertura de las Herramientas para desarrolladores de Chrome para identificar el código CSS y JS no críticos. Cuando cargas o ejecutas una página, la pestaña te indica cuánto código se usó, en comparación con cuánto se cargó:
Puedes reducir el tamaño de tus páginas si solo envías el código y los estilos que necesitas. Haz clic en una URL para inspeccionar ese archivo en el panel Sources. Los estilos en los archivos CSS y el código en los archivos JavaScript se marcan con dos colores:
- Verde (fundamental): Son los estilos necesarios para la primera pintura. Código que es fundamental para la funcionalidad principal de la página.
- Rojo (no crítico): Los estilos que se aplican al contenido que no se ven de inmediato; el código no se usa en la funcionalidad principal de la página.
Cómo eliminar las secuencias de comandos que bloquean el procesamiento
Una vez que hayas identificado el código crítico, mueve ese código de la URL que bloquea la renderización a una etiqueta script intercalada en tu página HTML.
Cuando se cargue la página, tendrá lo necesario para controlar la funcionalidad principal de la página.
Si una URL que bloquea la renderización tiene un código que no es crítico, puedes mantenerlo en la URL y, luego, marcarla con los atributos async o defer (consulta también Cómo agregar interactividad con JavaScript).
Se debe quitar el código que no se use en absoluto (consulta Cómo quitar el código que no se usa).
Cómo eliminar las hojas de estilo que bloquean la renderización
Al igual que el código insertado en una etiqueta <script>, se requieren estilos críticos intercalados para la primera pintura dentro de un bloque <style> en el head de la página HTML.
Luego, carga el resto de los diseños de forma asíncrona mediante el vínculo preload (consulta Cómo aplazar CSS sin usar).
Te recomendamos automatizar el proceso de extracción e integración de CSS de la "mitad superior de la página" con la herramienta crítica.
Otro enfoque para eliminar los estilos que bloquean la renderización es dividirlos en archivos diferentes, organizados por consulta de medios. A continuación, agrega un atributo multimedia a cada vínculo de la hoja de estilo. Cuando se carga una página, el navegador solo bloquea la primera pintura para recuperar las hojas de estilo que coinciden con el dispositivo del usuario (consulta CSS que bloquea la renderización).
Por último, reduce tu CSS para quitar cualquier espacio en blanco o caracteres adicionales (consulta Minifica el CSS). Esto garantiza que envíes el paquete más pequeño posible a los usuarios.
Orientación específica para pilas
AMP
Usa herramientas como AMP Optimizer para procesar diseños de AMP en el servidor.
Drupal
Se recomienda usar un módulo para intercalar instancias críticas de CSS y JavaScript, o cargar recursos de manera asíncrona a través de JavaScript, como el módulo de Agregación avanzada de CSS/JS.
Joomla
Hay varios complementos de Joomla que pueden ayudarte a intercalar elementos fundamentales o aplazar los menos importantes.
WordPress
Existen varios complementos de WordPress que pueden ayudarte a intercalar recursos fundamentales o a postergar los recursos menos importantes.