Una página con cincuenta imágenes no necesita cargarlas todas de golpe si la persona solo va a ver, en realidad, las primeras cinco antes de decidir si sigue leyendo o se va. El lazy loading («carga perezosa») es precisamente la técnica que retrasa la carga de imágenes y otros elementos hasta el momento justo en que el usuario está a punto de verlos, según hace scroll por la página.
Cómo cambia la experiencia de carga inicial
Sin lazy loading, el navegador intenta descargar todas las imágenes de una página desde el primer segundo, incluidas las que están muy abajo y que la mayoría de visitantes ni siquiera llegará a ver. Con lazy loading activo, solo se cargan las imágenes visibles al principio, y el resto se van solicitando según la persona se acerca a ellas mediante el scroll, aliviando considerablemente la carga inicial de la página.
Su impacto directo en las métricas que importan
Reduce el tiempo de carga inicial percibido, mejorando directamente métricas como el LCP dentro de los Core Web Vitals. Disminuye también el consumo de datos para quien navega desde móvil con una conexión limitada, algo que puede influir en la experiencia general, especialmente en zonas con conexiones más lentas.
Dónde no conviene aplicarlo sin cuidado
- En la imagen principal visible nada más cargar la página (por ejemplo, la cabecera de una landing), donde retrasar su carga puede empeorar precisamente la métrica que se busca mejorar.
- En elementos críticos para el primer impacto visual, donde un lazy loading mal aplicado puede generar un «salto» visual molesto mientras la imagen termina de cargar.
Cómo se implementa hoy en día
Los navegadores modernos soportan de forma nativa el lazy loading simplemente añadiendo un atributo sencillo en el código de la imagen, sin necesidad de programación compleja. En WordPress, muchos temas y plugins ya lo activan por defecto, aunque conviene comprobar que funciona correctamente y que no está retrasando, por error, elementos que deberían cargar de inmediato.