fetchpriority="high": una línea que acelera tu web

Revisando Lighthouse en un proyecto de cliente, la imagen hero tardaba en cargar a pesar de estar visible desde el primer render. El navegador la estaba tratando igual que los íconos del footer. No había lazy loading mal configurado — ni una imagen pesada. Simplemente el navegador asigna prioridades usando heurísticas. Y esas heurísticas pueden fallar cuando la imagen crítica aparece en el HTML después de otros recursos. El atributo fetchpriority="high" existe exactamente para esto: le decís explícitamente al navegador que ese recurso es el más importante de la página. Sin JavaScript. Sin preload links. Sin configuración extra. Una sola línea de HTML. El impacto en LCP varía entre 50ms y 200ms según el dispositivo, pero en conexiones lentas de América Latina puede ser la diferencia entre verde y rojo en una auditoría de Core Web Vitals.

El snippet#

HTML puro

<!-- Antes: el navegador adivina -->
<img src="/hero.avif" alt="Vista de Itapúa desde el río" width="1200" height="630" />

<!-- Después: vos decidís -->
<img src="/hero.avif" alt="Vista de Itapúa desde el río" width="1200" height="630" fetchpriority="high" />

En Astro, el componente <Image /> acepta el atributo directamente:

src/pages/index.astro

---
import { Image } from "astro:assets";
import heroImg from "../assets/hero.avif";
---

<Image
  src={heroImg}
  alt="Vista de Itapúa desde el río"
  width={1200}
  height={630}
  fetchpriority="high"
/>

Cuándo usarlo y cuándo no#

fetchpriority="high" es para la imagen hero del above-the-fold y nada más. No lo pongas en íconos, imágenes de carruseles, avatares ni contenido below-the-fold. Inflar la prioridad de todo equivale a no tener prioridades.

Si querés más control granular (por ejemplo, para fuentes o scripts), <link rel="preload"> es la alternativa. Pero tiene un costo: tenés que mantener sincronizados el preload en el <head> con el src real del <img>. En SSG con Astro, fetchpriority directo en el componente es menos frágil porque vive junto a la propia imagen.

fetchpriority vs preload: ¿cuándo usar cuál?

fetchpriority="high"

Una línea en el elemento. Sin riesgo de desync entre atributo y src.
Vive junto a la imagen: si cambia la ruta, el hint cambia con ella.
Cero configuración extra en el head.

link rel=preload

Control total de crossorigin, as, type y media queries.
Funciona para cualquier tipo de recurso: fuentes, scripts, CSS.
Más granular si necesitás cargar un recurso antes de que el parser lo encuentre.

Para validar que el hint funciona, abrí DevTools → Network → filtrá por Img → columna Priority. La imagen hero va a aparecer como Highest. Si no cambió, verificá que no haya otros recursos marcados como fetchpriority="high" compitiendo en la misma página.

Si ya tenés un pipeline de CI con Lighthouse, esto se mide solo. El TIL de cómo configurar Lighthouse CI explica cómo capturar la métrica LCP automáticamente. Y si querés contexto más amplio sobre performance en Paraguay, el post sobre cómo reducir el consumo de CPU en producción tiene los benchmarks reales.

A veces mejorar performance no significa optimizar más bytes, sino ayudar al navegador a tomar mejores decisiones.

…g CO₂