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.
Muchas páginas cargan todas sus imágenes al mismo tiempo, incluso aquellas que el usuario todavía no ve.
Esto genera:
En sitios comerciales, este detalle técnico puede afectar formularios, páginas de servicios, landing pages y blogs.
Suele pasar por tres razones:
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.
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:
Revisa todas las imágenes que no aparecen al cargar la página:
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">
La imagen principal del primer viewport debe cargar rápido. Aplicar lazy loading al hero puede retrasar el Largest Contentful Paint.
Siempre incluye:
width="1200"
height="675"
Esto evita movimientos inesperados del diseño mientras carga el contenido.
En HubSpot, conviene revisar:
Una empresa B2B tenía una landing page con:
Todas cargaban al inicio.
La intervención fue:
loading="lazy" a imágenes inferiores.Resultado esperado:
loading="lazy" en imágenes bajo el primer viewport.width y height.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.
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.
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
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.
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.
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.
Puede ayudar indirectamente al SEO al mejorar velocidad, experiencia de usuario y métricas técnicas asociadas al rendimiento del sitio.
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.