El lazy loading (carga diferida) es una técnica que retrasa la descarga de imágenes y otros recursos hasta que el usuario está a punto de verlos, en lugar de cargar todo al mismo tiempo cuando abre la página. El resultado es una página que parece cargarse más rápido porque el navegador solo descarga lo que está visible en pantalla.
Si tu sitio tiene muchas imágenes —una tienda en línea, un portafolio, un blog con artículos largos— el lazy loading puede reducir significativamente el peso inicial de la página y mejorar tus métricas de Core Web Vitals.
Cómo funciona el lazy loading
Sin lazy loading, cuando un usuario abre tu página el navegador descarga todas las imágenes del documento: las visibles en pantalla y las que están 5, 10 o 20 desplazamientos más abajo. La mayoría de esas imágenes nunca se verán (el usuario sale antes), pero igual consumen ancho de banda y tiempo.
Con lazy loading, el flujo cambia:
- El navegador carga la página HTML y renderiza lo que está en el viewport inicial.
- Las imágenes fuera de pantalla tienen un placeholder (vacío o un color de fondo) en lugar de la imagen real.
- Conforme el usuario hace scroll y se acerca a una imagen, el navegador la descarga justo a tiempo para mostrarla.
Este comportamiento se controla con el atributo loading="lazy" en HTML o mediante JavaScript con la Intersection Observer API.
Formas de implementar lazy loading
Atributo nativo de HTML (la forma más simple)
Desde 2019, todos los navegadores modernos soportan lazy loading nativo con un solo atributo:
<img src="foto-producto.jpg" alt="Zapatos de piel artesanales color café" loading="lazy" width="600" height="400">No requiere JavaScript ni librerías externas. Simplemente agregar loading="lazy" a tus etiquetas <img> es suficiente. Los atributos width y height son importantes: le dicen al navegador cuánto espacio reservar, evitando el problema de Cumulative Layout Shift (CLS).
Intersection Observer API (control avanzado)
Para casos donde necesitas más control —animaciones al cargar, placeholders con efecto blur, compatibilidad con navegadores muy viejos— se usa la Intersection Observer API en JavaScript. Esta API detecta cuándo un elemento entra en el viewport y ejecuta una función en respuesta.
La mayoría de los plugins de WordPress (como WP Rocket, ShortPixel o Smush) implementan esta variante automáticamente sin que necesites tocar código.
Lazy loading en iframes y videos
El mismo atributo nativo funciona con iframes:
<iframe src="https://www.youtube.com/embed/VIDEO_ID" loading="lazy"></iframe>Para videos en <video>, la técnica equivalente es usar preload="none" o preload="metadata" para evitar que el navegador descargue el archivo de video completo al cargar la página.
Beneficios del lazy loading para tu sitio
| Beneficio | Impacto medible |
|---|---|
| Menor tiempo de carga inicial | Reduce el peso descargado en el primer render en 30–70% en páginas con muchas imágenes |
| Mejora del LCP | La imagen más grande en pantalla se carga antes porque no compite con recursos fuera de pantalla |
| Ahorro de ancho de banda | Usuarios que rebotan sin hacer scroll no descargan imágenes que nunca ven |
| Mejor experiencia móvil | En datos móviles, cargar solo lo necesario puede marcar la diferencia entre que el usuario espere o cierre |
| Menor carga al servidor | Menos solicitudes simultáneas en el primer segundo de carga |
Aplicar lazy loading es una de las optimizaciones más sencillas con mejor relación esfuerzo/impacto. En elenlace.com lo incluimos de forma estándar en todos los proyectos de desarrollo y optimización que entregamos.
Qué NO debes poner en lazy loading
Este punto es crítico y muchos lo pasan por alto: la imagen más importante de tu página (hero image, logo, foto principal del producto) NO debe tener lazy loading.
El razonamiento es simple: si la imagen principal ya está en el viewport inicial, aplicarle loading="lazy" hace que el navegador la postergue, lo que empeora el LCP en lugar de mejorarlo. Google lo penaliza.
La regla práctica:
- Primeras 1–2 imágenes visibles sin scroll →
loading="eager"(o sin atributo, que es el comportamiento por defecto). - Todo lo demás →
loading="lazy".
Si usas WordPress, asegúrate de que tu plugin no aplique lazy loading indiscriminadamente a todas las imágenes. WP Rocket, por ejemplo, tiene una opción para excluir imágenes above-the-fold.
Lazy loading y SEO: ¿afecta al rastreo?
Una preocupación común es si Google puede rastrear imágenes con lazy loading. La respuesta es sí, siempre que uses el atributo nativo o Intersection Observer correctamente.
El Googlebot moderno ejecuta JavaScript y espera a que los elementos sean visibles para rastrearlos. El único riesgo es si usas implementaciones antiguas basadas en data-src sin un fallback adecuado, donde el bot podría no ver la imagen real.
Para asegurarte de que tus imágenes estén bien indexadas:
- Usa el atributo nativo
loading="lazy"siempre que sea posible. - Incluye siempre texto
altdescriptivo y con palabras clave relevantes. - Usa
widthyheightpara evitar CLS. - Verifica en Google Search Console que tus imágenes aparezcan en la cobertura de indexación.
Puedes encontrar más técnicas de optimización en la categoría de rendimiento web de nuestro blog.
Conclusiones clave
- El lazy loading retrasa la carga de imágenes fuera del viewport hasta que el usuario las necesita.
- La implementación más simple es el atributo nativo
loading="lazy", soportado por todos los navegadores modernos. - No apliques lazy loading a la imagen principal (hero) ni a ninguna imagen visible sin scroll — empeora el LCP.
- Siempre incluye
width,heightyaltpara evitar CLS y mantener la accesibilidad SEO. - El impacto en velocidad es especialmente notable en páginas con muchas imágenes y en dispositivos móviles.
¿Quieres implementar lazy loading correctamente en tu sitio y asegurarte de que no penaliza ninguna imagen crítica? El equipo de elenlace.com puede hacer la revisión y aplicar la configuración óptima para tu caso.
Preguntas frecuentes
¿Todos los navegadores soportan lazy loading nativo?
Sí. Chrome, Firefox, Edge y Safari (desde la versión 15.4) soportan loading="lazy". La cobertura global supera el 95% de los usuarios. Para el porcentaje restante, el navegador simplemente ignora el atributo y carga la imagen de forma normal, sin errores.
¿El lazy loading funciona en WordPress sin plugins?
Desde WordPress 5.5 (agosto 2020), WordPress agrega automáticamente loading="lazy" a las imágenes insertadas a través del editor o la función the_post_thumbnail(), excepto a la primera imagen del contenido. No necesitas un plugin solo para esto, aunque los plugins de optimización ofrecen configuraciones adicionales.
¿Lazy loading afecta las imágenes en el sitemap XML?
No. El sitemap XML de imágenes es un archivo estático que el bot lee directamente; el lazy loading (que opera en el navegador) no afecta ese rastreo. Lo que sí importa es que el src de la imagen sea la URL real, no un placeholder.
¿Puedo aplicar lazy loading a imágenes de fondo CSS?
El atributo loading="lazy" solo funciona con etiquetas <img> e <iframe>. Para fondos CSS, la técnica equivalente es usar JavaScript con Intersection Observer para agregar una clase que aplica el background-image solo cuando el elemento entra en pantalla. Algunos plugins de performance lo hacen automáticamente.
Compara proveedores
Otros proveedores y guías que vale la pena comparar:
