Ver contenido
Precarga de Imágenes: Cómo rel=preload y fetchpriority Aceleran tu LCP
Introducción
Precargar una imagen significa indicarle al navegador que la descargue con máxima prioridad, antes de que el escáner de precarga (preload scanner) normal la descubra en el HTML. El UXR SEO Analyzer verifica si la imagen LCP (Largest Contentful Paint) de una página usa <link rel="preload"> o el atributo fetchpriority="high", porque este es uno de los ajustes más efectivos y de menor esfuerzo para mejorar el LCP.
El Problema: Descubrimiento Tardío de la Imagen LCP
El navegador normalmente descubre las imágenes a medida que parsea el HTML. Si tu imagen LCP está definida mediante CSS (background-image) o se inyecta dinámicamente vía JavaScript, el navegador puede tardar en descubrirla, retrasando el momento en que empieza a descargarla y, por lo tanto, el momento del LCP.
Qué Hace rel=preload
<link rel="preload" as="image" href="/hero.jpg" fetchpriority="high">Esta etiqueta en el <head> le dice al navegador: "vas a necesitar este recurso pronto, empieza a descargarlo ahora mismo", sin esperar a que el parser HTML llegue a la etiqueta <img> correspondiente.
Qué Hace fetchpriority="high"
Aumentar la prioridad de la imagen LCP especificando fetchpriority="high" en el elemento de imagen puede hacer que el LCP ocurra antes. Este atributo es particularmente efectivo cuando se usa en la imagen LCP de una página, y elevar su prioridad con este atributo puede mejorar el LCP con relativamente poco esfuerzo.
<img src="/hero.jpg" fetchpriority="high" width="1200" height="600" alt="...">¿Preload o fetchpriority? Cuándo Usar Cada Uno
| Escenario | Solución |
|---|---|
| Imagen LCP declarada directamente en el HTML inicial | fetchpriority="high" en la etiqueta <img> |
Imagen LCP como fondo CSS (background-image) | <link rel="preload"> para descubrimiento temprano |
Imagen LCP responsiva con srcset | rel="preload" con imagesrcset/imagesizes |
Preload sigue siendo necesario para el descubrimiento temprano de imágenes LCP incluidas como fondos CSS, y para aumentar la prioridad de esas imágenes de fondo conviene incluir fetchpriority="high" también en el preload.
El Error Más Común: Combinarlo con Lazy Loading
Nunca combines loading="lazy" con la imagen que estás precargando o marcando como fetchpriority="high"—son estrategias opuestas. Lazy loading retrasa la carga; preload/fetchpriority la acelera. Aplicar ambas a la misma imagen confunde al navegador y generalmente el lazy loading gana, anulando el beneficio.
Impacto Esperado
Si el preload ya está declarado como uno de los primeros elementos en el <head>, un fetchpriority="high" adicional puede no mejorar mucho más el LCP; pero si el preload ocurre después de que otros recursos ya cargaron, un fetchpriority alto sí puede mejorar el LCP de forma notoria.
Cómo lo Detecta el UXR SEO Analyzer
El analizador identifica el elemento de imagen candidato a LCP en el viewport inicial y verifica si existe un <link rel="preload" as="image"> correspondiente en el <head>, o si la etiqueta <img> incluye fetchpriority="high". Si ninguna de las dos señales está presente, se reporta como una oportunidad de mejora de LCP de bajo esfuerzo—generalmente una de las correcciones más rápidas de aplicar en toda la auditoría.
Fetch Priority Como API Independiente
Además de imágenes, el atributo fetchpriority también aplica a scripts, hojas de estilo e iframes, permitiendo ajustar la prioridad relativa de cualquier recurso sin depender exclusivamente de preload. Para imágenes, sin embargo, la combinación de ambas técnicas (preload para descubrimiento temprano + fetchpriority para prioridad de red) suele dar el mejor resultado cuando el elemento LCP no es trivial de descubrir desde el HTML inicial.
Relación con el Preload Scanner
El navegador cuenta con un escáner de precarga (preload scanner) que analiza el HTML de forma especulativa mientras el parser principal sigue procesando el documento, descubriendo recursos como imágenes y scripts antes de que el árbol DOM esté completo. Este escáner ya adelanta bastante trabajo por sí solo—pero no puede descubrir recursos que solo existen dentro de JavaScript o de reglas CSS, que es exactamente el caso donde el preload manual se vuelve indispensable.
Artículos Relacionados
- Guía de Precarga de Imágenes - Implementación paso a paso
- Lazy Loading de Imagen LCP Explicado - El error opuesto que evitar
- SEO de Imágenes Explicado - Guía completa de optimización de imágenes
Referencias
- web.dev - Preload critical assets to improve loading speed
- web.dev - Optimize resource loading with the Fetch Priority API
- web.dev - Optimize Largest Contentful Paint
- Chrome Developers - LCP request discovery