El atributo loading="lazy" permite que las imágenes ubicadas bajo el primer viewport se carguen solo cuando el usuario se acerca a ellas. Esto reduce el peso inicial de la página, mejora la velocidad percibida y ayuda a optimizar métricas como Core Web Vitals.

La recomendación práctica es simple: no aplicar lazy loading a la imagen principal del hero ni a imágenes visibles al cargar la página, pero sí usarlo en imágenes secundarias, galerías, banners inferiores, logos, cards, testimonios y contenido ubicado más abajo. Google recomienda cargar con prioridad las imágenes del primer viewport y aplicar lazy loading al resto para equilibrar rendimiento y experiencia de usuario.

Ejemplo:

<img 
  src="/imagen-servicio.webp" 
  alt="Dashboard comercial con métricas de ventas" 
  width="800" 
  height="500" 
  loading="lazy">

También es importante definir width y height para evitar saltos visuales mientras la imagen carga.

El problema

Muchas páginas cargan todas sus imágenes al mismo tiempo, incluso aquellas que el usuario todavía no ve.

Esto genera:

• Mayor tiempo de carga inicial.
• Consumo innecesario de datos.
• Peor experiencia móvil.
• Menor rendimiento en auditorías técnicas.
• Riesgo de caída en conversión.

En sitios comerciales, este detalle técnico puede afectar formularios, páginas de servicios, landing pages y blogs.

¿Por qué ocurre?

Suele pasar por tres razones:

1. El CMS inserta imágenes sin optimización.
2. Los módulos visuales no tienen configurado lazy loading.
3. Se usan muchas imágenes decorativas sin criterio de carga.

En HubSpot, WordPress u otros CMS, es común que las imágenes del cuerpo del contenido se agreguen manualmente sin revisar atributos técnicos.

Consecuencias

Cuando las imágenes bajo el primer viewport no usan lazy loading, el navegador descarga recursos que todavía no necesita. MDN define lazy loading como una estrategia para tratar ciertos recursos como no críticos y cargarlos solo cuando hacen falta.

Esto puede afectar:

• Ventas: páginas más lentas reducen conversiones.
• Marketing: campañas pagadas envían tráfico a landing pages menos eficientes.
• Experiencia cliente: el usuario percibe fricción desde el primer contacto.
• Productividad: el equipo técnico termina corrigiendo síntomas, no la causa.
• Crecimiento: más tráfico no compensa una web lenta.

Cómo resolverlo

1. Identificar imágenes bajo el primer viewport

Revisa todas las imágenes que no aparecen al cargar la página:

• Imágenes del cuerpo del blog.
• Cards de servicios.
• Testimonios.
• Logos de clientes.
• Galerías.
• Banners secundarios.
• Íconos ilustrativos.

2. Agregar

loading="lazy"

Usa este atributo en imágenes que no sean críticas:

<img 
  src="/blog/crm-dashboard.webp" 
  alt="Ejemplo de dashboard CRM para seguimiento comercial" 
  width="1200" 
  height="675" 
  loading="lazy">

3. No aplicarlo al hero

La imagen principal del primer viewport debe cargar rápido. Aplicar lazy loading al hero puede retrasar el Largest Contentful Paint.

4. Definir tamaño de imagen

Siempre incluye:

width="1200"
height="675"

Esto evita movimientos inesperados del diseño mientras carga el contenido.

5. Revisar plantillas del CMS

En HubSpot, conviene revisar:

• Módulos personalizados.
• Plantillas de blog.
• Módulos de imágenes.
• Rich text con imágenes insertadas.
• Landing pages clonadas.

Caso de uso

Una empresa B2B tenía una landing page con:

• Hero visual pesado.
• 8 imágenes de secciones inferiores.
• Logos de clientes.
• Capturas de dashboards.
• Imágenes en testimonios.

Todas cargaban al inicio.

La intervención fue:

• Mantener la imagen hero sin lazy loading.
• Aplicar loading="lazy" a imágenes inferiores.
• Definir ancho y alto.
• Comprimir imágenes en WebP.
• Revisar el módulo de blog y landing pages.

Resultado esperado:

• Menor peso inicial.
• Mejor carga móvil.
• Menos fricción en campañas pagadas.
• Experiencia más fluida antes del formulario.

Recomendaciones prácticas

• Usa loading="lazy" en imágenes bajo el primer viewport.
• No lo uses en el hero.
• Define siempre width y height.
• Usa formatos modernos como WebP.
• Revisa páginas con muchas imágenes.
• Audita landings de campañas.
• Valida cambios con PageSpeed Insights o Lighthouse.
• Documenta esta regla en tus plantillas.

Conclusión

El lazy loading es una mejora pequeña, pero con impacto real. No transforma una web mal construida en una web rápida, pero sí evita que el navegador cargue recursos antes de tiempo.

En sitios comerciales, cada segundo cuenta. Una imagen que carga cuando no debe puede parecer un detalle técnico menor, pero acumulada en blogs, landings y páginas de servicios termina afectando velocidad, experiencia y conversión.

CTA consultivo

Si tu organización enfrenta desafíos similares, una evaluación técnica del sitio web puede ayudarte a identificar oportunidades de mejora en velocidad, experiencia y conversión.

SEO

Meta Title: Pocas imágenes sin lazy loading: mejora la velocidad web
Meta Description: Aprende cuándo usar loading=“lazy” en imágenes bajo el primer viewport para mejorar velocidad, UX y rendimiento SEO.
URL Slug: pocas-imagenes-sin-lazy-loading
Keyword Principal: lazy loading imágenes
Keywords Secundarias: loading lazy, velocidad web, optimización de imágenes, Core Web Vitals, rendimiento web
Search Intent: Informacional / Técnico
Entidades SEO: HTML, lazy loading, imágenes web, Core Web Vitals, PageSpeed Insights, Lighthouse, HubSpot, SEO técnico

FAQ

¿Qué es lazy loading en imágenes?

Lazy loading es una técnica que retrasa la carga de imágenes hasta que el usuario se acerca a ellas. Ayuda a reducir el peso inicial de la página y mejora la velocidad percibida.

¿Cuándo usar loading="lazy"?

Debe usarse en imágenes ubicadas bajo el primer viewport, como imágenes de secciones inferiores, galerías, testimonios, logos o contenido del blog.

¿Cuándo no usar lazy loading?

No debe usarse en imágenes visibles al cargar la página, especialmente la imagen principal del hero, porque puede afectar el Largest Contentful Paint.

¿Lazy loading mejora el SEO?

Puede ayudar indirectamente al SEO al mejorar velocidad, experiencia de usuario y métricas técnicas asociadas al rendimiento del sitio.

¿HubSpot permite usar lazy loading?

Sí. En HubSpot puede aplicarse en módulos personalizados, plantillas, HTML personalizado o imágenes insertadas dependiendo de cómo esté construida la página.