La propiedad fetchPriority de la interfaz HTMLImageElement representa una sugerencia que se da al explorador sobre cómo debe priorizar la precarga del recurso (imágenes, etc) dado en relación con otros recursos del mismo tipo.
Para usar sugerencias de prioridad con etiquetas, simplemente agregue el atributo al elemento dentro de la etiqueta picture, como se muestra a continuación:
<picture> <source srcset="/image-small.png" media="(max-width: 600px)"> <img src="/image.png" fetchpriority="high"> </picture>| Concepto | Descripción |
|---|---|
| valor | Cadena que representa la sugerencia de prioridad. Los valores posibles son: |
| high | Indica que considera que el recurso es crítico y desea que el navegador lo priorice, indicándole: Recupere la imagen con una prioridad alta en relación con otras imágenes. |
| low | Indica que considera que el recurso es menos importante y desea que el navegador le quite prioridad. Recupere la imagen con una prioridad baja en relación con otras imágenes. |
| auto | Modo predeterminado, que indica que no hay preferencia por la prioridad de captura. Deja que el navegador decida la prioridad adecuada. |
La propiedad le permite señalar imágenes de alta o baja prioridad. Esto puede ser útil cuando se aplica a elementos <img> para señalar imágenes que son "importantes" para la experiencia del usuario al principio de la proceso de carga. fetchPriority
Las sugerencias de prioridad le permiten ajustar la prioridad de carga de imágenes, CSS, fuentes, scripts e iframes. Puedes hacer mucho más que solo mejorar las imágenes:
- Reducir la prioridad de los scripts precargados
- Aumentar o disminuir la prioridad de los scripts de cuerpo tardío
- Proporcionar diferenciación de prioridad en las llamadas de recuperación (actividad en segundo plano frente a llamadas API interactivas con el usuario)
- y mucho más.
Los efectos de la sugerencia en la carga de recursos son específicos del navegador, así que asegúrese de Pruebe en varios motores de navegador.
Puede utilizar el atributo con:
- img
- Etiquetas iframe
- etiquetas link
- script
Como alternativa, puede usar la API de obtención de JavaScript: JavaScript Fetch API:
Fetchpriority no es una directiva obligatoria y no puede obligar al explorador a obtener un recurso o evitar que lo haga. Depende del navegador si va a buscar el recurso o no.
Algunas cosas a tener en cuenta al usar el atributo fetchpriority:
- Las sugerencias de prioridad se pueden implementar a través del atributo fetchpriority.
- fetchpriority no garantiza que se cargue un recurso de mayor prioridad 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 explorador a obtener un recurso o evitar que lo haga. Depende del navegador si va a buscar el recurso o no.
Si deseas aumentar la prioridad de recuperación de una imagen importante, se debe usar fetchpriority="high".
Ten en cuenta que una imagen con loading="lazy" y fetchpriority="high" se retrasará mientras esté fuera de la pantalla y, luego, se recuperará con una prioridad alta cuando esté casi dentro del viewport. En este caso, es probable que se recupere con una prioridad alta, por lo que esta combinación no debe ser necesaria ni usarse.
Utilícelo con moderación para casos excepcionales en los que el navegador no pueda inferir la mejor manera de cargar la imagen automáticamente. El uso excesivo puede dar lugar a rendimiento degradante.
Ejemplo
Créditos bibliográficos:
https://developer.mozilla.org/ https://nitropack.io/ https://addyosmani.com/
Complementarios:
https://vaihe.com/q