Qué es el lazy load
El lazy load es la técnica que retrasa la carga de las imágenes y vídeos de una página hasta que el visitante está a punto de verlos, en lugar de cargar todo el contenido de golpe nada más entrar. También se conoce como «carga diferida de imágenes».
Es como un camarero que no saca todos los platos de la cocina de golpe al principio de la comida, sino que va trayendo cada uno justo cuando toca servirlo: nadie espera innecesariamente ni se satura la mesa con comida que todavía no toca. El lazy load aplica esa misma lógica a las imágenes y vídeos de una página larga: en lugar de descargar todas las imágenes aunque estén muy abajo en la página, el navegador solo las carga cuando el visitante se acerca a esa parte al hacer scroll.
Cómo funciona
- La página carga primero el contenido visible en la pantalla inicial, sin esperar a las imágenes que están más abajo.
- Las imágenes y vídeos que todavía no se ven quedan marcados para cargar «cuando haga falta», en lugar de cargarse de inmediato.
- A medida que el visitante hace scroll hacia abajo, el navegador detecta que esas imágenes están a punto de aparecer en pantalla.
- Justo antes de que sean visibles, el navegador las descarga y las muestra.
- El resultado es que la carga inicial de la página es más ligera, porque no se descarga todo lo que el visitante todavía no ha llegado a ver.
Ejemplo
Una tienda de decoración online en Burgos tenía páginas de categoría con más de cien fotos de producto cargando todas a la vez, aunque el visitante solo viera las primeras ocho sin hacer scroll. La carga inicial de esas páginas era muy pesada, sobre todo en móvil. Activamos lazy load en todas las imágenes salvo en las primeras visibles al entrar, y la cantidad de datos descargados al abrir la página se redujo drásticamente, sin cambiar nada del diseño del catálogo.
Señales de que te afecta
- Tus páginas de categoría o de contenido tienen muchas imágenes y van lentas al cargar.
- PageSpeed Insights señala que estás cargando imágenes fuera de la pantalla visible desde el principio.
- Notas que la web consume muchos datos al cargar, algo que notan especialmente los visitantes con conexiones móviles limitadas.
- Tienes páginas largas (blog, catálogo) con contenido visual abundante.
Cómo lo resolvemos
Activamos lazy load en las imágenes y vídeos que no son visibles al entrar en cada página, dejando sin retraso las primeras que sí se ven de inmediato, para no perjudicar el LCP. Si quieres que revisemos la carga de imágenes de tu web, en nuestro servicio de optimización WordPress nos encargamos de configurarlo. Conviene combinar el lazy load con imágenes en formato WebP y revisar que no provoque saltos visuales relacionados con el CLS.
Preguntas frecuentes
¿El lazy load empeora el SEO porque Google no ve todas las imágenes?
No si está bien implementado: Google es capaz de interpretar el lazy load moderno sin problema, siempre que se use el método estándar del navegador y no una técnica que oculte realmente el contenido a los buscadores.
¿Debo aplicar lazy load a todas las imágenes de la página?
No a las primeras que se ven nada más entrar, como la imagen principal: a esas conviene darles prioridad de carga, porque retrasarlas puede empeorar el LCP en lugar de mejorar la velocidad percibida.
¿El lazy load sirve también para vídeos?
Sí, funciona igual: los vídeos insertados más abajo en la página pueden retrasar su carga hasta que el visitante se acerca a ellos, en lugar de descargarse todos desde el principio.