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 poder descargarlos en un orden óptimo. Por lo general, la prioridad de un recurso depende de qué es y dónde se encuentra en el documento. Por ejemplo, las imágenes en viewport pueden tener una prioridad High, y la prioridad para los CSS que bloquean la renderización y de carga anticipada con <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 esta página, se analiza la API de Fetch Priority y el atributo HTML fetchpriority, que te permite 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:
- Se aumenta la prioridad de la imagen LCP mediante la especificación de
fetchpriority="high"en el elemento de imagen, lo que hace que el LCP ocurra antes. - Se aumentará la prioridad de las secuencias de comandos
asynccon una mejor semántica que el truco más común actual (insertar un<link rel="preload">para la secuencia de comandosasync). - Disminuir la prioridad de las secuencias de comandos tardías para permitir una mejor secuenciación con imágenes
Históricamente, los desarrolladores han tenido una influencia limitada sobre la prioridad de recursos con la precarga y la preconexión. La precarga te permite informar al navegador sobre los recursos críticos que deseas cargar con anticipación antes de que el navegador los encuentre naturalmente. Esto resulta particularmente útil para recursos que son más difíciles de descubrir, como las fuentes incluidas en las hojas de estilo, las imágenes de fondo o los recursos cargados desde una secuencia de comandos. La preconexión ayuda a preparar las conexiones con los servidores de origen cruzado y puede mejorar métricas como el Tiempo hasta el primer byte. Resulta útil cuando se conoce el origen, pero no necesariamente la URL exacta de un recurso que se necesitará.
La prioridad de recuperación complementa estas sugerencias de recursos. 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.
Prioridad de los recursos
La secuencia de descarga de recursos depende de la prioridad asignada al navegador para cada recurso de la página. Entre los factores que pueden afectar la lógica de cálculo de prioridad, se incluyen los siguientes:
- Es el tipo de recurso, como CSS, fuentes, secuencias de comandos, imágenes y recursos de terceros.
- Es la ubicación o el orden en que el documento hace referencia a los recursos.
- Si los atributos
asyncodeferse usan en secuencias de comandos.
En la siguiente tabla, se muestra cómo Chrome prioriza y secuencia la mayoría de los recursos:
| 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) | ||||
| Importación | |||||
| 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 los recursos con la misma prioridad calculada en el orden en que se descubrieron. 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 priority. Para ello, haz clic con el botón derecho en los encabezados de la tabla y marca la casilla).
type = "font" en la página de detalles de las noticias de la BBC
type = "script" en la página de detalles de las noticias de la BBC.Cuando las prioridades cambian, puedes ver la prioridad inicial y la final en el parámetro de configuración Filas de solicitudes grandes o en la información sobre la herramienta.
¿Cuándo podrías necesitar la prioridad de recuperación?
Ahora que comprendes la lógica de priorización del navegador, puedes modificar el orden de descarga de la página para optimizar su rendimiento y las Métricas web esenciales. Estos son algunos ejemplos de los aspectos que puedes cambiar para influir en la prioridad de las descargas de recursos:
- Coloca las etiquetas de recursos como
<script>y<link>en el orden en que deseas que el navegador las descargue. 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 de la página.
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:
- Tienes varias imágenes de la mitad superior de la página, pero no todas deberían tener la misma prioridad. Por ejemplo, en un carrusel de imágenes, solo la primera imagen visible necesita una prioridad más alta y las demás, normalmente fuera de pantalla, se pueden configurar inicialmente para que tengan menor prioridad.
- Las imágenes dentro del viewport suelen comenzar con una prioridad
Low. Una vez finalizado el diseño, Chrome descubre que están en el viewport y aumenta su prioridad. Esto suele agregar un retraso significativo en la carga de las imágenes críticas, como las hero images. Proporcionar la prioridad de recuperación en el lenguaje de marcado permite que la imagen comience con una prioridad deHighy comience a cargarse mucho antes. En un intento por automatizar esto, Chrome establece las primeras cinco imágenes más grandes con prioridadMedium, lo que ayudará, pero unafetchpriority="high"explícita será aún mejor.
Aún se requiere la precarga para el descubrimiento anticipado de imágenes LCP que se incluyen como fondos de CSS. Para aumentar la prioridad de las imágenes de fondo, incluyefetchpriority='high'en la carga previa. - La declaración de secuencias de comandos como
asyncodeferle indica al navegador que las cargue de forma asíncrona. Sin embargo, como se muestra en la tabla de prioridades, a estas secuencias de comandos también se les asigna una prioridad "Baja". Es posible que desees aumentar su prioridad y, al mismo tiempo, garantizar una descarga asíncrona, especialmente para las secuencias de comandos que son fundamentales para la experiencia del usuario. - Si usas la API de
fetch()de JavaScript para recuperar recursos o datos de forma asíncrona, el navegador le asigna la prioridadHigh. Es posible que desees que algunas de tus recuperaciones se ejecuten con menor prioridad, en especial si combinas llamadas a la API en segundo plano con llamadas a la API que responden a las entradas del usuario. Marca las llamadas a la API en segundo plano con prioridadLowy las llamadas interactivas a la API como prioridadHigh. - El navegador asigna CSS y fuentes una prioridad
High, pero algunos de esos recursos pueden ser más importantes que otros. Puedes usar la prioridad de recuperación para reducir la prioridad de los recursos que no son críticos (ten en cuenta que las primeras etapas de CSS bloquean la renderización, por lo que, por lo general, debe ser una prioridadHigh).
El atributo fetchpriority
Usa el atributo HTML fetchpriority para especificar la prioridad de descarga de los tipos de recursos, como CSS, fuentes, imágenes y secuencias de comandos cuando se descarguen con las etiquetas link, img o script. Puede tener los siguientes valores:
high: Este recurso tiene una prioridad más alta y quieres que el navegador lo priorice más de lo habitual, siempre y cuando la heurística del navegador no evite que eso suceda.low: El recurso tiene una prioridad más baja y quieres que el navegador le dé prioridad, nuevamente si su heurística lo permite.auto: Es el valor predeterminado, que permite al navegador elegir la prioridad adecuada.
A continuación, se muestran algunos ejemplos del uso del atributo fetchpriority en el lenguaje de marcado, así como 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>
Efectos de la prioridad del navegador y fetchpriority
Puedes aplicar el atributo fetchpriority a diferentes recursos, como se muestra en la siguiente tabla, para aumentar o reducir su prioridad calculada. fetchpriority="auto" (Kubernetes) en cada fila marca la prioridad predeterminada para ese tipo de recurso. (también disponible como documento de Google).
| Carga en fase de bloqueo de diseño | Carga uno a la vez 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) | ⬆◉ | ⬇ | |||
| Importación | ◉ | ||||
| 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 | ◉ | ||||
fetchpriority establece una prioridad relativa, lo que significa que aumenta o disminuye la prioridad predeterminada en una cantidad apropiada, en lugar de establecer la prioridad de manera explícita en High o Low. Esto suele dar como resultado la prioridad High o Low, pero no siempre. Por ejemplo, el CSS crítico con fetchpriority="high" conserva la prioridad "Muy alta"/"Más alta", y el uso de fetchpriority="low" en estos elementos conserva la prioridad "Alta". Ninguno de estos casos implica establecer de forma explícita la prioridad en High o Low.
Casos de uso
Usa el atributo fetchpriority cuando quieras darle al navegador una sugerencia adicional sobre la prioridad con la que 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
Usa fetchpriority="low" para reducir la prioridad de las imágenes de la mitad superior de la página que no son importantes de inmediato (por ejemplo, imágenes fuera de pantalla 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>
Si bien las imágenes 2 a 4 estarán fuera del viewport, se las puede considerar "lo suficientemente cerca" como para mejorarlas a high y, además, cargarse incluso si se agrega un atributo load=lazy. Por lo tanto, fetchpriority="low" es la solución correcta para esto.
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. Disminuyó el tiempo de carga de la página 2 segundos.
Disminuye la prioridad de los recursos precargados
Para evitar que los recursos precargados compitan con otros recursos críticos, puedes reducir su prioridad. Usa 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" as="script" href="non-critical-script.js" fetchpriority="low">
<!-- Preload CSS without blocking render, or 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 que tu página necesita ser interactiva deben cargarse rápidamente, pero no deben bloquear otros recursos más críticos que bloqueen la renderización. Puedes marcarlos como async con prioridad alta.
<script src="async_but_important.js" async fetchpriority="high"></script>
No puedes marcar una secuencia de comandos como async si se basa en estados específicos del DOM. Sin embargo, si se ejecutan más adelante en la página, puedes cargarlos con menos prioridad:
<script src="blocking_but_unimportant.js" fetchpriority="low"></script>
Esto bloqueará el analizador cuando llegue a esta secuencia de comandos, pero permitirá que se priorice el contenido anterior.
Una alternativa, si se necesita el DOM completo, es usar el atributo defer (que se ejecuta, en orden, después de DOMContentLoaded) o incluso async en la parte inferior de la página.
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 pueden activarse simultáneamente, puedes usar la prioridad predeterminada alta para las recuperaciones de datos más importantes y disminuir la prioridad de los 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, pero hay algunos aspectos que debes tener en cuenta cuando usas la prioridad de recuperación:
- El atributo
fetchpriorityes una sugerencia, no una directiva. El navegador intenta respetar la preferencia del desarrollador, pero también puede aplicar sus preferencias de prioridad de recursos para la prioridad de recursos para resolver conflictos. No confundas la prioridad de recuperación con la precarga:
- La precarga es una recuperación obligatoria, no una sugerencia.
- La precarga permite que el navegador descubra un recurso con anticipación, pero igual recupera el recurso con la prioridad predeterminada. Por el contrario, la prioridad de recuperación no ayuda con la visibilidad, pero te permite aumentar o disminuir la prioridad de recuperación.
- A menudo, es más fácil observar y medir los efectos de una precarga que los efectos de un cambio de prioridad.
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
<head>para una imagen de LCP, es posible que una prioridad de recuperación dehighno mejore el LCP significativamente. Sin embargo, si la precarga se realiza después de que se cargan otros recursos, una prioridad de recuperación dehighpuede mejorar aún más el LCP. Si una imagen crítica es una imagen de fondo CSS, cárgala previamente confetchpriority = "high".Las mejoras en el tiempo de carga a partir de la priorización son más relevantes en entornos en los que una mayor cantidad de recursos compiten por el ancho de banda de red disponible. Esto es común en conexiones HTTP/1.x en las que no se pueden realizar descargas paralelas, o en conexiones HTTP/2 o HTTP/3 con ancho de banda bajo. En estos casos, la priorización puede ayudar a resolver cuellos de botella.
Las CDN no implementan la priorización HTTP/2 de manera uniforme, como tampoco lo hacen para HTTP/3. Incluso si el navegador comunica la prioridad de la recuperación de la prioridad, es posible que la CDN no vuelva a priorizar los recursos en el orden especificado. Esto dificulta la prueba de la prioridad de recuperación. Las prioridades se aplican tanto internamente dentro del navegador como con protocolos que admiten la priorización (HTTP/2 y HTTP/3). De todas formas, vale la pena usar la prioridad de recuperación solo para la priorización interna del navegador independientemente de la CDN o de la compatibilidad de origen, ya que las prioridades a menudo cambian cuando el navegador solicita recursos. Por ejemplo, a menudo se retienen los recursos de prioridad baja, como las imágenes, para que no se soliciten mientras el navegador procesa los elementos
<head>críticos.Es posible que no puedas incorporar la prioridad de recuperación como una práctica recomendada en tu diseño inicial. Más adelante en el ciclo de desarrollo, puedes asignar las prioridades a los diferentes recursos de la página y, si no coinciden con tus expectativas, puedes ingresar una prioridad de recuperación para una mayor optimización.
Los desarrolladores deben usar la precarga para su propósito previsto: precargar recursos que el analizador no haya detectado (fuentes, importaciones, imágenes de LCP en segundo plano). La posición de la sugerencia preload afectará cuando se precarga el recurso.
La prioridad de recuperación es cómo se debe recuperar el recurso cuando lo hace.
Sugerencias para usar las precargas
Ten en cuenta lo siguiente cuando uses precargas:
- La inclusión de una precarga en los encabezados HTTP la coloca antes que todo lo demás en el orden de carga.
- Por lo general, las precargas se cargan en el orden en que el analizador las recibe para cualquier cosa con prioridad
Mediumo superior. Ten cuidado si incluyes precargas al comienzo de tu archivo HTML. - Es probable que las precargas de fuentes funcionen mejor hacia el final del encabezado o el principio del cuerpo.
- Las precargas de importación (dinámicas
import()omodulepreload) deben ejecutarse después de la etiqueta de secuencia de comandos que necesita la importación. Por lo tanto, asegúrate de que la secuencia de comandos se cargue o analice primero para que se pueda evaluar mientras se cargan sus dependencias. - Las precargas de imágenes tienen una prioridad
LowoMediumde forma predeterminada. Ordénalas en relación con secuencias de comandos asíncronas y otras etiquetas de prioridad baja o 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 llamaba Priority Hints. 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 llamamos a esta API 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 su secuencia de carga preferida.