La API de Fetch Priority indica la prioridad relativa de los recursos en el navegador. Puede permitir 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, les asigna un priority
de recuperación para que pueda descargarlos en un orden óptimo. Por lo general, la prioridad de un recurso depende de qué es y en qué parte del documento se encuentra. Por ejemplo, las imágenes en la vista del puerto pueden tener una prioridad High
, y la prioridad para el CSS de carga anticipada que bloquea el procesamiento mediante <link>
en <head>
podría ser Very High
. Los navegadores son bastante buenos para asignar prioridades que funcionan bien, pero es posible que no sean óptimas en todos los casos.
En esta página, se analizan la API de Fetch Priority y el atributo HTML fetchpriority
, que te permite sugerir 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 actualización puede ser útil:
- Aumentar la prioridad de la imagen de LCP especificando
fetchpriority="high"
en el elemento de imagen, lo que hace que la LCP se produzca antes - Se aumentó la prioridad de las secuencias de comandos
async
y se usó una semántica mejor que la del hackeo más común actual (se inserta una<link rel="preload">
para la secuencia de comandosasync
). - Se disminuyó la prioridad de las secuencias de comandos del cuerpo tardío para permitir una mejor secuenciación con imágenes.
Históricamente, los desarrolladores tuvieron una influencia limitada sobre la prioridad de los recursos con la carga previa y el preconnect. La precarga te permite informar al navegador sobre los recursos críticos que desees cargar de manera anticipada, antes de que el navegador los descubra. Esto resulta particularmente útil para los recursos 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 a servidores de origen cruzado y a mejorar métricas como Tiempo hasta el primer byte. Es útil cuando conoces un 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 hechas para los datos. La prioridad de recuperación también puede complementar la precarga. Toma una imagen de procesamiento de imagen con contenido más grande que, cuando se precargue, seguirá teniendo una prioridad baja. Si otros recursos de prioridad baja la retrasan, usar la prioridad de recuperación puede ayudar a determinar la rapidez con la que se carga la imagen.
Prioridad de los recursos
La secuencia de descarga de recursos depende de la prioridad asignada del navegador para cada recurso de la página. Entre los factores que pueden afectar la lógica de procesamiento 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.
- Indica si los atributos
async
odefer
se 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 la fase de bloqueo del diseño | Carga de a una en la fase de bloqueo de diseño | ||||
---|---|---|---|---|---|
Prioridad de Blink |
VeryHigh | Alta | Versión intermedia | Bajo | VeryLow |
Prioridad de las Herramientas para desarrolladores |
Más alta | Alta | Versión intermedia | Bajo | Más bajo |
Recurso principal | |||||
CSS (temprano**) | CSS (a fines de**) | CSS (incongruencia de medios***) | |||
Secuencia de comandos (temprana** o no desde el escáner de carga previa) | Secuencia de comandos (tarde**) | Secuencia de comandos (asíncrona) | |||
Fuente | Fuente (rel=preload) | ||||
Importar | |||||
Imagen (en viewport) | Imagen (primeras 5 imágenes > 10,000 px2) | Imagen | |||
Contenido multimedia (video y audio) | |||||
Recuperación previa | |||||
XSL | |||||
XHR (síncrono) | XHR/recuperación* (asíncrona) |
El navegador descarga los 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 priority haciendo clic con el botón derecho en los encabezados de la tabla y marcándola).
Cuando cambian las prioridades, puedes ver la prioridad inicial y la final en el parámetro de configuración Big request rows o en una herramienta de ayuda.
¿Cuándo podrías necesitar la prioridad de actualización?
Ahora que comprendes la lógica de priorización del navegador, puedes ajustar el orden de descarga de tu 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 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 de recursos
preload
para descargar los recursos necesarios con anticipación, en especial para los recursos que el navegador no descubre fácilmente con anticipación. - Usa
async
odefer
para descargar secuencias de comandos sin bloquear otros recursos. - Carga diferida del contenido de la mitad inferior de la página para que el navegador pueda usar el ancho de banda disponible para los recursos más críticos de la mitad superior de la página.
Estas técnicas ayudan a controlar el cálculo de 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 forma ó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 en la mitad superior de la página, pero no todas deben 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, que suelen estar fuera de la pantalla al principio, se pueden configurar para que tengan una prioridad más baja.
- Por lo general, las imágenes dentro de la ventana de visualización comienzan con una prioridad de
Low
. Una vez que se completa el diseño, Chrome detecta que están en el viewport y mejora su prioridad. Esto suele agregar una demora significativa a la carga de las imágenes críticas, como las imágenes hero. Proporcionar la prioridad de recuperación en el marcado permite que la imagen comience con una prioridadHigh
y 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 unfetchpriority="high"
explícito será aún mejor.
Todavía se requiere la precarga para el descubrimiento anticipado de las imágenes LCP incluidas como fondos de CSS. Para aumentar la prioridad de las imágenes de fondo, incluyefetchpriority='high'
en la precarga. - La declaración de secuencias de comandos como
async
odefer
le indica al navegador que las cargue de forma asíncrona. Sin embargo, como se muestra en la tabla de prioridad, 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 la descarga asíncrona, en especial para las secuencias de comandos que son fundamentales para la experiencia del usuario. - Si usas la API
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 una prioridad más baja, especialmente si combinas llamadas a la API en segundo plano con llamadas a la API que responden a la entrada del usuario. Marca las llamadas a la API en segundo plano como prioridadLow
y las llamadas a la API interactivas como prioridadHigh
. - El navegador asigna a las fuentes y a las CSS una prioridad de
High
, pero algunos de esos recursos pueden ser más importantes que otros. Puedes usar la prioridad de recuperación para disminuir la prioridad de los recursos que no son críticos (ten en cuenta que el CSS en las primeras etapas bloquea la renderización, por lo que suele ser una prioridad deHigh
).
El atributo fetchpriority
Usa el atributo HTML fetchpriority
para especificar la prioridad de descarga para los tipos de recursos, como CSS, fuentes, imágenes y secuencias de comandos, cuando se descargan con las etiquetas link
, img
o script
. Puede tener los siguientes valores:
high
: El recurso tiene una prioridad más alta, y querrás que el navegador lo priorice más de lo habitual, siempre que la heurística propia del navegador no impida que eso ocurra.low
: El recurso tiene una prioridad más baja y deseas que el navegador lo despriorice, de nuevo, si sus heurísticas lo permiten.auto
: Es el valor predeterminado, que permite que el navegador elija 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"
(WIDGET) en cada fila marca la prioridad predeterminada para ese tipo de recurso. (también disponible como Documento de Google).
Carga en la fase de bloqueo del diseño | Carga uno a la vez en la fase de bloqueo del diseño | ||||
---|---|---|---|---|---|
Prioridad de Blink |
VeryHigh | Alta | Versión intermedia | Bajo | VeryLow |
Prioridad de las Herramientas para desarrolladores |
Más alta | Alta | Versión intermedia | Bajo | Más bajo |
Recurso principal | ◉ | ||||
CSS (a principios**) | ⬆◉ | ⬇ | |||
CSS (a fines de**) | ⬆ | ◉ | ⬇ | ||
CSS (incongruencia de medios***) | ⬆*** | ◉⬇ | |||
Secuencia de comandos (temprana** o no del escáner de carga previa) | ⬆◉ | ⬇ | |||
Guion (tardío**) | ⬆ | ◉ | ⬇ | ||
Secuencia de comandos (asincrónica/diferida) | ⬆ | ◉⬇ | |||
Fuente | ◉ | ||||
Fuente (rel=preload) | ⬆◉ | ⬇ | |||
Importar | ◉ | ||||
Imagen (en viewport, después del diseño) | ⬆◉ | ⬇ | |||
Imagen (primeras 5 imágenes > 10,000 px2) | ⬆ | ◉ | ⬇ | ||
Imagen | ⬆ | ◉⬇ | |||
Contenido multimedia (video/audio) | ◉ | ||||
XHR (sincronización): Obsoleto | ◉ | ||||
XHR/recuperación* (asíncrono) | ⬆◉ | ⬇ | |||
Recuperación previa | ◉ | ||||
XSL | ◉ |
fetchpriority
establece la prioridad relativa, lo que significa que aumenta o disminuye la prioridad predeterminada en una cantidad adecuada, en lugar de establecer la prioridad explícitamente en High
o Low
. Esto suele generar una prioridad High
o Low
, pero no siempre. Por ejemplo, el CSS crítico con fetchpriority="high"
conserva la prioridad "Muy alta" o "Más alta", y el uso de fetchpriority="low"
en estos elementos conserva la prioridad "Alta". Ninguno de estos casos implica establecer explícitamente la prioridad en High
o Low
.
Casos de uso
Usa el atributo fetchpriority
cuando quieras darle al navegador una sugerencia adicional sobre con qué prioridad 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 críticas.
<img src="lcp-image.jpg" fetchpriority="high">
En la siguiente comparación, se muestra la página de Vuelos de Google con una imagen de fondo de LCP cargada con y sin prioridad de recuperación. 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 en la mitad superior de la página que no son importantes de inmediato, por ejemplo, las 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 del 2 al 4 estarán fuera del viewport, se pueden considerar "suficientemente cercanas" para aumentarlas a high
y también cargarlas, 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 esto para disminuir la prioridad de las imágenes que no aparecen durante la carga. Redujo el tiempo de carga de la página en 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 secuencias de comandos
Las secuencias de comandos que tu página debe ser interactiva deben cargarse rápidamente, pero no deberían bloquear otros recursos más importantes que bloqueen el procesamiento. 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 depende de estados de DOM específicos. Sin embargo, si se ejecutan más adelante en la página, puedes cargarlos con una prioridad más baja:
<script src="blocking_but_unimportant.js" fetchpriority="low"></script>
De esta manera, se bloqueará el analizador cuando llegue a esta secuencia de comandos, pero se 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 no críticos
El navegador ejecuta fetch
con una prioridad alta. Si tienes varias recuperaciones que pueden activarse de forma simultánea, puedes usar la prioridad predeterminada alta para las recuperaciones de datos más importantes y reducir la prioridad de los 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'});
Notas sobre la implementación de la prioridad de recuperación
Con la prioridad de recuperación, se puede mejorar el rendimiento en casos de uso específicos, pero hay algunos aspectos que se deben tener en cuenta cuando se utiliza la prioridad de recuperación:
- El atributo
fetchpriority
es 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 resolver conflictos. No confundas la prioridad de recuperación con la precarga:
- La precarga es una recuperación obligatoria, no una sugerencia.
- La carga previa permite que el navegador descubra un recurso con anticipación, pero aun así 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 carga previa que los efectos de un cambio de prioridad.
La prioridad de recuperación puede complementar las precargas, ya que aumenta el nivel de detalle de la priorización. Si ya especificaste una carga previa como uno de los primeros elementos en
<head>
para una imagen de LCP, es posible que una prioridad de recuperaciónhigh
no mejore significativamente el LCP. Sin embargo, si la precarga ocurre después de que se cargan otros recursos, una prioridad de recuperación dehigh
puede mejorar más el LCP. Si una imagen crítica es una imagen de fondo de 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 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 las descargas en paralelo o en las conexiones HTTP/2 o HTTP/3 de ancho de banda bajo. En estos casos, la priorización puede ayudar a resolver los cuellos de botella.
Las CDN no implementan la priorización de HTTP/2 de forma uniforme, y lo mismo sucede con HTTP/3. Incluso si el navegador comunica la prioridad de la prioridad de recuperación, es posible que la CDN no cambie la prioridad de los recursos en el orden especificado. Esto dificulta la prueba de la prioridad de recuperación. Las prioridades se aplican de forma interna en el navegador y con protocolos que admiten la priorización (HTTP/2 y HTTP/3). Aún vale la pena usar la prioridad de recuperación solo para la priorización interna del navegador, independientemente de la compatibilidad con CDN o el origen, ya que las prioridades suelen cambiar cuando el navegador solicita recursos. Por ejemplo, a menudo no se solicitan recursos de baja prioridad, como las imágenes, mientras el navegador procesa los elementos
<head>
críticos.Es posible que no puedas implementar la prioridad de actualización como práctica recomendada en tu diseño inicial. Más adelante en tu ciclo de desarrollo, puedes ver las prioridades que se asignan a los diferentes recursos de la página y, si no cumplen con tus expectativas, puedes implementar la prioridad de recuperación para realizar una mayor optimización.
Los desarrolladores deben usar la precarga para el propósito previsto: precargar recursos que el analizador no detecta (fuentes, importaciones, imágenes LCP en segundo plano). La ubicación de la sugerencia preload
afectará el momento en que se precargará el recurso.
La prioridad de recuperación se basa en cómo se debe recuperar el recurso cuando se recupera.
Sugerencias para usar las precargas
Ten en cuenta lo siguiente cuando uses las precargas:
- Incluir una precarga en los encabezados HTTP la coloca antes que todo lo demás en el orden de carga.
- Por lo general, las cargas previas se cargan en el orden en que el analizador las recibe para cualquier elemento con prioridad
Medium
o superior. Ten cuidado si incluyes cargas previas al comienzo de tu código HTML. - Es probable que las precargas de fuentes funcionen mejor hacia el final del encabezado o el comienzo del cuerpo.
- Las cargas previas de importación (
import()
omodulepreload
dinámicos) deben ejecutarse después de la etiqueta de secuencia de comandos que necesita la importación, por lo que debes asegurarte de que la secuencia de comandos se cargue o analice primero para que se pueda evaluar mientras se cargan sus dependencias. - La carga previa de imágenes tiene una prioridad
Low
oMedium
de forma predeterminada. Ordénalas en relación con las secuencias de comandos asíncronas y otras etiquetas de prioridad baja o más baja.
Historial
La prioridad de recuperación se probó por primera vez en Chrome como una prueba de origen en 2018 y, luego, nuevamente en 2021 con el atributo importance
. En ese momento, se llamaban 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 llamamos a esta API Priority Fetch.
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 tiene perillas adicionales disponibles para lograr su secuencia de carga preferida.