Solucionar "Avoid Chaining Critical Requests" en Lighthouse.

Cómo se determina la prioridad de descarga

Las solicitudes críticas son los recursos que se descargan con alta prioridad durante la carga inicial de la página. ¿Cómo se determina esta prioridad?

La prioridad de descarga es determinada por el propio navegador. El navegador sigue un conjunto de reglas para determinar la prioridad de cada activo. Qué elementos reciben finalmente la mayor prioridad depende de la estructura de la página. Los elementos que tu navegador considera necesarios para el primer renderizado de la página reciben la mayor prioridad.

Tu navegador inicialmente hace una suposición educada sobre qué elementos son los más importantes. En general, la prioridad de descarga funciona así: HTML siempre tiene la mayor prioridad, luego las hojas de estilo, JavaScript síncrono, fuentes, solicitudes Ajax, imágenes en la parte superior de la página, imágenes más adelante en la página, y luego JavaScripts asíncronos.

Puedes ver por ti mismo qué fuentes reciben alta prioridad en tu página. Abre la consola de desarrollo con Ctrl + Shift + J. Navega a la pestaña de red, haz clic derecho en los nombres de las columnas y selecciona 'Priority'

¿Cómo afecta la Cadena de Solicitudes Críticas al tiempo de carga de la página?

Al cargar una página, un navegador comienza en modo 'display blocking'. En este modo, las fuentes más importantes se descargan con alta prioridad. Esos son los recursos críticos.

Un navegador no comenzará (completamente) a renderizar la página hasta que todos los recursos críticos se hayan descargado. Así que cualquier recurso crítico puede bloquear el primer renderizado de una página.

Cuantos menos recursos críticos tenga una página, menos trabajo tiene que hacer el navegador para obtener el primer contenido en la pantalla, y menos competencia hay por la CPU y otros recursos.

¿Cómo solucionar "Avoid Chaining Critical Requests" en Lighthouse?

Puedes reducir el impacto de las solicitudes críticas de tres maneras:

1. Reducir el número de recursos críticos . Convierte recursos críticos en recursos no críticos eliminándolos o difiriéndolos.
2. Reducir el número de bytes críticos . Puede ser obvio, pero reducir el número de bytes de los recursos de la ruta crítica hace que los recursos críticos se descarguen más rápido. Por ejemplo, a través de compresión gzip, tree shaking de javascript, optimización de imágenes o subconjunto de fuentes.
3. Mejorar el orden de descarga de la ruta crítica . Usa resource hints como preloading para saltar el descubrimiento de recursos y asegurar que los recursos críticos se descarguen lo más rápido posible.

Hay muchas opciones. Qué opción es la mejor depende del tipo de archivo del recurso:

1. HTML

El HTML, que es en realidad la página que estás visitando, siempre se descarga con la mayor prioridad. La página en sí misma siempre es parte de la cadena de solicitudes críticas. Es por eso que la página en sí es lo primero a considerar al optimizar la cadena de solicitudes críticas..

Carga retrasada de contenido: Muchos sitios grandes, como el propio Google, usan esta técnica para reducir la cadena de solicitudes críticas. En la página de resultados de búsqueda, por ejemplo, partes del contenido, que no se necesitan inmediatamente, solo se cargan más tarde a través de una solicitud AJAX.

Minificar: Más pequeño siempre es más rápido, usa minificación html para eliminar comentarios, espacios y líneas en blanco de la página.

Compresión : Finalmente, es importante comprimir adecuadamente las hojas de estilo con compresión Brotli o GZIP

2. Stylesheets

Las hojas de estilo en la cabecera de la página siempre son críticas. Sin estilos, un navegador no sabe cómo se verá la página. Las hojas de estilo son, por lo tanto, una parte estándar de la cadena de solicitudes críticas en Lighthouse.

CSS Crítico: Las hojas de estilo se pueden hacer no críticas con un truco simple donde la hoja de estilo se precarga a través de resource hints y se agrega como una hoja de estilo después de que la precarga haya terminado.
Agrega el siguiente código en la página: Tu navegador ahora descargará la hoja de estilo con una prioridad más baja y tratará el CSS como no bloqueante de renderizado. Comenzará a renderizar sin esperar al CSS.

<link rel="preload"
      href="css.css"
      type="text/css"
      as="style"
      onload="this.onload=null;this.rel='stylesheet';"/>

Observa cómo algo extraño sucede ahora en la página. Primero se muestra la página y solo después de cargar el CSS se aplica el estilo. Todo el contenido parpadeará ahora de contenido sin estilo a contenido con estilo. Podemos solucionar esto con CSS crítico.
CSS crítico es una colección de todas las reglas CSS que necesitas para la parte visible de la página. Puedes generar CSS crítico tú mismo a través de NodeJS o a través de una serie de herramientas en línea. Coloca este CSS crítico en la cabecera de la página y carga el resto del CSS con una prioridad más baja.

Media queries : Carga solo los estilos para tu dispositivo. Tu página a menudo se visita en móvil. Así que en realidad no tienes que descargar los estilos para Escritorio e Impresión. Esto ahorra tiempo y, por lo tanto, acorta la cadena de solicitudes críticas en Lighthouse.

Usa el atributo media. El atributo media asegura que una etapa solo se descargue si el medio del hogar no coincide con el medio que estás usando actualmente.

<link href="all.css" rel="stylesheet" media="all">
<link href="print.css" rel="stylesheet" media="print">
<link href="desktop.css" rel="stylesheet" media="screen and (min-device-width: 1024px)">

