Cuando entras a una web y tienes que esperar a que carguen todas las imágenes antes de poder leer el texto, algo está mal. La página está descargando recursos que ni siquiera ves todavía, los que están al fondo de la pantalla, aunque estés mirando el encabezado. Ahí es donde el lazy loading marca la diferencia.

Es una técnica sencilla de entender y relativamente fácil de activar. Pero muchos sitios web peruanos todavía no la tienen, y eso les cuesta velocidad, posicionamiento en Google y usuarios que se van antes de ver lo más importante.

Qué significa exactamente «lazy loading»

En español sería algo como «carga diferida» o «carga perezosa». La idea es simple: en vez de cargar todo el contenido de una página al mismo tiempo, el navegador carga primero lo que está visible en pantalla y deja para después lo que está más abajo.

Imagina que tienes una tienda en Miraflores con un catálogo de 80 productos. Sin lazy loading, cuando alguien entra a tu web, el navegador intenta descargar las fotos de los 80 productos de golpe. Con lazy loading, descarga las primeras 6 o 8 fotos que aparecen en pantalla, y las demás las carga solo cuando el usuario hace scroll y se acerca a ellas.

Por qué esto mejora la velocidad de forma visible

El efecto es directo. Si tu página tiene 40 imágenes pero el usuario promedio solo ve las primeras 10 antes de decidir si se queda o se va, estabas haciendo que descargara 30 imágenes que nunca iba a ver. Eso es ancho de banda desperdiciado y tiempo de carga inflado.

Con lazy loading, el tiempo hasta que la página se vuelve interactiva baja de forma notable. Y eso importa porque Google mide precisamente ese momento para calcular el LCP (Largest Contentful Paint), uno de los Core Web Vitals que afecta el ranking en buscadores.

Qué tipos de contenido se benefician más

• Imágenes: es el caso más común y donde el impacto es más claro. Cualquier foto que esté debajo del primer «doblez» de pantalla es candidata al lazy loading.
• Videos embebidos: un iframe de YouTube pesa bastante incluso si no se reproduce. Con lazy loading solo se carga cuando el usuario llega hasta él.
• Mapas de Google: si tienes un mapa de tu local al final de la página de contacto, sin lazy loading ese mapa se carga junto con todo lo demás desde el primer segundo.
• Comentarios y reseñas: secciones que viven al final de la página y que no todos los usuarios llegan a ver.

Cómo activar lazy loading en tu web

Depende de cómo esté construida tu web. Pero en la mayoría de casos no necesitas tocar código.

En WordPress con un plugin de caché

Plugins como WP Rocket, LiteSpeed Cache o W3 Total Cache tienen una opción específica de lazy loading en su configuración. En WP Rocket, por ejemplo, está en la sección «Media» y se activa con un clic. El plugin se encarga de modificar el código automáticamente.

Con el atributo nativo de HTML

Desde 2019, los navegadores modernos soportan lazy loading de forma nativa. Solo hay que agregar el atributo loading="lazy" a las etiquetas de imagen. Si tu tema o desarrollador lo configuró bien, ya lo tienes activado. Si no, es un cambio pequeño en el código.

Un detalle importante: la imagen principal

No apliques lazy loading a la imagen que aparece en la parte superior de la página, la que se ve sin hacer scroll. Esa imagen debe cargarse lo más rápido posible porque es parte del LCP. Si le pones lazy loading, paradójicamente empeorarás tu puntaje de velocidad. Solo aplícalo a todo lo que está debajo del primer «doblez».

Cuánto puede mejorar tu tiempo de carga

Depende de cuántas imágenes tiene tu web y qué tan pesadas son. En una tienda online con muchos productos, activar lazy loading puede reducir el peso inicial de la página a la mitad o más. En un blog con fotos en cada artículo, el impacto también es significativo.

Una web que antes cargaba en 5 segundos puede bajar a 2.5 o 3 simplemente con esta técnica. No es el único ajuste que hay que hacer, pero es uno de los más efectivos en relación a lo fácil que resulta implementarlo.

Lazy loading y experiencia de usuario

