El lazy loading (carga diferida) es una técnica que consiste en cargar las imágenes y recursos de una página web únicamente cuando están a punto de mostrarse en pantalla, en lugar de cargar todo de golpe durante el primer renderizado. Para las tiendas de comercio electrónico con decenas o cientos de imágenes de productos, esta optimización reduce drásticamente el peso inicial de la página y mejora el rendimiento percibido por los visitantes.
¿Cómo funciona el lazy loading?
Sin lazy loading, el navegador descarga todas las imágenes presentes en el HTML en la carga inicial — incluidas las situadas al final de la página que el visitante quizás nunca llegue a ver. Con el lazy loading, solo se cargan las imágenes visibles en el viewport o en sus inmediaciones. Las demás permanecen en espera hasta que el usuario hace scroll hasta ellas.
El resultado es inmediato: la página se muestra más rápido, se consumen menos datos y el servidor recibe menos solicitudes simultáneas. En una página de listado de productos de PrestaShop con 40 artículos, esto puede reducir el número de imágenes cargadas al entrar de 40 a solo 6 u 8 — un ahorro de peso considerable.
El lazy loading nativo HTML: el atributo loading="lazy"
Desde 2019–2020, todos los navegadores modernos soportan nativamente el lazy loading mediante un simple atributo HTML en la etiqueta img: `loading="lazy"`. Basta con añadir este atributo para que el navegador gestione automáticamente la carga diferida, sin necesidad de JavaScript ni bibliotecas de terceros.
Ejemplo: `
`. Especificar los atributos width y height es importante: permite al navegador reservar el espacio en el layout antes de que la imagen se cargue, evitando así los desplazamientos visuales (CLS — Cumulative Layout Shift).
El enfoque JavaScript: la API Intersection Observer
Antes del soporte nativo — y aún hoy para casos de uso avanzados — el lazy loading se implementaba mediante la API JavaScript Intersection Observer. Esta API detecta con precisión cuándo un elemento del DOM entra en el viewport y activa en ese momento la carga de la imagen. Ofrece mayor control: es posible definir un margen de activación (por ejemplo, comenzar a cargar 300px antes de que la imagen entre en pantalla) para eliminar cualquier parpadeo visual.
¡Nunca apliques lazy loading a las imágenes above-the-fold!
Impacto en los Core Web Vitals
El lazy loading aplicado correctamente mejora varias métricas de los Core Web Vitals. Reduce el peso total cargado inicialmente, lo que mejora el LCP (Largest Contentful Paint) para las imágenes above-the-fold — el navegador dedica su ancho de banda a los recursos prioritarios en lugar de distribuirlo entre todas las imágenes de la página. También reduce el TBT (Total Blocking Time) al disminuir el procesamiento de red inicial.
Por el contrario, aplicado incorrectamente — sobre todo al aplicar lazy loading a la imagen hero — puede disparar el LCP. Es uno de los errores más frecuentes detectados en tiendas PrestaShop auditadas: un tema que aplica loading="lazy" a todas las imágenes sin distinción, perjudicando precisamente la métrica que se pretendía mejorar.
¿Indexa Google las imágenes con lazy loading?
Sí. Googlebot es capaz de ver e indexar las imágenes cargadas mediante lazy loading. Google ha confirmado que su crawler ejecuta JavaScript y espera a que se activen las cargas diferidas. No obstante, se recomienda usar el lazy loading nativo HTML (el atributo loading) en lugar de una implementación JavaScript personalizada para garantizar una indexación óptima.
Lazy loading y CDN: una combinación ganadora
Lazy loading en PrestaShop
PrestaShop no ofrece un lazy loading nativo activable con un clic en el back office. La implementación depende del tema utilizado. Los temas recientes (Classic 1.7+, Hummingbird) suelen incluir el atributo loading="lazy" en las imágenes de listado. Si tu tema no lo contempla, es necesario modificar los templates Smarty correspondientes o instalar un módulo dedicado.
- Imágenes de listado (categorías, búsqueda, novedades): ideales para el lazy loading — suelen estar fuera del viewport inicial
- Imagen principal de la ficha de producto: NO aplicar lazy loading — suele ser el elemento LCP de la página
- Miniaturas en el carrito o en bloques de 'productos relacionados': lazy loading recomendado
- Banners hero en la página de inicio: NO aplicar lazy loading, usar fetchpriority="high"
- Imágenes en reseñas de clientes o contenidos en acordeón: lazy loading recomendado