Minificar: Elimina CSS no utilizado. Muchos sitios usan bibliotecas CSS como bootstrap. Estas bibliotecas a menudo son sobre-completas y no todas las declaraciones de estilo se utilizan.
Es fácil editar estas bibliotecas a través de un preprocesador CSS (como SASS ). Simplemente elimina los grupos de estilo no utilizados cambiando lo que debe incluirse para hacerlos mucho más pequeños. Estos preprocesadores también te dan la opción de minificar tu CSS eliminando todos los espacios y nuevas líneas.

Compresión : Finalmente, es importante comprimir adecuadamente las hojas de estilo con compresión Brotli o GZIP

3. Javascript

Los archivos Javascript en la cabecera de la página se descargan con una alta prioridad por defecto y bloquean el renderizado de la página mientras se descargan y ejecutan. Javascript es, por lo tanto, una parte estándar de la cadena de solicitudes críticas.

Defer y Async : Ajusta la prioridad de los archivos Javascript cargándolos asíncronamente a través del atributo async o defer. Los archivos de script asíncronos se descargan en paralelo con una prioridad más baja. Javascript diferido también se carga en paralelo y la ejecución del archivo Javascript se retrasa para que la ejecución de Javascript tampoco bloquee la carga inicial de la página.

// bloquea la carga y ejecución
<script src="normalscript.js">
// async no bloquea durante la carga, pero sí bloquea durante la ejecución
<script async src="asyncscript.js">
// defer no bloquea ni durante la carga ni durante la ejecución
<script defer src="deferscript.js">

Code splitting y preloading: Si la página no permite que JavaScript se cargue asíncronamente, podría ser una buena idea dividir JavaScript en múltiples archivos. Coloca la parte de JavaScript que es crítica durante la carga de la página en un archivo pequeño y precarga este archivo. Coloca el javascript no crítico en otro archivo y deja que se cargue y ejecute diferido o async.

Minificar : Reduce el número de bytes de dos maneras a través de una herramienta Javascript Uglyfier. Esta es una herramienta inteligente que analiza Javascript y lo hace lo más pequeño posible.

Compresión : Además, reduce el número de bytes comprimiendo Javascript vía Gzip o Brotli.

4. WebFonts

Las fuentes web generalmente se cargan como últimos archivos en la cadena de solicitudes críticas. Esto se debe a que las fuentes web dependen del descubrimiento. Solo se cargan cuando un navegador descubre que son necesarias. Para esto, un navegador primero debe analizar el HTML y buscar en la hoja de estilo qué fuente se usa.

Preloading : Cuando estás seguro de que vas a depender de una fuente, generalmente es más rápido precargar esta fuente. La fuente se descarga entonces lo antes posible, esto minimiza la influencia en la cadena de solicitudes críticas. Precarga una fuente agregando este código lo antes posible en la cabecera de la página

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

Estrategia de fuentes : Además, hay muchas otras formas de hacer que las fuentes se carguen más rápido.

• Confía siempre en fuentes web locales y nunca en fuentes alojadas remotamente como Google fonts.
• Redimensiona la fuente con subconjunto de fuentes
• Carga fuentes no críticas a través de la Javascript <a href="https://developer.mozilla.org/en-US/docs/Web/API/FontFace">interfaz fontface</a>
• Usa display = swap para evitar que la fuente bloquee el renderizado inicial
• Deja que los navegadores generen sus propias variantes de fuentes a través de síntesis de fuentes

Imágenes

Las imágenes que aparecen en el viewport visible durante la carga de la página también pueden recibir una alta prioridad y pueden interferir con la ruta crítica. Cuando estás seguro de que una imagen siempre aparecerá en la parte visible del sitio web, puede ser útil precargar esta imagen también.

<link rel="preload" as="image" href="important-image.webp">

Para todas las imágenes que no son inmediatamente visibles, peca de precavido y usa lazy load para estas imágenes. Usa loading = "lazy" para retrasar la carga de la imagen hasta justo antes de que la imagen se vuelva visible.

<img loading="lazy" src="lazy-image.webp" width="20" height="20" alt="...">

5. Solicitud AJAX

Las solicitudes Ajax siempre tienen asignada una alta prioridad. Por lo tanto, preferiblemente pospón las solicitudes Ajax hasta que la página haya terminado de renderizarse. Espera hasta que la página haya enviado el evento "load".

Si no es posible posponer la solicitud AJAX, puedes asegurar que la solicitud Ajax esté disponible para el navegador precargándola.

window.addEventListener('load', (event)=>{\r
  console.log('este es un buen momento para una solicitud AJAX');\r
});

6. iframes

Los iframes generalmente se descargan con una alta prioridad. Debido a que un iframe es en realidad una página dentro de una página, un iframe puede causar un retraso muy significativo en los tiempos de carga de la página. Los recursos que requiere el iframe también pueden descargarse con alta prioridad y formar su propia cadena de solicitudes críticas. El uso de iframes puede, por lo tanto, afectar significativamente tu puntuación de Lighthouse.

Puedes retrasar la carga de un iframe a través del atributo loading = "lazy". Eso a menudo marca la diferencia cuando el iframe no es inmediatamente visible durante la carga. A menudo es más rápido inyectar ese iframe en la página a través de JavaScript. Esto te permite más control sobre el tiempo para asegurarte de que no termine en la cadena de solicitudes críticas.