Featured image of post Lazy loading de iframes para rendimiento webFeatured image of post Lazy loading de iframes para rendimiento web
Performance

Lazy loading de iframes para rendimiento web

Learn how to use native loading="lazy" on images and third-party iframes to reduce initial payloads and improve First Contentful Paint (FCP).

  1. Inicio
  2. Webs
  3. Lazy loading de iframes para rendimiento web

Los iframes cargan documentos completos (HTML, CSS, JS) que pueden pesar varios MB. El lazy loading nativo y técnicas avanzadas mejoran el rendimiento.

loading=lazy nativo

<iframe loading="lazy" src="..."> difiere la carga hasta que el iframe está cerca del viewport. Soporte universal en navegadores modernos.

Intersection Observer

Carga el iframe solo cuando es visible. Control granular: margen de precarga, umbral de visibilidad. Ideal para integraciones complejas.

Alternativas a iframes

Embed con JavaScript ligero (widget API). Web Components. Contenido precargado y mostrado bajo demanda. Prefiere APIs sobre iframes.

Medición

Monitorea el impacto de iframes en LCP y TBT. Mide el peso total de recursos cargados. Evalúa si el iframe es realmente necesario.

©2022 - 2026 Commentary of Takao