Lazy Loading
Técnica que retrasa la carga de imágenes y recursos hasta que el usuario los necesita.
Resumen rápido
Lazy Loading se refiere a técnica que retrasa la carga de imágenes y recursos hasta que el usuario los necesita. Implementar lazy loading correctamente reduce el tiempo de carga inicial (mejora LCP), ahorra ancho de banda del usuario y mejora los Core Web Vitals. Todo esto se traduce en mejor posicionamiento en Google, menor tasa de rebote y mejor experiencia de navegación para tus visitantes. Consejo clave: La regla de oro del lazy loading: nunca hagas lazy load de las primeras 2-3 imágenes visibles en la pantalla inicial.
¿Qué es Lazy Loading?
Lazy loading es una técnica de optimización web que retrasa la carga de recursos no críticos (principalmente imágenes y videos) hasta que el usuario se desplaza cerca de ellos en la página. En lugar de cargar todas las imágenes al abrir la página, solo se cargan las visibles en el viewport inicial. Esto mejora significativamente el tiempo de carga inicial y reduce el consumo de datos del usuario, algo especialmente relevante para audiencias en conexiones móviles lentas.
¿Por qué importa?
Implementar lazy loading correctamente reduce el tiempo de carga inicial (mejora LCP), ahorra ancho de banda del usuario y mejora los Core Web Vitals. Todo esto se traduce en mejor posicionamiento en Google, menor tasa de rebote y mejor experiencia de navegación para tus visitantes.
Cómo aplicar Lazy Loading paso a paso
Usa el atributo nativo loading="lazy" en tus etiquetas <img> y <iframe> HTML. Para frameworks modernos como React o Next.js, usa los componentes de imagen optimizados que incluyen lazy loading automático. Importante: no apliques lazy loading a imágenes above-the-fold ni al elemento LCP de la página.
Ejemplo práctico
Un blog con 15 imágenes por artículo tardaba 8 segundos en cargar completamente. Al agregar loading="lazy" a las imágenes debajo del fold y precargar solo la imagen hero con <link rel="preload">, el tiempo de carga visible (LCP) bajó a 2.3 segundos, el bounce rate se redujo un 18% y las páginas por sesión aumentaron de 1.3 a 2.1.
Errores comunes
Aplicar lazy loading a la imagen hero o al elemento LCP (la primera imagen visible debe cargarse inmediatamente)
No definir width y height en las imágenes con lazy loading, causando layout shifts (CLS alto)
Usar lazy loading en iframes de YouTube o mapas que están above-the-fold
Depender solo de librerías JavaScript para lazy loading sin aprovechar el atributo nativo loading="lazy"
Tip pro
La regla de oro del lazy loading: nunca hagas lazy load de las primeras 2-3 imágenes visibles en la pantalla inicial. Esas deben cargarse inmediatamente con prioridad alta. Todo lo que está "below the fold" (debajo del primer pantallazo visible) debe tener lazy loading. En móvil, el fold es más alto, así que normalmente solo la primera imagen se carga sin lazy.
Preguntas frecuentes
Herramientas relacionadas
Términos relacionados
My Rank Lab
Aprende a aplicar Lazy Loading como un profesional
Herramientas reales, cursos avanzados y soporte experto. No solo lees, aplicas.