Lazy loading: carga diferida de imágenes y recursos
El lazy loading reduce el peso de la página inicial y acelera el LCP. En HTML moderno es tan sencillo como añadir el atributo:
<img src="foto.jpg" loading="lazy" alt="...">El navegador decide cuándo cargarla — típicamente cuando faltan entre 300 y 2000 píxeles para que entre en pantalla, según implementación.
Aplica a <img> e <iframe> de forma nativa. Para vídeo y componentes interactivos se usan patrones similares con IntersectionObserver.
Excepción importante: nunca apliques loading="lazy" al elemento que es candidato a LCP (normalmente la foto del hero). Si retrasas el más importante, empeoras el LCP en vez de mejorarlo.
Por qué importa
Con 20-30 imágenes en una página larga, el lazy loading puede reducir el peso inicial de 3 MB a 400 KB. Mejora LCP, consumo de datos móvil y sensación de velocidad. Desde 2020 es soporte nativo en todos los navegadores modernos — no requiere JavaScript.
¿Esto aplica a tu web?
En 10 segundos te decimos cómo está tu sitio respecto a los términos del glosario: Core Web Vitals, schema, seguridad, accesibilidad, SEO técnico.
¿Tienes un proyecto exigente entre manos?
Cuéntanos qué necesita tu empresa. En la primera llamada evaluamos viabilidad técnica, alcance y presupuesto cerrado. Sin compromiso.