Optimización de entrega de imágenes 2025 — Priority Hints / Preload / HTTP/2

TL;DR: Entrega el tamaño correcto en el momento correcto con la prioridad correcta. Combina fetchpriority, preload, formatos modernos (AVIF/WebP/PNG), srcset/sizes precisos, límites de lazy bien definidos, comprensión de HTTP/2/3 y una caché sólida para estabilizar el LCP.

Por qué importa ahora

El LCP suele depender de la imagen hero. Retrasos de 200–300 ms empeoran el rebote y la conversión. En 2025, usa Priority Hints y preload junto con la multiplexeración de HTTP/2/3, srcset/sizes exactos, dimensiones fijas y pistas de CDN para controlar la carga inicial.

Regla 1: Prioriza explícitamente la imagen LCP

• Añade fetchpriority="high" al <img> LCP.
• Usa decoding="async" y loading="eager" cuando el layout esté fijado.
• Especifica siempre width/height para evitar CLS.

<img
  src="/hero.avif"
  alt="..."
  width={1200}
  height={630}
  loading="eager"
  decoding="async"
  fetchPriority="high"
/>

Regla 2: Preload solo la que importa

• Usa <link rel="preload" as="image" imagesrcset="..." imagesizes="...">.
• Limítalo a la hero; su abuso perjudica con multiplexación.

<link
  rel="preload"
  as="image"
  href="/hero-1200.avif"
  imagesrcset="/hero-800.avif 800w, /hero-1200.avif 1200w, /hero-1600.avif 1600w"
  imagesizes="(min-width: 1024px) 1200px, 92vw"
  fetchpriority="high"
>

Regla 3: HTTP/2/3 y caché

• Ligero en la primera visita, rapidísimo en la siguiente: Cache-Control, ETag.
• Activos comunes con hash y caché larga.
• Con H2/H3, fetchpriority + srcset/sizes suelen superar al exceso de preload.

Regla 4: Tamaño correcto para el layout

• Escribe sizes conforme al ancho real en CSS.
• Usa <picture> para dirección de arte.

Relacionado: Diseño de imágenes responsivas 2025 — Guía práctica de srcset/sizes

Regla 5: Límites de lazy

• loading="lazy" fuera del primer viewport.
• Pre‑activar a una pantalla de distancia con IntersectionObserver.

Casos prácticos

• Hero en SPA: SSR de la hero + fetchpriority="high" para estabilizar LCP.
• Derivados automáticos del CDN: limita a 800/1200/1600 para reducir el impuesto inicial.
• Falta sizes: provoca sobre‑descarga; alinea con CSS.

Medición y verificación

• Laboratorio: Lighthouse / WebPageTest
• Campo: CrUX / GA4 p75 LCP
• DevTools: columna Priority, coincidencia de resolución, cabeceras de caché.

Checklist

• [ ] fetchpriority="high" en LCP
• [ ] Preload solo una
• [ ] width/height definidos
• [ ] srcset/sizes precisos
• [ ] Estrategia de caché sólida
• [ ] Limitar derivados de CDN
• [ ] Monitorizar p75 LCP/CLS mensual

FAQ

• P: ¿Preload o Priority Hints?

  • R: Propósitos distintos: preload adelanta la descarga; Priority Hints fija prioridad relativa. Combina para la hero.

• P: ¿loading="eager" es obligatorio?

  • R: Recomendado si el layout está fijado. Si no, riesgo de CLS.

• P: ¿HTTP/3 lo arregla todo?

  • R: Ayuda en redes con pérdida, pero lo básico (prioridad/tamaño/caché) manda.

• P: sizes es difícil.

  • R: Refleja anchos CSS reales; evita %/vw vagos que sobredimensionan.