En la sección Oportunidades del 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 intercalando recursos críticos, aplazando recursos no críticos y quitando 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 el procesamiento: secuencias de comandos y hojas de estilo.
Una etiqueta <script> que hace lo siguiente:
- Está en el
<head>del documento. - No tiene un atributo
defer. - No tiene un atributo
async.
Una etiqueta <link rel="stylesheet"> que cumpla con las siguientes condiciones:
- 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 un elemento que bloquea la renderización.
Cómo identificar los recursos críticos
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 CSS y JS que no sean críticos. Cuando cargas o ejecutas una página, la pestaña te indica cuánto código se usó en comparación con la cantidad que se cargó:
Puedes reducir el tamaño de tus páginas enviando solo 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 (crítico): Estilos que se requieren para la primera pintura; código que es fundamental para la funcionalidad principal de la página.
- Rojo (no crítico): Estilos que se aplican al contenido que no es visible de inmediato; código que no se usa en la funcionalidad principal de la página.
Cómo eliminar secuencias de comandos que bloqueen la renderización
Una vez que hayas identificado el código crítico, muévelo 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 que necesita para controlar su funcionalidad principal.
Si hay código en una URL que bloquea la renderización que no es fundamental, puedes mantenerlo en la URL y, luego, marcarla con atributos async o defer (consulta también Cómo agregar interactividad con JavaScript).
Se debe quitar el código que no se usa (consulta Cómo quitar el código que no se usa).
Cómo eliminar hojas de estilo que bloquean la renderización
Al igual que el código intercalado en una etiqueta <script>, intercala los diseños críticos necesarios para la primera pintura dentro de un bloque <style> en el head de la página HTML.
Luego, carga el resto de los estilos de forma asíncrona con el vínculo preload (consulta Aplaza el CSS sin usar).
Considera automatizar el proceso de extracción y inserción de CSS "Above the Fold" con la herramienta fundamental.
Otro enfoque para eliminar los estilos que bloquean la renderización es dividirlos en archivos diferentes, organizados por consulta de medios. Luego, agrega un atributo de media a cada vínculo de 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, te recomendamos que reduzcas tu CSS para quitar los espacios en blanco o los caracteres adicionales (consulta Cómo reducir el CSS). Esto garantiza que envíes el paquete más pequeño posible a tus usuarios.
Orientación específica de la pila
AMP
Usa herramientas como AMP Optimizer para renderizar diseños de AMP en el servidor.
Drupal
Se recomienda usar un módulo para intercalar instancias críticas de CSS y JavaScript, y usar el atributo de aplazamiento para CSS o JavaScript no críticos.
Joomla
Existen varios complementos de Joomla que pueden ayudarte a insertar recursos fundamentales o a postergar recursos menos importantes.
WordPress
Existen varios complementos de WordPress que pueden ayudarte a insertar recursos fundamentales o a postergar recursos menos importantes.