El eager loading o carga inmediata es la técnica opuesta al lazy load: consiste en cargar todos los recursos de una página desde el primer momento, sin esperar a que el usuario los necesite. Saber cuándo aplicarlo y cuándo evitarlo es una decisión técnica con impacto directo en los Core Web Vitals y en el posicionamiento orgánico de tu web.
Acceso rápido
¿Qué es el eager loading o carga inmediata?
El eager loading también conocido como carga inmediata o carga anticipada es el comportamiento por defecto de los navegadores: cuando un usuario accede a una página web, el navegador descarga todos los recursos disponibles de forma simultánea desde el primer instante, independientemente de si el usuario va a verlos o no.
Imágenes, vídeos, scripts, fuentes tipográficas, hojas de estilo… todo se solicita al servidor en cuanto el navegador procesa el HTML de la página. Este enfoque tiene ventajas claras en determinados contextos, pero también puede convertirse en un lastre para el rendimiento si se aplica sin criterio.
El término eager (que en inglés significa ansioso o impaciente) describe bien la filosofía de este patrón: el navegador quiere tenerlo todo listo cuanto antes, sin esperar a saber si realmente lo va a necesitar.
💡 El eager loading no es una técnica que se activa deliberadamente: es el comportamiento que tiene la web por defecto si no se implementa ninguna estrategia de carga diferida. El lazy loading, en cambio, requiere una decisión explícita de implementación.
Eager loading frente a lazy loading: diferencias clave
Para entender bien el eager loading, lo más útil es compararlo directamente con su opuesto, el lazy load o carga diferida, que retrasa la descarga de recursos hasta que el usuario los necesita realmente.
| Característica | Eager loading | Lazy loading |
|---|---|---|
| Momento de carga | Al abrir la página, todo de golpe | Cuando el usuario se aproxima al elemento |
| Tiempo de carga inicial | Mayor | Menor |
| Consumo de ancho de banda | Alto desde el inicio | Progresivo y eficiente |
| Ideal para | Recursos críticos y visibles al inicio | Recursos fuera del viewport inicial |
| Impacto en LCP | Positivo si se aplica al elemento correcto | Negativo si se aplica al elemento LCP |
| Implementación | Comportamiento por defecto del navegador | Requiere implementación explícita |
| Atributo HTML | loading="eager" (o sin atributo) | loading="lazy" |
La elección entre uno y otro no es una decisión binaria. En la práctica, la estrategia más efectiva para el rendimiento web es aplicar ambos de forma complementaria: eager loading para los recursos críticos del inicio de la página y lazy loading para todo lo que queda por debajo del pliegue.
¿Cuándo tiene sentido usar eager loading?
El eager loading no es una mala práctica en sí mismo. El problema surge cuando se aplica de forma indiscriminada a todos los recursos, incluyendo los que el usuario probablemente nunca verá. Usado con criterio, es la opción correcta en estos casos:
- La imagen principal de la cabecera o el hero: La imagen más grande y visible al abrir la página, conocida como el elemento candidato al LCP (Largest Contentful Paint), debe cargarse siempre de forma inmediata. Aplicar lazy loading a esta imagen es uno de los errores técnicos más comunes que encontramos en nuestras auditorías y uno de los que más penaliza el rendimiento en PageSpeed Insights.
- Recursos críticos para el renderizado inicial: Las hojas de estilo CSS principales, las fuentes tipográficas utilizadas en la parte superior de la página y los scripts esenciales para el funcionamiento básico del sitio deben cargarse con eager loading. Retrasar estos recursos provoca que la página se muestre sin estilos o con parpadeos visuales que perjudican tanto la experiencia del usuario como las métricas de rendimiento.
- Páginas con poco contenido o scroll mínimo: En páginas de aterrizaje, páginas de contacto o cualquier página cuyo contenido cabe enteramente en el viewport inicial sin necesidad de hacer scroll, el lazy loading no aporta ningún beneficio real. En estos casos, el eager loading es perfectamente válido y evita la complejidad añadida de implementar una carga diferida innecesaria.
- Imágenes en el primer bloque visible de una galería: Si tu web incluye una galería de imágenes y las primeras fotos son visibles sin hacer scroll, esas imágenes deben cargarse con eager loading. Solo las que quedan por debajo del pliegue deberían tener lazy loading.
- Contenido en dispositivos con conexiones rápidas: Aunque no es posible controlar de forma directa la velocidad de conexión del usuario, en entornos donde se sabe que el acceso es siempre desde redes rápidas y estables como aplicaciones internas de empresa el eager loading puede ser la opción más simple y eficiente.
Evitar el eager loading en estas situaciones
El error más frecuente que detectamos al auditar webs es precisamente este: aplicar eager loading a todos los recursos por omisión, sin plantearse qué elementos realmente necesitan cargarse desde el primer instante.
Estas son las situaciones en las que el eager loading perjudica claramente el rendimiento:
- Imágenes situadas por debajo del pliegue: si el usuario necesita hacer scroll para ver una imagen, no hay ninguna razón técnica para cargarla antes de que llegue a ella. Cada imagen cargada de forma anticipada innecesariamente suma bytes a la carga inicial.
- Galerías extensas: una tienda online con 50 imágenes de producto en una página de categoría no debería cargar todas desde el inicio. El eager loading en este contexto puede disparar el tiempo de carga inicial hasta hacer la página prácticamente inutilizable en conexiones móviles.
- Vídeos embebidos: los iframes de YouTube o Vimeo son especialmente pesados. Cargarlos con eager loading cuando están situados a mitad o al final de la página es uno de los factores que más lastra los Core Web Vitals en blogs y páginas de contenido.
- Scripts de terceros no críticos: herramientas de chat, píxeles de seguimiento, widgets de redes sociales o scripts de analítica secundaria no necesitan cargarse en el momento inicial. Diferirlos tiene un impacto positivo inmediato en el rendimiento.
Cómo implementar eager loading correctamente
Implementar eager loading de forma deliberada es más sencillo de lo que parece. Estas son las acciones más comunes:
Atributo loading="eager" en HTML
Aunque el eager loading es el comportamiento por defecto, en webs donde se ha activado lazy loading de forma global mediante un plugin o un script, puede ser necesario especificarlo de forma explícita en los elementos críticos:
<!-- Imagen principal del hero: siempre eager loading -->
<img
src="imagen-principal.jpg"
alt="Descripción de la imagen principal"
loading="eager"
width="1200"
height="600"
fetchpriority="high"
>El atributo fetchpriority="high"
Este atributo, que complementa al eager loading, le indica al navegador que debe priorizar la descarga de ese recurso por encima de otros. Es especialmente útil para la imagen LCP y para los recursos críticos del renderizado inicial:
<!-- Combinación óptima para el elemento LCP -->
<img
src="hero.jpg"
alt="Imagen principal"
loading="eager"
fetchpriority="high"
width="1200"
height="500"
>Preload de recursos críticos en el head
Para recursos como fuentes tipográficas, imágenes críticas o scripts esenciales, la directiva <link rel="preload"> en el <head> del documento es una forma de eager loading aún más agresiva: le indica al navegador que descargue ese recurso lo antes posible, incluso antes de que lo encuentre en el HTML:
<!-- Preload de la imagen LCP -->
<link rel="preload" as="image" href="hero.jpg">
<!-- Preload de una fuente tipográfica crítica -->
<link rel="preload" as="font" type="font/woff2" href="fuente.woff2" crossorigin>Configuración en WordPress
Si tu web funciona sobre WordPress y tienes activado un plugin de lazy loading global como WP Rocket o Smush, es importante verificar que estos plugins excluyen automáticamente la imagen principal de cada página del lazy load. La mayoría de los plugins modernos lo hacen por defecto, pero conviene comprobarlo con PageSpeed Insights para confirmar que el LCP se está cargando con eager loading.