La API de Fetch Priority indica la prioridad relativa de los recursos para el navegador. Puede habilitar una carga óptima y mejorar las Métricas web esenciales.
Cuando un navegador analiza una página web y comienza a descubrir y descargar recursos como imágenes, secuencias de comandos o CSS, le asigna un priority de recuperación para intentar descargar recursos en un orden óptimo. Estas prioridades pueden depender del tipo de recurso y de la ubicación en el documento. Por ejemplo, las imágenes en viewport pueden tener una prioridad High, mientras que la prioridad para el CSS de carga anticipada que bloquea la renderización a través de <link> en <head> podría ser Very High. Los navegadores son bastante buenos para asignar prioridades que funcionan bien, pero pueden no ser óptimos en todos los casos.
En este artículo, analizaremos la API de Fetch Priority y el atributo HTML fetchpriority, que te permiten indicar la prioridad relativa de un recurso (high o low). La prioridad de recuperación puede ayudar a optimizar las Métricas web esenciales.
Resumen
Estas son algunas áreas clave en las que la prioridad de recuperación puede resultar útil:
- Para aumentar la prioridad de la imagen LCP, especifica
fetchpriority="high"en el elemento de la imagen, lo que hará que el LCP ocurra antes. - Aumenta la prioridad de las secuencias de comandos de
asynccon una mejor semántica que el truco actual de uso general (se inserta un<link rel="preload">para la secuencia de comandosasync). - Disminuye la prioridad de las secuencias de comandos tardías para permitir una mejor secuenciación con las imágenes.
Históricamente, los desarrolladores han tenido cierta influencia sobre la prioridad de recursos con la precarga y la preconexión, pero han tenido una influencia limitada. La prioridad de recuperación complementa estas sugerencias de recursos, pero es fundamental que entiendas cuál es su lugar. La precarga te permite informar al navegador sobre los recursos críticos que deseas cargar con anticipación antes de que se descubran de forma natural. Esto es especialmente útil para recursos que no son fáciles de descubrir, como fuentes incluidas en hojas de estilo, imágenes de fondo o recursos cargados desde una secuencia de comandos. Preconnect ayuda a preparar las conexiones con los servidores de origen cruzado y puede ayudar a mejorar métricas como el Time-to-first-byte. Es útil cuando se conoce el origen, pero no necesariamente la URL exacta de un recurso que se necesitará.
La prioridad de recuperación es un indicador basado en lenguaje de marcado (disponible a través del atributo fetchpriority) que los desarrolladores pueden usar para indicar la prioridad relativa de un recurso en particular. También puedes usar estas sugerencias a través de JavaScript y la API de Fetch con la propiedad priority para influir en la prioridad de las recuperaciones de recursos de los datos. La prioridad de recuperación también puede complementar la precarga. Toma una imagen de Largest Contentful Paint. Cuando esté precargada, seguirá teniendo una prioridad baja. Si otros recursos iniciales de baja prioridad la rechazan, el uso de la prioridad de recuperación puede ayudar a determinar en qué momento se carga la imagen.
La prioridad de recuperación está disponible en Chrome 101 o versiones posteriores.
Prioridad de los recursos
La secuencia de descarga de recursos depende de la prioridad asignada al navegador para cada recurso de la página. Diferentes factores pueden afectar la lógica de cálculo de prioridad. Por ejemplo:
- CSS, fuentes, secuencias de comandos, imágenes y recursos de terceros tienen asignadas distintas prioridades.
- La ubicación o el orden en que haces referencia a los recursos en el documento también afecta la prioridad de los recursos.
- La sugerencia del recurso
preloadayuda al navegador a descubrir un recurso más rápido y, así, cargarlo antes de que el documento lo cargue y afecte la prioridad. - Cambios en el cálculo de prioridad para las secuencias de comandos
asyncodefer.
En la siguiente tabla, se consideran esos factores para mostrar cómo se priorizan y secuencian actualmente la mayoría de los recursos en Chrome.
| Carga en fase de bloqueo de diseño | Carga una por una en la fase de bloqueo de diseño | ||||
|---|---|---|---|---|---|
| Prioridad de intermitencia |
VeryHigh | Alta | Versión intermedia | Bajo | VeryLow |
| Prioridad de Herramientas para desarrolladores |
La más alta | Alta | Versión intermedia | Bajo | Más bajo |
| Recurso principal | |||||
| CSS (anticipado**) | CSS (tardío**) | CSS (Discrepancia en el contenido multimedia***) | |||
| Secuencia de comandos (adelantada** o no desde el escáner de precarga) | Secuencia de comandos (tardío**) | Secuencia de comandos (asíncrona) | |||
| Fuente | Fuente (rel=preload) | ||||
| Importar | |||||
| Imagen (en viewport) | Imagen (las primeras 5 imágenes > 10,000 px2) | De imagen | |||
| Contenido multimedia (video/audio) | |||||
| Recuperación previa | |||||
| XSL | |||||
| XHR (sincronización) | XHR/recuperación* (asíncrona) | ||||
El navegador descarga recursos con la misma prioridad calculada en el orden en que se descubren. Puedes verificar la prioridad asignada a diferentes recursos cuando cargas una página en la pestaña Red de las herramientas para desarrolladores de Chrome. (Asegúrate de incluir la columna de prioridad haciendo clic con el botón derecho sobre los encabezados de la tabla).
type = "font" en la página de detalles de las noticias de la BBC
Cuando las prioridades cambian, puedes usar la configuración de Filas de solicitudes grandes para ver la prioridad inicial y final. Esto se muestra en la información sobre la herramienta sin importar el parámetro de configuración Filas de solicitud grandes.
¿Cuándo necesitarías la prioridad de recuperación?
El conocimiento de la lógica de priorización del navegador te proporciona algunos controles existentes para modificar el orden de las descargas. Puedes
- Coloca etiquetas de recursos como
<script>y<link>según el orden en el que desees descargarlas. Por lo general, los recursos con la misma prioridad se cargan en el orden en que se descubren. - Usa la sugerencia del recurso
preloadpara descargar los recursos necesarios con anticipación, en especial, aquellos que el navegador no descubre con facilidad. - Usa
asyncodeferpara descargar secuencias de comandos sin bloquear otros recursos. - Carga diferida el contenido de la mitad inferior de la página a fin de que el navegador pueda usar el ancho de banda disponible para los recursos más importantes de la mitad superior.
Estas técnicas ayudan a controlar el procesamiento de la prioridad del navegador, lo que mejora el rendimiento y las Métricas web esenciales. Por ejemplo, cuando se precarga una imagen de fondo crítica, se puede descubrir mucho antes, lo que mejora el Largest Contentful Paint (LCP).
A veces, estos identificadores pueden no ser suficientes para priorizar los recursos de manera óptima para tu aplicación. Estas son algunas de las situaciones en las que la prioridad de recuperación podría ser útil:
- Si bien tienes varias imágenes en la mitad superior de la página, 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.
- Las hero image dentro del viewport suelen comenzar con una prioridad "Baja" (ten en cuenta que un cambio en Chrome 117 establece las primeras cinco imágenes grandes como "Medianas", pero puede incluir o no tu hero image). Una vez finalizado el diseño, Chrome descubre que están en el viewport y aumenta su prioridad. Por lo general, esto agrega un retraso significativo en la carga de la imagen. Si proporcionas la prioridad de recuperación en el lenguaje de marcado, la imagen comenzará con una prioridad "Alta" y comenzará a cargarse mucho antes.
Ten en cuenta que la precarga sigue siendo necesaria para el descubrimiento anticipado de imágenes de LCP incluidas como fondos de CSS y se puede combinar con la prioridad de recuperación si se incluyefetchpriority='high'en la precarga; de lo contrario, comenzará con una prioridad "Baja" o "Media" para las imágenes. - La declaración de secuencias de comandos como
asyncodeferle indica al navegador que las cargue de forma asíncrona. Sin embargo, como se ve en la tabla anterior, a estas secuencias de comandos también se les asigna una prioridad "Baja". Quizás te convenga aumentar su prioridad y garantizar una descarga asíncrona, especialmente para cualquier secuencia de comandos que sea fundamental para la experiencia del usuario. - Puedes usar la API de
fetch()de JavaScript para recuperar recursos o datos de forma asíncrona. El navegador asigna una prioridad "Alta" a la recuperación. Puede haber situaciones en las que no desees que todas tus recuperaciones se ejecuten con prioridad “Alta” y prefieras usar una prioridad de recuperación diferente en su lugar. Esto puede ser útil cuando se ejecutan llamadas a la API en segundo plano y se combinan con llamadas a la API que responden a las entradas del usuario, como con el autocompletado. Las llamadas a la API en segundo plano se pueden etiquetar como de prioridad “Baja”, y las llamadas interactivas a la API se marcan como de prioridad “Alta”. - El navegador asigna CSS y fuentes una prioridad "Alta", pero es posible que todos los recursos no sean igualmente importantes o necesarios para el LCP. Puedes usar la prioridad de recuperación para reducir la prioridad de algunos de estos recursos.
El atributo fetchpriority
Puedes proporcionar una prioridad de recuperación con el atributo HTML fetchpriority. Puedes usar el atributo con las etiquetas link, img y script. El atributo te permite especificar la prioridad para los tipos de recursos, como CSS, fuentes, imágenes y secuencias de comandos, cuando se descargan con las etiquetas admitidas.
El atributo fetchpriority acepta uno de estos tres valores:
high: Consideras que el recurso es una prioridad alta y quieres que el navegador lo priorice, siempre y cuando la heurística del navegador no evite que eso suceda.low: Consideras que el recurso tiene una prioridad baja y quieres que el navegador le quite la prioridad si su heurística lo permite.auto: Este es el valor predeterminado cuando no tienes una preferencia y permites que el navegador decida la prioridad adecuada.
Estos son algunos ejemplos del uso del atributo fetchpriority en el lenguaje de marcado y la propiedad priority equivalente a la secuencia de comandos.
<!-- We don't want a high priority for this above-the-fold image -->
<img src="/images/in_viewport_but_not_important.svg" fetchpriority="low" alt="I'm an unimportant image!">
<!-- We want to initiate an early fetch for a resource, but also deprioritize it -->
<link rel="preload" href="/js/script.js" as="script" fetchpriority="low">
<script>
fetch('https://example.com/', {priority: 'low'})
.then(data => {
// Trigger a low priority fetch
});
</script>
Prioridad del navegador y fetchpriority
Puedes aplicar el atributo fetchpriority a diferentes recursos, como se muestra en la siguiente figura, para aumentar o reducir potencialmente su prioridad calculada. fetchpriority="auto" (FEW) en cada fila denota la prioridad predeterminada para ese tipo de recurso (también disponible como Documentos de Google).
| Carga en fase de bloqueo de diseño | Carga una por una en la fase de bloqueo de diseño | ||||
|---|---|---|---|---|---|
| Prioridad de intermitencia |
VeryHigh | Alta | Versión intermedia | Bajo | VeryLow |
| Prioridad de Herramientas para desarrolladores |
La más alta | Alta | Versión intermedia | Bajo | Más bajo |
| Recurso principal | ◉ | ||||
| CSS (anticipado**) | ⬆◉ | ⬇ | |||
| CSS (tardío**) | ⬆ | ◉ | ⬇ | ||
| CSS (Discrepancia en el contenido multimedia***) | ⬆*** | ◉⬇ | |||
| Secuencia de comandos (adelantada** o no desde el escáner de precarga) | ⬆◉ | ⬇ | |||
| Secuencia de comandos (tardío**) | ⬆ | ◉ | ⬇ | ||
| Secuencia de comandos (asíncrona o aplazada) | ⬆ | ◉⬇ | |||
| Fuente | ◉ | ||||
| Fuente (rel=preload) | ⬆◉ | ⬇ | |||
| Importar | ◉ | ||||
| Imagen (en viewport, después del diseño) | ⬆◉ | ⬇ | |||
| Imagen (las primeras 5 imágenes > 10,000 px2) | ⬆ | ◉ | ⬇ | ||
| De imagen | ⬆ | ◉⬇ | |||
| Contenido multimedia (video/audio) | ◉ | ||||
| XHR (sincronización): obsoleta | ◉ | ||||
| XHR/recuperación* (asíncrona) | ⬆◉ | ⬇ | |||
| Recuperación previa | ◉ | ||||
| XSL | ◉ | ||||
Ten en cuenta que fetchpriority establece la prioridad relativa, es decir, aumenta o disminuye la prioridad predeterminada en una cantidad adecuada, en lugar de establecer la prioridad de manera explícita en "Alta" o "Baja", y el navegador la decide. Suele ser "Alta" o "Baja", pero no siempre. Por ejemplo, el CSS crítico con fetchpriority="high" seguirá teniendo la prioridad "Muy alta"/"Más alta", y el uso de fetchpriority="low" en ellas conservará la prioridad "Alta"; en ningún caso la prioridad está configurada explícitamente como "Alta" o "Baja".
Casos de uso
Puedes usar el atributo fetchpriority para abordar situaciones en las que es posible que quieras proporcionar al navegador una sugerencia adicional sobre la prioridad con la que se debe recuperar un recurso.
Aumenta la prioridad de la imagen de LCP
Puedes especificar fetchpriority="high" para aumentar la prioridad del LCP o de otras imágenes fundamentales.
<img src="lcp-image.jpg" fetchpriority="high">
En la siguiente comparación, se muestra la página de Google Flights con una imagen de fondo de LCP cargada con prioridad de recuperación y sin ella. Con la prioridad establecida en alta, el LCP mejoró de 2.6 s a 1.9 s.
Disminuye la prioridad de las imágenes de la mitad superior de la página
Puedes usar fetchpriority="low" para reducir la prioridad de las imágenes de la mitad superior de la página que podrían no ser importantes en un principio, por ejemplo, en un carrusel de imágenes.
<ul class="carousel">
<img src="img/carousel-1.jpg" fetchpriority="high">
<img src="img/carousel-2.jpg" fetchpriority="low">
<img src="img/carousel-3.jpg" fetchpriority="low">
<img src="img/carousel-4.jpg" fetchpriority="low">
</ul>
En un experimento anterior con la app de Oodle, usamos esta opción para reducir la prioridad de las imágenes que no aparecen durante la carga. Esto redujo el tiempo de carga en 2 segundos.
Disminuye la prioridad de los recursos precargados
Para evitar que los recursos precargados compitan con otros recursos críticos, puedes proporcionar una pista para reducir su prioridad. Puedes usar esta técnica con imágenes, secuencias de comandos y CSS.
<!-- Lower priority only for non-critical preloaded scripts -->
<link rel="preload" as="script" href="critical-script.js">
<link rel="preload" href="/js/script.js" as="script" fetchpriority="low">
<!-- Preload CSS without blocking other resources -->
<link rel="preload" as="style" href="theme.css" fetchpriority="low" onload="this.rel='stylesheet'">
Volver a priorizar las secuencias de comandos
Las secuencias de comandos necesarias para hacer que algunas partes de la página sean interactivas son esenciales, pero no deben bloquear otros recursos. Puedes marcarlas como asíncronas con prioridad alta.
<script src="async_but_important.js" async fetchpriority="high"></script>
No se puede marcar como asíncrona las secuencias de comandos si dependen de estados específicos del DOM. Sin embargo, si están en una parte inferior de la página, se pueden descargar con una prioridad menor, como se muestra.
<script src="blocking_but_unimportant.js" fetchpriority="low"></script>
Disminuye la prioridad de las recuperaciones de datos que no son críticos
El navegador ejecuta fetch con una prioridad alta. Si tienes varias recuperaciones que se pueden activar simultáneamente, puedes usar la prioridad predeterminada alta para las recuperaciones de datos más críticas y reducirla para datos menos críticos.
// Important validation data (high by default)
let authenticate = await fetch('/user');
// Less important content data (suggested low)
let suggestedContent = await fetch('/content/suggested', {priority: 'low'});
Recuperar las notas de la implementación de la prioridad
La prioridad de recuperación puede mejorar el rendimiento en casos de uso específicos, como se mencionó anteriormente. Debes tener en cuenta lo siguiente:
- El atributo
fetchpriorityes una sugerencia y no una directiva. El navegador intentará respetar la preferencia del desarrollador. También es posible que el navegador aplique sus preferencias para la prioridad de recursos según se considere necesario en caso de conflictos. La prioridad de recuperación no se debe confundir con una precarga. Ambos son diferentes por los siguientes motivos:
- La precarga es una recuperación obligatoria y no una sugerencia.
- La precarga permite que el navegador descubra el recurso con anticipación, pero aún lo recuperará con la prioridad predeterminada. Por el contrario, la prioridad de recuperación no ayuda a la visibilidad, pero te permite aumentar o disminuir la prioridad de recuperación.
- Es más fácil observar y medir los efectos de una precarga.
La prioridad de recuperación puede complementar las precargas aumentando el nivel de detalle de la priorización. Si ya especificaste una precarga como uno de los primeros elementos en el
<head>para una imagen LCP, es posible que una prioridad de recuperación dehighno genere ganancias significativas. Sin embargo, si la precarga fue después de otros recursos, una prioridad de recuperaciónhighpuede mejorar el LCP. Si una imagen crítica es una imagen de fondo CSS, debes precargarla confetchpriority = "high".Las ganancias notables debido a la priorización serán más relevantes en entornos en los que más recursos compiten por el ancho de banda de red disponible. Esto es común para las conexiones HTTP/1.x en las que no son posibles descargas paralelas o en conexiones HTTP/2 con ancho de banda bajo. La priorización puede resolver cuellos de botella en estas condiciones.
Las CDN no implementan de manera uniforme la priorización HTTP/2. Incluso si el navegador comunica la prioridad sugerida usando la prioridad de recuperación, es posible que la CDN no vuelva a priorizar los recursos en el orden requerido. Esto hace que probar la prioridad de recuperación sea difícil. Las prioridades se aplican tanto internamente dentro del navegador como con protocolos que admiten la priorización (HTTP/2 y HTTP/3). Vale la pena usarlo incluso para la priorización interna del navegador, independientemente de la compatibilidad con la CDN o el origen, ya que a menudo cambia cuando el navegador solicita los recursos (por ejemplo, los recursos de baja prioridad, como las imágenes, a menudo no se solicitan mientras el navegador procesa los elementos
<head>críticos).Tal vez no sea posible incorporar la prioridad de recuperación como una práctica recomendada en el diseño inicial. Es una optimización que puedes aplicar más adelante en el ciclo de desarrollo. Puedes verificar las prioridades que se asignan a los diferentes recursos en la página y, si no coinciden con tus expectativas, puedes introducir prioridad de recuperación para una mayor optimización.
Uso de la precarga después de Chrome 95
La función Prioridad de recuperación estuvo disponible para pruebas en Chrome 73 a 76, pero no se lanzó debido a problemas de priorización con las precargas corregidas en Chrome 95. Antes de Chrome 95, las solicitudes emitidas a través de <link rel=preload> siempre se inician antes que otras solicitudes que ve el escáner de precarga, incluso si las demás solicitudes tienen una prioridad más alta.
Con la corrección en Chrome 95 y la mejora de la prioridad de recuperación, esperamos que los desarrolladores comiencen a usar la precarga para su propósito previsto: precargar recursos que el analizador no detecta (fuentes, importaciones, imágenes de LCP de fondo). La posición de la sugerencia preload afectará cuando se precarga el recurso. Estos son algunos puntos clave para usar la precarga:
- La inclusión de la precarga en los encabezados HTTP hará que se adelanta a todo lo demás.
- En general, las precargas se cargan en el orden en que el analizador las llega para cualquier valor superior a la prioridad "Media", por lo que debes tener cuidado si incluyes precargas al comienzo del código HTML.
- Las precargas de fuentes probablemente funcionarán mejor hacia el final del encabezado o el principio del cuerpo.
- Las precargas de importación (dinámicas
import()omodulepreload) se deben realizar después de la etiqueta de la secuencia de comandos que necesita la importación (para que la secuencia de comandos real se cargue o analice primero). Básicamente, si la etiqueta de la secuencia de comandos carga una secuencia de comandos que activará la carga de dependencias, asegúrate de que<link rel=preload>para las dependencias esté después de la etiqueta de secuencia de comandos superior. De lo contrario, es posible que las dependencias terminen cargándose antes que la secuencia de comandos principal. En el orden correcto, se puede analizar o evaluar la secuencia de comandos principal mientras se cargan las dependencias. - Las precargas de imágenes tienen una prioridad “Baja” o “Media” (sin prioridad de recuperación) y deben ordenarse en relación con secuencias de comandos asíncronas y otras etiquetas de prioridad baja o más baja.
Historial
La prioridad de la recuperación se experimentó primero en Chrome como una prueba de origen en 2018 y, luego, nuevamente en 2021 con el atributo importance. En ese momento, se conocía como Sugerencias de prioridad. Desde entonces, la interfaz cambió a fetchpriority para HTML y priority para la API de Fetch de JavaScript como parte del proceso de estándares web. Para reducir la confusión, ahora nos referimos a esta API como prioridad de recuperación.
Conclusión
Es probable que los desarrolladores estén interesados en la prioridad de recuperación con las correcciones en el comportamiento de precarga y el enfoque reciente en las Métricas web esenciales y el LCP. Ahora tienen controles adicionales disponibles para lograr la secuencia de carga deseada.