Hay un riesgo que vale mencionar: si lo configuras mal, el usuario puede ver imágenes que «aparecen de golpe» mientras hace scroll, lo que da una sensación de web incompleta. Esto se puede solucionar con una animación de fade-in suave o con un placeholder de color de fondo mientras carga la imagen real. Los plugins modernos ya manejan esto bien, pero si tienes una implementación personalizada, asegúrate de probarlo en móvil.

La mayoría de usuarios en Perú navega desde el celular, con pantallas de entre 5 y 6 pulgadas y conexiones que van de regular a buena. Para ellos, cada megabyte que se ahorran se nota. Activar lazy loading es una de esas optimizaciones que no se ven pero que el usuario siente.

Lazy loading y tiendas online: un caso de uso especial

Si tienes una tienda en WooCommerce con 50, 100 o más productos, el lazy loading no es opcional, es esencial. Una página de categoría con 24 productos y sus respectivas fotos puede pesar varios megas si se carga todo de golpe. Con lazy loading, el navegador carga las primeras ocho fotos y las demás aparecen conforme el usuario baja.

Esto también mejora la experiencia directamente: el usuario puede empezar a ver y comparar productos casi de inmediato, sin esperar a que cargue toda la página. En una tienda online, cada segundo de espera tiene un costo real en ventas. Un estudio de Shopify encontró que reducir el tiempo de carga a la mitad puede aumentar las conversiones entre un 8% y un 12%. Para una tienda que vende 5,000 soles al mes, eso son 400 a 600 soles más sin cambiar nada del catálogo.

Cuándo el lazy loading puede causar problemas

Hay situaciones en las que el lazy loading mal aplicado puede ser contraproducente. Si una imagen que aparece en la parte superior de la página tiene el atributo lazy, el navegador la dejará para después y el área aparecerá en blanco durante un momento. Eso dispara el LCP, que es precisamente la métrica de velocidad que Google más valora.

También puede ser problemático en páginas que se imprimen o se convierten a PDF, porque el contenido que no se ha cargado no aparece. Si tienes páginas pensadas para impresión, conviene excluirlas del lazy loading.

Por último, algunos rastreadores de redes sociales, cuando generan la vista previa de un link compartido, no ejecutan JavaScript y por tanto no ven las imágenes con lazy loading. Para la imagen principal del post o artículo, usa siempre carga normal y asegúrate de tenerla declarada en las etiquetas Open Graph del HTML.

Preguntas frecuentes

¿El lazy loading afecta el SEO de mi web?

Bien implementado, ayuda al SEO porque mejora métricas como el LCP y el tiempo de carga total. Google rastrea el contenido lazy correctamente. Lo único que debes evitar es aplicarlo a la imagen principal o a texto relevante, porque el bot necesita verlos en la carga inicial.

¿Puedo activar lazy loading sin saber programar?

Sí. Si usas WordPress, plugins como WP Rocket o LiteSpeed Cache tienen esta opción con un solo clic. Para iframes de YouTube hay plugins específicos como WP YouTube Lyte. No necesitas tocar código en la mayoría de casos.

¿El lazy loading funciona en todos los navegadores?

Los navegadores modernos como Chrome, Firefox, Edge y Safari lo soportan de forma nativa desde hace varios años. Internet Explorer no lo soporta, pero su uso en Perú es marginal. Para casos extremos, los plugins de WordPress incluyen un fallback en JavaScript.

¿Tiene sentido aplicar lazy loading en webs con pocas imágenes?

En webs muy simples con dos o tres imágenes, el impacto es mínimo. El lazy loading aporta más en páginas con muchos elementos visuales: tiendas online, blogs con portadas en cada artículo, páginas de portafolio o catálogos de servicios con fotos.

¿Cómo sé si mi web ya tiene lazy loading activado?

Abre tu web en Chrome, haz clic derecho sobre una imagen que esté abajo de la página y selecciona ‘Inspeccionar’. Si ves el atributo loading=’lazy’ en el código HTML de la imagen, está activado. También puedes revisar la pestaña Network de Chrome DevTools y ver qué imágenes se cargan al inicio versus al hacer scroll.