Tu web de empresa tiene 40 imágenes en la home, 15 en la página de servicios y un catálogo con decenas de fotos de producto. Si todas se cargan a la vez, el visitante espera segundos antes de ver algo útil. El lazy loading (carga diferida) retrasa la descarga de imágenes hasta que el usuario las necesita: cuando hace scroll o cuando entran en el viewport.
En aatsoft, agencia de desarrollo web en Manresa (Barcelona), auditamos webs corporativas donde el diseño es correcto pero la carga inicial es lenta por imágenes mal gestionadas. En esta guía te explicamos qué es el lazy loading, cómo acelera tu sitio, qué errores evitar y cómo combinarlo con otras optimizaciones para mejorar la experiencia y el posicionamiento.
Qué es el lazy loading y por qué importa en tu web de empresa
El lazy loading es una técnica que carga recursos (principalmente imágenes, vídeos e iframes) solo cuando van a mostrarse en pantalla. En lugar de descargar 2 MB de fotos al abrir la página, el navegador carga primero lo visible y deja el resto para cuando el usuario hace scroll.
Para una web de empresa, esto significa:
- Menos tiempo hasta el primer contenido visible: el visitante ve texto y diseño antes, no un hueco blanco.
- Menor consumo de datos: relevante en móvil, donde muchos usuarios navegan con conexión limitada.
- Mejor puntuación en Core Web Vitals: especialmente LCP (Largest Contentful Paint) y, en algunos casos, CLS si se implementa bien.
- Menos carga en el servidor: no todas las imágenes se solicitan en cada visita.
Google valora la velocidad como factor de experiencia. Si tu web tarda en cargar, pierdes visitas antes de que lean tu propuesta de valor. El lazy loading no sustituye a una buena optimización de imágenes, pero la complementa.
Señales de que tu web necesita lazy loading
Revisa estos indicios antes de asumir que tu web ya está optimizada:
- La home tarda más de 3 segundos en mostrar contenido útil en móvil.
- PageSpeed Insights o Lighthouse marcan imágenes fuera de pantalla como oportunidad de mejora.
- En la pestaña Red del navegador, ves decenas de peticiones de imágenes al cargar la primera pantalla.
- Tu blog o catálogo tiene muchas entradas con fotos grandes en listados largos.
- Los Core Web Vitals están en rojo o naranja en Search Console.
Usa Google Search Console para ver si la velocidad en móvil afecta a tus páginas principales.
Cómo funciona el lazy loading en la práctica
Atributo loading="lazy" nativo
Los navegadores modernos (Chrome, Firefox, Safari, Edge) soportan loading="lazy" en etiquetas <img> e <iframe>. Es la forma más simple: añades el atributo y el navegador gestiona la carga diferida sin JavaScript adicional.
JavaScript y librerías
En proyectos más complejos o con navegadores antiguos, se usan librerías como lazysizes o Intersection Observer API. Permiten más control: placeholders, transiciones, carga progresiva o lazy loading en elementos de fondo CSS.
Lazy loading en CSS y fondos
Las imágenes de fondo (background-image) no admiten loading="lazy" de forma nativa. Hay que usar JavaScript o técnicas como content-visibility para retrasar su carga.
Qué imágenes debes cargar con lazy loading (y cuáles no)
No todas las imágenes deben cargarse en diferido. La regla general:
- Sí, lazy loading: imágenes por debajo del pliegue (below the fold), galerías, catálogos, avatares en listados, imágenes de artículos relacionados, fotos en páginas largas.
- No, carga inmediata: logo, imagen hero de la home, primera imagen visible al abrir la página, iconos críticos, imágenes que definen el LCP.
Si aplicas lazy loading a la imagen principal de tu home, empeoras el LCP y Google puede penalizar la experiencia. Prioriza siempre lo que el usuario ve en los primeros segundos.
Errores frecuentes al implementar lazy loading
- Lazy loading en la imagen LCP: retrasa el elemento más grande visible y empeora la métrica clave de velocidad.
- Sin dimensiones width/height: el navegador no reserva espacio y el contenido salta al cargar (CLS negativo).
- Placeholder de baja calidad mal implementado: un blur excesivo o un skeleton que parpadea genera mala experiencia.
- Olvidar iframes y vídeos: un mapa de Google Maps o un vídeo embebido puede pesar más que todas las imágenes juntas.
- No combinar con compresión: lazy loading en una imagen de 3 MB solo retrasa el problema; primero reduce peso y formato (WebP, AVIF).
- SEO mal gestionado: las imágenes lazy deben seguir teniendo
altdescriptivo y estar en el HTML (no cargar solo por JavaScript sin fallback).
Cómo auditar el lazy loading en tu web paso a paso
- Abre PageSpeed Insights con la URL de tu home y de una página con muchas imágenes (blog, catálogo).
- Revisa la sección "Oportunidades": busca avisos sobre imágenes fuera de pantalla o carga diferida.
- Inspecciona el HTML: comprueba qué imágenes tienen
loading="lazy"y si la hero carece de él. - Simula móvil en DevTools: pestaña Red, recarga y cuenta cuántas imágenes se descargan antes del primer scroll.
- Mide LCP y CLS en Search Console o con Lighthouse para ver el impacto real.
Cómo implementar lazy loading sin romper tu web
1. Identifica la imagen LCP de cada plantilla
En la home suele ser la hero; en un artículo de blog, la imagen destacada. Esas imágenes van con loading="eager" o sin atributo (eager por defecto).
2. Aplica loading="lazy" al resto
En listados de blog, galerías de proyectos y catálogos, añade loading="lazy" a cada <img> que quede fuera del primer viewport.
3. Define width y height
Reserva el espacio antes de cargar para evitar saltos de layout. Usa CSS aspect-ratio si las dimensiones varían.
4. Usa formatos modernos
Combina lazy loading con WebP o AVIF y tamaños responsive (srcset) para que cada dispositivo descargue solo lo necesario.
5. Prueba en móvil real
Emuladores ayudan, pero prueba en un smartphone con 4G para ver la experiencia real del visitante.
Lazy loading y SEO: lo que Google espera
Google rastrea contenido cargado con lazy loading si está en el HTML inicial. Las imágenes con loading="lazy" siguen siendo indexables si tienen URL y atributo alt en el código fuente.
Evita cargar imágenes solo mediante JavaScript sin que aparezcan en el HTML: los bots pueden no ejecutar el script. Para contenido crítico SEO, mantén las imágenes en el markup.
El lazy loading mejora la velocidad, y la velocidad es señal de experiencia. No es un factor de ranking directo por sí solo, pero una web más rápida retiene más visitas y reduce la tasa de rebote.
Tabla resumen: cuándo usar lazy loading
| Elemento | ¿Lazy loading? | Motivo |
|---|---|---|
| Logo y cabecera | No | Visible de inmediato, crítico para branding |
| Imagen hero / portada | No | Suele ser el LCP de la página |
| Imágenes en artículos (cuerpo) | Sí | Below the fold en textos largos |
| Galería de proyectos | Sí | Muchas imágenes, pocas visibles al inicio |
| Catálogo de productos | Sí | Listados extensos con fotos repetidas |
| Mapas e iframes | Sí | Pesan mucho y rara vez son lo primero que se ve |
Conclusión: carga solo lo que el visitante va a ver
El lazy loading no es un truco de moda: es una práctica estándar para webs con muchas imágenes. Aplicado con criterio —sin retrasar lo crítico, con dimensiones definidas y combinado con compresión— acelera tu sitio, mejora la experiencia en móvil y refuerza tus métricas de rendimiento.
Si tu web de empresa tarda en cargar y tienes decenas de imágenes en cada página, es momento de auditar. En aatsoft ayudamos a empresas a optimizar la carga de sus sitios sin sacrificar calidad visual ni posicionamiento.
