jquery.app
Espanol
EnglishDeutschFrancaisEspanol日本語Nederlands

Herramientas HTML

Gratis Generador de atributo fetchpriority

Genera atributos fetchpriority para imágenes, scripts y etiquetas link.

Cargando herramienta...

Qué es Generador de atributo fetchpriority?

Fetchpriority es un atributo HTML que sugiere al navegador que recursos cargar primero. Ayuda a mejorar el Largest Contentful Paint cuando se aplica a imagenes hero y puede despriorizar recursos no criticos. Es diferente de preload y loading='lazy'. Se usa para indicar la importancia relativa de imagenes, scripts y hojas de estilo al navegador.

Respuesta rápida

Use fetchpriority='high' solo para la imagen o recurso con mas probabilidad de convertirse en el elemento Largest Contentful Paint. No marque muchos recursos como prioridad alta: el navegador aun decide el orden de carga.

Last updated: 2026-05-25

Limitaciones

  • Fetchpriority es una sugerencia, no una directiva. El navegador puede ignorarla segun sus heuristicas.
  • Los navegadores antiguos, incluidos Safari 15.4 y anteriores, no admiten fetchpriority.
  • El uso excesivo de fetchpriority='high' en muchos recursos diluye la sugerencia y puede no mejorar el rendimiento de carga.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Cómo usar esta herramienta

  1. Seleccione el tipo de recurso: imagen, script o etiqueta link.
  2. Elija el caso de uso: imagen LCP hero, contenido debajo del pliegue o script no critico.
  3. La herramienta recomienda el valor de fetchpriority segun su seleccion.
  4. Copie la etiqueta generada y pruebe con Lighthouse para confirmar la mejora del LCP.

Para qué puedes usarla

  • Aplicar fetchpriority='high' a la imagen hero LCP para una carga mas rapida.
  • Despriorizar imagenes debajo del pliegue con fetchpriority='low'.
  • Priorizar scripts y hojas de estilo criticos que bloquean la renderizacion.

Casos de uso

Ejemplos prácticos

Ejemplo

Optimizacion de imagen hero LCP

Una imagen hero que es el elemento LCP recibe fetchpriority='high' junto con un srcset optimizado. El navegador carga esta imagen antes que otros recursos.

Ejemplo

Imagenes de pie de pagina con baja prioridad

Las imagenes del pie de pagina y los embeds de terceros reciben fetchpriority='low' para reducir la contienda con recursos criticos sobre el pliegue.

Errores comunes

  • Aplicar fetchpriority='high' a muchos recursos, lo que anula el beneficio.
  • Usar fetchpriority en recursos precargados donde ya se aplica a la etiqueta preload.
  • Olvidar combinar fetchpriority con los atributos de loading y decoding adecuados.

Verificación

  1. Abra el panel Network de Chrome DevTools e inspeccione la columna Priority para confirmar que la sugerencia fetchpriority se refleje en el orden de carga del navegador.
  2. Compare el tiempo de LCP con y sin el atributo usando el panel Performance para verificar la mejora real.

Comparación

fetchpriority vs loading="lazy"

Aspectfetchpriorityloading="lazy"
What it controlsRelative loading priority of a resource compared to other resources on the same pageWhether the browser delays loading the resource until it is near the viewport
When to useOn the LCP element to load it sooner, or on non-critical resources to deprioritize themOn images and iframes below the fold to defer their load until the user scrolls near them
Effect on LCPCan improve LCP when set to high on the hero imageCan worsen LCP if applied above the fold. Only use below the fold.
Valid on which elementsimg, link, script, iframeimg, iframe
Browser supportChrome 101+, Edge 101+, Safari 16+, Firefox 122+Chrome 77+, Edge 79+, Safari 15.4+, Firefox 75+

fetchpriority hints at relative priority for loading while loading="lazy" defers loading until the element is near the viewport. They address different performance concerns and can be used together on the same element.

FAQ

Preguntas sobre Generador de atributo fetchpriority

Cuantos recursos deberian tener fetchpriority='high'?

Uno o dos recursos criticos como maximo. Si todo es prioridad alta, nada lo es.

Fetchpriority garantiza una carga mas rapida?

No, es una sugerencia. El navegador decide el orden final de carga segun multiples factores.

Que recursos se benefician mas de fetchpriority='high'?

La imagen LCP (generalmente la imagen hero mas grande visible al cargar la pagina), el archivo CSS principal que estiliza el contenido sobre el pliegue y las fuentes web criticas usadas en el texto visible inicial. Solo uno o dos recursos deberian tener prioridad alta.

Cuando deberia usar fetchpriority='low'?

Use prioridad baja para imagenes muy por debajo del pliegue, scripts de analitica, widgets de chat de terceros, embeds de redes sociales y otros recursos que no contribuyen a la renderizacion inicial de la pagina.

Herramientas relacionadas

Más herramientas html

Prueba también

Prueba también