La carga diferida (Lazy Loading) es una técnica de optimización web que consiste en retrasar la descarga de recursos como imágenes, vídeos o iframes hasta que estén a punto de aparecer en la pantalla del usuario. En lugar de cargar todos los recursos al abrir la página, solo se descargan los visibles inicialmente y el resto se va cargando a medida que el usuario hace scroll.
Implementarla es tan sencillo como añadir el atributo loading="lazy" a los elementos img del HTML. Todos los navegadores principales (Chrome, Firefox, Safari y Edge) soportan este atributo de forma nativa, sin necesidad de bibliotecas JavaScript adicionales.
El impacto en los Core Web Vitals es considerable, especialmente en la métrica LCP (Largest Contentful Paint). Si una página contiene 50 imágenes, sin carga diferida el navegador intenta descargarlas todas simultáneamente. Con carga diferida, solo se descargan las pocas imágenes visibles en pantalla. Según datos de HTTP Archive, la implementación de carga diferida reduce el tamaño medio de página en aproximadamente un 20 %.
Para las páginas de destino de URL acortadas, la carga diferida mejora directamente la experiencia del usuario. Quien hace clic en un enlace de campaña espera ver el contenido de inmediato; si la carga inicial es lenta, la tasa de rebote aumenta. Según un estudio de Google, cuando el tiempo de carga pasa de 1 a 3 segundos, la tasa de rebote se incrementa un 32 %.
Un punto importante: no se debe aplicar loading="lazy" a las imágenes del primer pantallazo (above the fold). Hacerlo empeoraría el LCP, produciendo el efecto contrario al deseado. Puedes encontrar libros relacionados en Amazon.