Prioridad de imágenes y mejores prácticas de preload 2025

“Entrega la primera imagen visible por la ruta más corta”. Un buen SEO y UX empiezan aquí.

Primero el TL;DR

• Añade fetchpriority="high" solo a una imagen candidata a LCP

• Si es necesario, combínala con <link rel="preload" as="image"> (evita el exceso)

• Para imágenes responsivas, especifica imagesrcset/imagesizes correctamente y alinea con object-fit y aspect-ratio en CSS

• Para el resto, usa loading="lazy" + decoding="async" por defecto para proteger INP

• En CDN, diseña Vary: Accept y evita conflictos en la entrega AVIF/WebP

• Enlaces internos: Entrega enfocada en INP, Comparación de formatos, Optimización de sprites

Flujo de decisión (por caso)

1. ¿Aparece en el hero/primer viewport? → Sí: candidata a LCP
2. ¿Ocupa gran área en el viewport? → Sí: considera fetchpriority="high"
3. ¿Se requiere evitar bloqueo de renderizado? → Crítico: usa preload; si no, omite
4. ¿Arte/foto? → Prepara la codificación y imagesrcset, y haz que sizes refleje el layout real
5. ¿Preocupación por INP? → Prefiere lazy/baja prioridad; retrasa la inicialización de JS

Fragmento de implementación (patrón correcto)

<!-- Candidata a LCP: combina fetchpriority y preload (evita la sobre‑especificación) -->
<link
  rel="preload"
  as="image"
  href="/hero/landing.avif"
  imagesrcset="/hero/landing-800.avif 800w, /hero/landing-1200.avif 1200w, /hero/landing-1600.avif 1600w"
  imagesizes="(max-width: 768px) 92vw, 1200px"
  type="image/avif"
/>
<img
  src="/hero/landing-1200.avif"
  srcset="/hero/landing-800.avif 800w, /hero/landing-1200.avif 1200w, /hero/landing-1600.avif 1600w"
  sizes="(max-width: 768px) 92vw, 1200px"
  width="1200" height="630"
  fetchpriority="high"
  decoding="async"
  alt="Imagen principal"
  style="aspect-ratio: 1200/630; object-fit: cover"
/>

Errores comunes y soluciones

• Preload en todo → Contención de red con efecto negativo. Limita a la candidata a LCP
• Falta sizes → Se elige una imagen mayor de lo necesario y LCP empeora. Ajusta al ancho real
• Abuso de fetchpriority → Diluye prioridades y baja la eficiencia en paralelo. Uno por página (en principio)
• Solo CSS → La forma del layout se fija tarde. Reserva espacio con aspect-ratio primero

Entrega vs INP/LCP

• LCP: fetchpriority="high" + imagesrcset/imagesizes adecuados
• No‑LCP: loading="lazy"/decoding="async", y preload justo antes de la interacción cuando haga falta
• CDN: Vary: Accept + diseño de claves de caché; verifica prioridad en HTTP/2

Lista de verificación

• [ ] Limita la candidata LCP a una imagen; usa preload con mesura
• [ ] Haz que sizes refleje el ancho real; define suficientes escalones en srcset
• [ ] Asegura CLS cero con aspect-ratio; usa object-fit para recorte
• [ ] Mide y confirma que no haya regresiones de LCP/INP

FAQ

• P: ¿Qué “gana”, fetchpriority o preload?

• R: Tienen roles distintos. El primero sugiere prioridad; el segundo ordena la descarga temprana. Combínalos solo para la candidata LCP.

• P: ¿preload rompe srcset?

• R: Usa también imagesrcset/imagesizes en <link rel="preload">.

Resumen

Cuando puedes diseñar “qué imagen iniciar, cuándo y cuán pronto”, LCP y la velocidad percibida se estabilizan. Empieza por identificar la candidata LCP y aplicar el trío fetchpriority/preload/sizes.