El lazy loading (carga diferida) es una técnica de optimización web que retrasa la carga de imágenes, vídeos y otros recursos hasta que el usuario está a punto de verlos. En lugar de descargar todo el contenido de una página al entrar, el navegador solo carga lo que aparece en pantalla en ese momento.
El resultado inmediato: páginas que abren más rápido y consumen menos datos, especialmente en dispositivos móviles.
¿Cómo funciona el lazy loading?
Cuando un visitante abre una página web, el navegador normalmente descarga todos los recursos del documento: imágenes, vídeos, scripts, fuentes. Con lazy loading, los recursos que están fuera del área visible (el viewport) se omiten temporalmente.
El navegador los carga sólo cuando el usuario hace scroll y esos elementos se acercan a la pantalla. Esto se consigue de dos maneras principales:
- Atributo nativo
loading="lazy"— soportado en todos los navegadores modernos desde 2020. Solo tienes que añadir el atributo a tus etiquetas<img>e<iframe>. - Intersection Observer API — una API de JavaScript que observa cuándo un elemento entra en el viewport y dispara la carga en ese momento. Útil para casos avanzados como galerías dinámicas o vídeos de fondo.
Ejemplo con el atributo nativo
<img
src="foto-producto.jpg"
alt="Zapatos de cuero artesanal color marrón"
loading="lazy"
width="800"
height="600"
>Con solo agregar loading="lazy", el navegador se encarga del resto. No se necesita JavaScript adicional.
¿Qué recursos se pueden cargar con lazy loading?
La técnica se aplica principalmente a:
- Imágenes — el caso de uso más común y el más impactante en la velocidad.
- Iframes — vídeos de YouTube, mapas de Google Maps, widgets de terceros.
- Vídeos — con el atributo
preload="none"combinado con JavaScript para cargar el player al acercarse al viewport. - Scripts y fuentes — mediante técnicas de carga asíncrona o diferida (
async/defer).
Ventajas del lazy loading para tu página web
Implementar lazy loading correctamente tiene un impacto directo y medible en varias áreas:
Velocidad de carga inicial
Al no descargar imágenes que están debajo del fold, el navegador puede mostrar el contenido visible mucho antes. Esto mejora directamente métricas como el LCP (Largest Contentful Paint) y el FID, dos de los Core Web Vitals que Google usa para rankear páginas.
Ahorro de ancho de banda
Muchos usuarios no llegan al final de una página. Sin lazy loading, descargaron imágenes que nunca vieron. Con lazy loading, esos recursos simplemente no se solicitan. En páginas con muchas imágenes, el ahorro puede ser del 40–70 % del peso total.
Mejor experiencia en móviles
Los usuarios de smartphones tienen conexiones más lentas y planes de datos limitados. Cargar solo lo necesario reduce el tiempo de espera y el consumo, lo que se traduce en menos rebotes y más conversiones.
SEO y posicionamiento
Google utiliza la velocidad de carga como señal de ranking. Una página más rápida tiene más probabilidades de aparecer en las primeras posiciones. Además, el bot de Google soporta lazy loading nativo y rastrea correctamente las imágenes diferidas.
Lazy loading y Core Web Vitals: la conexión directa
| Métrica | Qué mide | Impacto del lazy loading |
|---|---|---|
| LCP | Tiempo en que carga el elemento visual más grande | Positivo si la imagen LCP NO usa lazy loading |
| FID / INP | Respuesta a la primera interacción | Positivo: menos scripts bloqueantes |
| CLS | Saltos de diseño inesperados | Neutro si se definen width/height en imágenes |
| TTFB | Tiempo hasta el primer byte del servidor | Sin impacto directo |
Atención importante: nunca apliques lazy loading a la imagen que aparece primero en pantalla (el hero o logo). Esa imagen es candidata al LCP, y retrasar su carga perjudica directamente esa métrica. Usa loading="eager" (el valor por defecto) para el elemento visual principal.
Cómo implementar lazy loading paso a paso
- Audita tu página — abre Chrome DevTools o usa Google PageSpeed Insights para identificar las imágenes que más pesan y las que están debajo del fold.
- Añade
loading="lazy"— aplícalo a todas las imágenes excepto la primera visible en cada plantilla. - Define siempre
widthyheight— el navegador reserva el espacio antes de cargar la imagen, evitando saltos de layout (CLS). - Aplica a iframes de vídeo — especialmente incrustaciones de YouTube que encarecen el tiempo de carga incluso sin reproducirse.
- Verifica en producción — mide con Lighthouse antes y después para confirmar la mejora en LCP y en el peso total de la página.
Si necesitas ayuda para auditar e implementar estas optimizaciones en tu sitio, en elenlace.com ofrecemos servicios de optimización de rendimiento web adaptados a cada tipo de proyecto.
Conclusiones clave
- El lazy loading retrasa la carga de imágenes e iframes hasta que el usuario los va a ver, acelerando la apertura inicial de la página.
- La forma más sencilla de implementarlo es el atributo nativo
loading="lazy"en etiquetas<img>e<iframe>. - Nunca apliques lazy loading a la imagen principal visible (hero/LCP): perjudica el LCP.
- Define siempre
widthyheightpara evitar saltos de diseño y empeorar el CLS. - El ahorro en ancho de banda puede ser del 40–70 % en páginas con mucho contenido visual.
- Google soporta y rastrea correctamente el lazy loading nativo, por lo que no hay penalización SEO.
¿Tu página carga demasiado lento? Implementar lazy loading es uno de los cambios de mayor impacto con menor esfuerzo. Contacta a los especialistas de elenlace.com y mejora tu velocidad hoy mismo.
Preguntas frecuentes
¿El lazy loading afecta al SEO de mi sitio?
No negativamente. Google recomienda usar lazy loading nativo (loading="lazy") y su bot lo soporta desde 2019. De hecho, al mejorar el LCP y la velocidad general, el lazy loading puede ayudar a tu posicionamiento.
¿Debo usar lazy loading en todas las imágenes?
No en todas. La imagen principal que aparece al cargar la página (hero, logo o primera foto de producto) no debe tener lazy loading. Usa loading="eager" o simplemente no pongas el atributo, ya que ese es el valor por defecto.
¿Funciona en todos los navegadores?
El atributo loading="lazy" es compatible con Chrome, Firefox, Edge, Safari y Opera en sus versiones modernas. Cubre más del 95 % de los navegadores en uso actualmente. Para soporte en navegadores muy antiguos, existen librerías JavaScript como lazysizes.
¿El lazy loading mejora la velocidad en móviles?
Sí, especialmente en móviles. Las conexiones 4G/5G son más variables que el Wi-Fi, y los planes de datos tienen límites. Al cargar solo las imágenes visibles, reduces el tiempo de espera y el consumo de datos, mejorando la experiencia del usuario móvil.
Para saber más
Otros proveedores y guías que vale la pena comparar:
