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 temprana con <link> en <head> podría ser Very High. Por lo general, la asignación automática de prioridad funciona bien, pero hay casos de uso en los que el orden asignado no es óptimo.
En esta página, se analizan la API de Fetch Priority y el atributo HTML fetchpriority, que te ayudan a optimizar las Métricas web esenciales, ya que te permiten indicar la prioridad relativa de un recurso (high o low).
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. - 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 de cuerpo tardío para secuenciar mejor las imágenes
Históricamente, los desarrolladores han tenido una influencia limitada en 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 de manera anticipada antes de que el navegador los encuentre de forma natural. Esto es especialmente útil para los 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 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 realizadas para los datos. La prioridad de recuperación
también puede complementar la precarga. Toma una imagen de Largest Contentful Paint, que, cuando esté precargada, seguirá teniendo una prioridad baja. Si otros recursos de prioridad baja la rechazan, el uso de la prioridad de recuperación puede ayudar a determinar qué tan pronto 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.
- La sugerencia de recurso
preload, que ayuda al navegador a descubrir un recurso más rápido y cargarlo antes. - Cambios en el cálculo de prioridad para las secuencias de comandos
asyncodefer.
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 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. (Para asegurarte de incluir la columna de prioridad, haz clic con el botón derecho en los encabezados de la tabla).
type = "font" 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 la configuración de Filas de solicitud 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 ajustar el orden de descarga de la página para optimizar su rendimiento y las Métricas web esenciales. Estos son algunos ejemplos de los elementos que puedes cambiar sin usar la prioridad de recuperación:
- Coloca las etiquetas de recursos como
<script>y<link>en el orden en que deseas que el navegador las descargue. - Usa la sugerencia del recurso
preloadpara descargar los recursos necesarios con anticipación, en especial los recursos que son más difíciles de descubrir para el navegador. - Usa
asyncodeferpara descargar secuencias de comandos sin bloquear otros recursos. - El contenido de la mitad inferior de la página se carga de forma diferida para que el navegador pueda usar el ancho de banda disponible para los recursos más importantes de la mitad superior de la página.
Estos son algunos casos más complejos en los que la prioridad de recuperación puede ayudarte a obtener el orden de prioridad de los recursos que necesitas:
- 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.
- Las imágenes hero dentro del viewport suelen comenzar con una prioridad
LowoMedium. Una vez que se completa 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 las imágenes. Proporcionar la prioridad de recuperación en el lenguaje de marcado permite que la imagen comience con una prioridad "Alta" y comience a cargarse mucho antes.
Aún se requiere la carga previa para el descubrimiento anticipado de imágenes LCP que se incluyen como fondos 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 la descarga asíncrona, en especial 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 las 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
High" priority, pero es posible que algunos de esos recursos sean más importantes que otros. Puedes usar la prioridad de recuperación para reducir la prioridad de los recursos que no son críticos.
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 es de prioridad alta y quieres que el navegador lo priorice, siempre y cuando su propia heurística no impida que eso suceda.low: El recurso es de prioridad baja y quieres que el navegador lo priorice 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" (partners) en cada fila marca la prioridad predeterminada para ese tipo de recurso.
| 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 a menudo da 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 manera 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 críticas.
<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 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 de la mitad superior de la página que no sean importantes de inmediato, 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 esto 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" 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 que tu página necesita ser interactiva deben cargarse rápidamente, pero no deben bloquear otros recursos. 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>
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 podrían 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
Aquí hay algunos puntos que debes tener en cuenta cuando uses 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 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 igual recupera el recurso con la prioridad predeterminada. Por otro lado, la prioridad de recuperación no ayuda con 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 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 el
<head>para una imagen LCP, es posible que una prioridad de recuperación dehighno mejore el LCP significativamente. Sin embargo, si la precarga se produce después de que se cargan otros recursos, una prioridad de recuperaciónhighpuede mejorar aún más el LCP. Si una imagen fundamental 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 conexiones HTTP/1.x en las que no se pueden realizar descargas paralelas o en conexiones HTTP/2 de 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. 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 de forma interna dentro del navegador y 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 compatibilidad con la CDN o el 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 diferentes recursos en la página y, si no coinciden con tus expectativas, puedes ingresar la prioridad de recuperación para una mayor optimización.
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 llega para cualquier valor superior a la prioridad "Media". Ten cuidado si incluyes precargas al comienzo de tu código 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 (
import()omodulepreloaddinámicas) deben ejecutarse después de la etiqueta de secuencia de comandos que necesita la importación. Por lo tanto, asegúrate de que primero se cargue o analice la secuencia de comandos para que se pueda evaluar mientras se cargan sus dependencias. - Las precargas de imágenes tienen una prioridad "Baja" o "Media" de forma predeterminada. Ordénalas en relación con las secuencias de comandos asíncronas y otras etiquetas de prioridad baja o baja.
Historial
La prioridad de recuperación se experimentó 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 llamaba Priority Hints. Desde entonces, la interfaz cambió a fetchpriority para HTML y priority para la API de recuperación de JavaScript como parte del proceso de estándares web. Para reducir la confusión, ahora llamamos
prioridad de recuperación de esta API.