Carga diferida de iframes
Aplace la carga de iframes fuera de pantalla con loading=lazy
Carga diferida de iframes es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué es la carga diferida?
La carga diferida pospone la carga de los recursos hasta que se necesitan, cuando un elemento está cerca del viewport o dentro de él. En el caso de los iframe, esto significa que el documento incrustado, sus scripts, CSS y recursos no se descargan hasta que el usuario se desplaza cerca del iframe.
El atributo loading
Añada loading="lazy" a un iframe: <iframe src="embed.html" loading="lazy">. El navegador determina cuándo comenzar la carga según su propia heurística (normalmente entre 1000 y 2500 píxeles antes de que el iframe entre en el viewport). No se necesita JavaScript.
Impacto en el rendimiento
Los iframe pueden cargar muchos recursos (YouTube carga aproximadamente 500 KB de JavaScript). La carga diferida de un vídeo incrustado que está por debajo del pliegue reduce la carga inicial de la página exactamente en esa cantidad, mejorando directamente el LCP y el Time to Interactive del contenido que está por encima del pliegue.
loading="eager"
loading="eager" carga el iframe inmediatamente, independientemente de su posición. Este es el comportamiento predeterminado. Añadir eager explícitamente resulta útil en contextos que utilizan la carga diferida de forma predeterminada, como los frameworks que la añaden globalmente, cuando un iframe específico debe cargarse de inmediato.
Alternativa con Intersection Observer
Para una lógica de carga diferida compleja, como cargar al hacer clic o según la calidad de la conexión, utilice IntersectionObserver: observe el contenedor del iframe y establezca src solo cuando entre en el viewport. Esto le proporciona control total sobre cuándo y si se carga el iframe.
const observer = new IntersectionObserver(entries => {
if (entries[0].isIntersecting) {
iframe.src = iframe.dataset.src;
observer.disconnect();
}
});
observer.observe(iframe);Patrón facade
Muestre una miniatura estática en lugar del iframe de forma predeterminada. Añada un botón de reproducción superpuesto. Al hacer clic, sustituya la miniatura por el iframe real. El patrón facade de YouTube consiste en mostrar la miniatura del vídeo y cargar el iframe únicamente cuando el usuario hace clic en reproducir, lo que ahorra el coste completo de carga de la incrustación de YouTube.
Patrón de carga al hacer clic
Para incrustaciones de redes sociales, como cronologías de Twitter o publicaciones de Instagram, que cargan una cantidad considerable de JavaScript, muestre un botón «Cargar comentarios». Al hacer clic, inyecte el iframe. Los usuarios que no interactúen nunca asumirán el coste de carga. Esto es una mejora progresiva para el contenido social incrustado.
Compatibilidad de los navegadores
loading="lazy" para iframe es compatible con Chrome 77+ y Firefox 121+. Safari no admite la carga diferida de iframe (a fecha de 2024). Para una carga diferida compatible con todos los navegadores, utilice IntersectionObserver como alternativa fiable; funciona en todos los navegadores modernos.
Prevención del CLS
Reserve espacio para los iframe cargados de forma diferida mediante width, height y CSS aspect-ratio explícitos, a fin de evitar el Cumulative Layout Shift (CLS). Cuando el iframe se carga y se hace visible, el espacio ya está reservado; el contenido circundante no cambia de posición para acomodarlo.
Seguimiento analítico
Los iframe cargados de forma diferida pueden afectar a las analíticas: si un iframe de un píxel de seguimiento o una incrustación de analíticas se carga de forma diferida, es posible que no se ejecute para los usuarios que no se desplacen hasta él. Asegúrese de que los iframe esenciales para las analíticas y el seguimiento de conversiones se carguen de inmediato o estén por encima del pliegue.
Combinación de lazy y sandbox
Utilice lazy y sandbox conjuntamente: <iframe src="embed.html" loading="lazy" sandbox="allow-scripts">. Ambos atributos funcionan de forma independiente: lazy controla cuándo se carga el iframe y sandbox controla qué puede hacer. Combínelos para lograr una incrustación de terceros eficiente y segura.
Comprobación de conocimientos
¿Qué es el patrón de fachada para la carga diferida de iframes?
Resumen
La carga diferida de iframes con loading="lazy" aplaza la carga de recursos hasta que están cerca de la ventana gráfica, lo que reduce considerablemente la carga inicial de la página en el caso de contenido incrustado pesado. El patrón de fachada y la carga al hacer clic llevan esto un paso más allá: el iframe solo se carga cuando el usuario interactúa. IntersectionObserver proporciona control compatible con distintos navegadores para escenarios complejos de carga diferida. Reserve las dimensiones del iframe para evitar CLS.
Preguntas frecuentes
¿La lección «Carga diferida de iframes» es gratis?
Sí — el texto completo de «Carga diferida de iframes» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Carga diferida de iframes»?
Aplace la carga de iframes fuera de pantalla con loading=lazy Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML Academy?
No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Carga diferida de iframes»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML Academy?
Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- El elemento iframe: src y sandbox
- Seguridad de iframe: clickjacking y X-Frame-Options
- Los elementos embed y object
- Carga diferida de iframes