Acelere la carga de recursos con sugerencias de prioridad y fetchpriority

¿Qué tan rápido se cargan sus recursos más críticos?

Esta pregunta exacta tiene a los propietarios de sitios web (y expertos web experimentados) en alfileres y agujas. Y da la casualidad de que es lo que hace o deshace su sitio web en los primeros milisegundos.

Cuando se trata de optimizar la carga de recursos, tiene dos opciones:

1. Confíe completamente en los mecanismos de los navegadores para descargar y obtener recursos en un orden óptimo.
2. Trate de ayudarlos implementando sugerencias de recursos.

Desafortunadamente, a pesar de lo buenos que son los navegadores modernos, cada sitio/aplicación difiere en configuración y contexto. Y aunque son bastante buenos asignando prioridades de recursos, en algunos casos, eso no es suficiente.

Por desgracia, las sugerencias de recursos proporcionan una influencia limitada sobre la priorización de recursos.

Afortunadamente, hay una nueva sugerencia que puede agregar a su caja de herramientas de rendimiento web: sugerencias prioritarias.

Y en este artículo, aprenderá más sobre:

• Qué son las sugerencias prioritarias;
• Cuándo usarlos;
• Cómo implementarlos a través de fetchpriority;
• Cómo puede probarlos en su sitio.

¡Vamos a empezar!

¿Qué son las sugerencias de prioridad?

Las sugerencias de prioridad son una señal que permite a los propietarios y desarrolladores de sitios web indicar la prioridad de los recursos (por ejemplo, imágenes, fuentes, CSS, scripts e iframes) cuando los navegadores los cargan.

El navegador tiene que descargar todo tipo de recursos en el proceso de construcción de una página web. Como recurso prioritario, solicita y descarga primero el documento HTML.

Pero, ¿cómo determina un navegador qué cargar a continuación?

Bueno, los navegadores tienen un conjunto de prioridades predeterminadas para cada tipo de recurso:

Estas prioridades predeterminadas suelen funcionar bastante bien, lo que se traduce en un buen rendimiento web.

Sin embargo, como Addy Osmani mencionó en su artículo sobre Sugerencias de prioridad, los navegadores pueden hacer conjeturas bastante bien fundadas sobre qué buscar a continuación.

Pero ellos no conocen tu proyecto tan bien como tú.

Por lo tanto, podría ser necesario un pequeño ajuste:

"Los navegadores como Chrome tienen heurística para intentar obtener recursos con la prioridad adecuada en función de señales tales como si están en la ventana gráfica. Dicho esto, sin Sugerencias de prioridad, Chrome solo puede aumentar la prioridad para las imágenes en la ventana gráfica una vez que el diseño se ha completado. Esto suele ser demasiado tarde y, en este punto, puede competir con todo lo demás. Otra razón para considerar el uso de sugerencias es que, como autor de una página, es probable que sepa qué es lo más importante que sus usuarios vean primero y puede informar al navegador para que pueda optimizar para su caso de uso".

Anteriormente, lo único que podía hacer era usar la precarga o la preconexión.

Y aunque la precarga es una directiva obligatoria que los navegadores deben cumplir, en algunos casos, el recurso precargado aún puede tener una prioridad baja.

Por ejemplo, una imagen LCP (Largost Contentful Paint) precargada puede tener una prioridad baja y ser rechazada por otros recursos de alta prioridad. En tales casos, las Sugerencias de Prioridad pueden complementar perfectamente la precarga y ayudar con la rapidez con la que se cargan los recursos.

Aquí hay un seminario web sobre Priority Hints, donde Pat Meenan habla sobre Priority Hints en Chrome e incluso los llama "un código de trucos" para LCP:

Este es un excelente ejemplo del poder de las sugerencias prioritarias.

Ahora, veamos cuándo debe implementar las sugerencias prioritarias en su estrategia de rendimiento web.

Cuándo usar sugerencias de prioridad

Hay 5 escenarios principales en los que Priority Hints podría ayudar, según Google:

1. Tiene varias imágenes en la mitad superior de la página, pero no es necesario que todas tengan la misma prioridad. Por ejemplo, en un carrusel de imágenes, solo la primera imagen visible necesita una prioridad más alta en comparación con las demás.
   
2. Las imágenes principales dentro de la ventana gráfica comienzan con una prioridad baja. Una vez que se completa el diseño, Chrome descubre que están en la ventana gráfica y aumenta su prioridad (desafortunadamente, las herramientas de desarrollo solo muestran la prioridad final; WebPageTest mostrará ambas). Esto generalmente agrega un retraso significativo a la carga de la imagen. Proporcionar la sugerencia de prioridad en el marcado permite que la imagen comience con una prioridad alta y comience a cargarse mucho antes.

