Has optimizado imágenes, activado caché y revisado el CSS crítico, pero tu LCP sigue por encima de lo recomendable. A veces el problema no es el peso del archivo, sino el orden en que el navegador decide qué descargar primero. Ahí entra fetchpriority: un atributo HTML que le dice al navegador qué recurso merece prioridad en la red.
En octubre de 2026, con conexiones móviles saturadas y webs de empresa cargadas de scripts de terceros, marcar bien la imagen o el vídeo hero puede recortar cientos de milisegundos sin tocar el diseño. Te explicamos qué hace fetchpriority, cuándo usarlo (y cuándo no) y cómo encaja con preload y lazy loading.
Qué es fetchpriority y por qué importa en una web corporativa
fetchpriority es un atributo que puedes añadir a etiquetas como <img>, <link> o <script>. Acepta tres valores: high, low y auto (por defecto). No sustituye a una buena arquitectura de recursos, pero orienta al navegador cuando varios elementos compiten por ancho de banda al mismo tiempo.
En una landing de servicios, la foto del equipo o el mockup del producto suele ser el elemento LCP. Si el navegador prioriza antes un banner de cookies, un widget de chat o imágenes del pie de página, el usuario percibe la web como lenta aunque el peso total sea razonable.
fetchpriority high en esa imagen hero envía una señal clara: «descarga esto antes que el resto de imágenes no críticas». Es compatible con los principales navegadores modernos y no requiere JavaScript adicional.
Relación con rendimiento y Core Web Vitals
Google sigue midiendo la experiencia real con LCP, INP y CLS. fetchpriority impacta sobre todo en LCP cuando el recurso más grande es una imagen o un vídeo con poster. No mejora el TTFB ni el JavaScript bloqueante, pero puede adelantar la pintura del elemento principal.
Combínalo con lo que ya deberías tener en marcha:
- Preload del recurso LCP cuando la URL es estable (ver preload, prefetch y preconnect).
- fetchpriority="high" en la misma imagen si está en el HTML inicial.
- width y height explícitos para evitar saltos de layout (CLS).
- formatos modernos (WebP/AVIF) y tamaños acordes al viewport.
Evita duplicar señales contradictorias: preload + lazy loading en la misma URL, o fetchpriority high en decenas de imágenes (el navegador ignora el exceso).
fetchpriority frente a lazy loading y preload
Son complementos, no alternativas:
- lazy loading (
loading="lazy"): retrasa imágenes fuera de pantalla. Úsalo en galerías, blog y pie de página. Nunca en la imagen LCP above the fold. - preload (
<link rel="preload" as="image">): reserva hueco en la cola de red antes de que el parser encuentre el<img>. Ideal si la hero viene de CSS o de un CMS que inyecta tarde la etiqueta. - fetchpriority: ajusta la prioridad relativa dentro de la cola. Muy útil cuando ya tienes muchas imágenes en el HTML y no quieres añadir otro preload.
Si tu hero está en el primer bloque del HTML, suele bastar fetchpriority="high" + loading="eager" (o sin atributo loading). Si la hero la genera un slider en JavaScript, revisa primero el orden de carga del script, no solo el atributo.
Casos prácticos en webs de empresa
Portada con foto de equipo o instalaciones. Una sola <img fetchpriority="high"> en el banner principal. El resto de imágenes del mismo viewport sin high.
Catálogo o blog con listados. Mantén lazy en miniaturas y fetchpriority="low" en avatares decorativos si compiten con la imagen de cabecera de la ficha de producto.
Vídeo hero con poster. El poster es a menudo el LCP; aplica high al poster y preload solo si el vídeo no autoplay en móvil.
Logos y iconos del menú. No uses high: son pequeños y no deberían ganar a la hero. Prioriza SVG o PNG optimizado.
Implementación paso a paso (sin romper el CMS)
- Identifica el LCP en Chrome DevTools → Rendimiento o en el informe de PageSpeed Insights.
- Confirma que el recurso es una imagen visible en la primera pantalla.
- Añade
fetchpriority="high"solo a esa etiqueta (o al<link rel="preload">asociado). - Quita
loading="lazy"de ese mismo elemento. - Despliega y compara LCP en campo (CrUX o Search Console) tras una o dos semanas.
Ejemplo mínimo:
<img src="/storage/ejemplo-hero.webp" alt="Equipo de consultoría en reunión" width="1200" height="675" fetchpriority="high" decoding="async">
Errores frecuentes con fetchpriority
- Marcar high todas las imágenes del slider. Solo una debe ser LCP; el resto compite sin beneficio.
- High en imágenes lazy. Contradicción: el navegador puede ignorar una de las señales y el resultado es impredecible.
- Olvidar el móvil. En responsive, la imagen LCP puede cambiar (arte distinto en
srcset). Revisa LCP por dispositivo. - Confiar solo en el atributo. Un JPEG de 2 MB con high sigue siendo lento; optimiza antes (WebP y AVIF).
- Ignorar terceros. Un chat o un tag manager puede disparar descargas paralelas; revisa scripts de terceros.
Qué mejoras esperar (referencias 2026)
Los resultados dependen del número de imágenes concurrentes y de la red. En auditorías de webs corporativas con hero pesada y muchas miniaturas en la misma respuesta HTML, es habitual ver 100–400 ms menos en LCP de laboratorio al pasar la hero a fetchpriority high y lazy en el resto. En campo, el impacto se nota sobre todo en 4G y en el primer visito sin caché.
No esperes milagros si el cuello de botella es el servidor (TTFB) o el JavaScript que bloquea el hilo principal (TBT).
Checklist antes del próximo despliegue
- Un solo recurso LCP con
fetchpriority="high"(o preload equivalente). - Sin
loading="lazy"en ese recurso. - Dimensiones width/height para evitar CLS.
- Lazy + priority low en imágenes below the fold cuando haya muchas en la misma página.
- Medición repetida en móvil y escritorio tras el cambio.
Conclusión
fetchpriority es un ajuste fino y de bajo riesgo: un atributo en el HTML que alinea la prioridad de red con lo que el usuario ve primero. En webs de empresa con hero visual fuerte, es una de las palancas más rápidas para mejorar LCP después de comprimir imágenes y ordenar CSS crítico.
Si quieres una revisión de tu portada y de qué recurso está actuando como LCP hoy, en aatsoft auditamos rendimiento y priorización de recursos sin sacrificar tu identidad visual.