Nota: Declarar secuencias de comandos como asíncronas o diferidas le dice al navegador que las cargue de forma asíncrona. Sin embargo, como se ve en la figura anterior, a estos scripts también se les asigna una prioridad "baja". Es posible que desee aumentar su prioridad al mismo tiempo que garantiza la descarga asincrónica, en particular para los scripts que son críticos para la experiencia del usuario.

Puede utilizar la API fetch() de JavaScript para obtener recursos o datos de forma asíncrona. El navegador asigna una prioridad alta a Fetch. Puede haber situaciones en las que no desee que todas sus búsquedas se ejecuten con alta prioridad y prefiera usar diferentes sugerencias de prioridad en su lugar. Esto puede ser útil cuando se ejecutan llamadas de API en segundo plano y se combinan con llamadas de API que responden a la entrada del usuario, como con la función de autocompletar. Las llamadas a la API en segundo plano se pueden etiquetar como de baja prioridad y las llamadas a la API interactivas se pueden marcar como de alta prioridad.

El navegador asigna CSS y fuentes de alta prioridad, pero todos estos recursos pueden no ser igualmente importantes o necesarios para LCP. Puede usar sugerencias de prioridad para reducir la prioridad de algunos de estos recursos.

Casi cualquier sitio web cae dentro de los dos primeros escenarios. Para determinar si debe trabajar en alguno de los demás, profundice en su código (HTML/JS) o busque ayuda de un desarrollador web.

Cómo implementar sugerencias de prioridad: el atributo fetchpriority

Puede implementar Sugerencias de prioridad mediante el atributo HTML fetchpriority.

Puede utilizar el atributo con:

• Enlace
• imagen
• guion
• etiquetas iframe

El atributo fetchpriority acepta uno de tres valores:

• alta: indica que consideras que el recurso es crítico y quieres que el navegador lo priorice.
• bajo: indica que considera que el recurso es menos importante y desea que el navegador lo despriorice.
• auto: un valor predeterminado cuando no tiene una preferencia y deja que el navegador decida la prioridad adecuada.

Alternativamente, puede usar la API de obtención de JavaScript:

Algunas cosas a tener en cuenta al usar el atributo fetchpriority :

• fetchpriority no garantiza que un recurso de mayor prioridad se cargue antes que otros recursos (de menor prioridad) del mismo tipo.
• fetchpriority no debe usarse para controlar el orden de carga en sí.
• fetchpriority no es una directiva obligatoria y no puede obligar al navegador a buscar un recurso o evitar que lo haga. Depende del navegador si va a buscar el recurso o no.

Importante: al igual que las sugerencias de recursos, las sugerencias de prioridad deben usarse con precaución, ya que el uso excesivo puede provocar ralentizaciones en lugar de mejoras en el rendimiento.

Cómo probar su sitio con sugerencias de prioridad

Antes de ejecutar sus pruebas, debe saber que las sugerencias prioritarias solo están disponibles en Chrome 101 (o posterior) y Edge 101 (o posterior):

Ahora a la pregunta en cuestión:

La forma más fácil sería usar una herramienta, para que no tenga que cambiar su código manualmente.

Afortunadamente, la función Experimentos de WebPageTest le permite probar funciones de rendimiento como Sugerencias prioritarias sin cambiar su código.

Sin embargo, la función Experimento de WebPageTest es parte de su suscripción paga, por lo que debe planificar algunos gastos adicionales.

Por el contrario, si tiene habilidades técnicas, puede ajustar el código de su sitio por su cuenta y probar el impacto de Priority Hints.

Asegúrese de realizar pruebas después de cada modificación que realice.

Resumen

Cubrimos mucho terreno, así que aquí hay un resumen rápido de los puntos más importantes:

• Las sugerencias de prioridad le permiten indicar la prioridad de los recursos de su sitio.
• Las sugerencias de prioridad pueden ayudarlo a acelerar la carga de imágenes en la mitad superior de la página, imágenes destacadas (elemento LCP), scripts asíncronos y diferidos, CSS y archivos de fuentes.
• Las sugerencias de prioridad se pueden implementar a través del atributo fetchpriority.
• Puede usar el atributo fetchpriority con etiquetas de enlace, img, script e iframe.
• El atributo fetchpriority acepta uno de tres valores: alto, bajo y automático.
• Precaución: las Sugerencias prioritarias deben implementarse con moderación, ya que su uso excesivo puede provocar una disminución del rendimiento en lugar de mejoras en la velocidad.
• fetchpriority no es una directiva obligatoria y no puede obligar al navegador a buscar un recurso o evitar que lo haga. Depende del navegador si va a buscar el recurso o no.
• Las sugerencias de prioridad están disponibles en Chrome 101 o posterior.

Para medir el impacto de Priority Hints en su sitio, ejecute pruebas después de cada modificación.

Herramientas de prueba populares:

• Perspectivas de PageSpeed
• GT Metrix
• Prueba de página web
• Faro
• Pingdom