Navegadores compatibles
La carga diferida de los elementos <iframe>
aplaza la carga de iframes fuera de pantalla.
hasta que el usuario se desplace cerca de ellos. Esto ahorra datos, acelera la carga de
otras partes de la página y reduce el uso de memoria.
Al igual que con la carga diferida de imágenes,
Usa el atributo loading
para indicarle al navegador que quieres realizar una carga diferida de un iframe.
<iframe src="https://example.com"
loading="lazy"
width="600"
height="400"></iframe>
Esta demostración de <iframe loading=lazy>
muestra incorporaciones de video de carga diferida:
¿Por qué usar iframes de carga diferida?
Las incorporaciones de terceros abarcan una gran variedad de casos de uso, desde reproductores de video hasta publicaciones de redes sociales en anuncios. Este contenido no suele ser visible de inmediato en el viewport del usuario, pero los usuarios aun así pagan el costo de descargar datos y JavaScript para cada fotograma, incluso si no se desplazan hasta él.
![Permite ahorrar datos gracias a la carga diferida de un iframe. En este ejemplo, la carga inmediata extrae 3 MB, mientras que la carga diferida no extrae este código hasta que el usuario se desplaza más cerca del iframe.](https://web.developers.google.cn/static/articles/iframe-lazy-loading/image/data-savings-using-ifram-721849ff3b329.png?authuser=7&hl=es-419)
Según la investigación de Chrome sobre los iframes de carga diferida fuera de pantalla automáticamente para usuarios de Ahorro de datos de carga diferida de iframes podría ahorrar una mediana de datos del 2% al 3% y del 1% al 2% Reducciones de First Contentful Paint en la mediana y del 2% Mejoras en el retraso de primera entrada (FID) en el percentil 95.
La carga diferida de los iframes fuera de la pantalla también puede mejorar la Procesamiento de imagen con contenido (LCP) Debido a que los iframes a menudo necesitan una cantidad significativa de ancho de banda para cargar todos los subrecursos, los iframes fuera de pantalla pueden reducir la contención del ancho de banda en entornos con restricciones de red lo que deja más ancho de banda para cargar los recursos que contribuyen a la latencia y un LCP.
¿Cómo funciona la carga diferida integrada para iframes?
El atributo loading
permite que un navegador aplace la carga de iframes fuera de pantalla y
hasta que los usuarios se desplacen cerca de ellas. loading
admite dos valores:
lazy
: Es un buen candidato para la carga diferida.eager
: No es un buen candidato para la carga diferida. Cárgalo de inmediato.
El uso del atributo loading
en iframes funciona de la siguiente manera:
<!-- Lazy-load the iframe -->
<iframe src="https://example.com"
loading="lazy"
width="600"
height="400"></iframe>
<!-- Eagerly load the iframe -->
<iframe src="https://example.com"
width="600"
height="400"></iframe>
No especificar el atributo tiene el mismo impacto que cargar con anticipación explícitamente el recurso.
Si necesitas crear iframes de forma dinámica con JavaScript, puedes configurar
iframe.loading = 'lazy'
del elemento también es
compatible:
var iframe = document.createElement('iframe');
iframe.src = 'https://example.com';
iframe.loading = 'lazy';
document.body.appendChild(iframe);
¿Cómo afecta la carga diferida de las incorporaciones de iframe populares a la experiencia del usuario?
Configurar los iframes de carga diferida como predeterminados haría que los sitios web sean mucho más responsivos. En los siguientes ejemplos, se muestran mejoras y datos del tiempo de carga (TTI) de ahorros en incorporaciones de medios, pero la carga diferida de iframes y muchos beneficios más.
YouTube
La carga diferida de las incorporaciones de videos de YouTube ahorra alrededor de 500 KB en la carga inicial de la página:
<iframe src="https://www.youtube.com/embed/YJGCZCaIZkQ"
loading="lazy"
width="560"
height="315"
frameborder="0"
allow="accelerometer; autoplay;
encrypted-media; gyroscope;
picture-in-picture"
allowfullscreen></iframe>
![Chrome.com logró una reducción de 10 segundos en el tiempo de interacción gracias a la carga diferida de iframes fuera de pantalla para su incorporación de video de YouTube](https://web.developers.google.cn/static/articles/iframe-lazy-loading/image/chromecom-achieved-10-s-80c4aa3655294.png?authuser=7&hl=es-419)
Las incorporaciones de Instagram proporcionan un bloque de marcado y una secuencia de comandos que inserta un un iframe en tu página. La carga diferida de este iframe evita tener que cargar todos los de comandos que la incorporación necesita y puede ahorrar alrededor de 100 KB en la carga inicial. Porque estas incorporaciones a menudo se muestran debajo de la vista del puerto en la mayoría de los artículos, este es un y que es razonablemente posible para la carga diferida de iframe.
Spotify
Las incorporaciones de carga diferida de Spotify pueden ahorrar 514 KB en la carga inicial.
<iframe src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3"
loading="lazy"
width="300"
height="380"
frameborder="0"
allowtransparency="true"
allow="encrypted-media"></iframe>
Complementos sociales de Facebook
Los complementos sociales de Facebook permiten que los desarrolladores incorporen contenido de Facebook en sus páginas web. El más popular es el complemento Like, Un botón que muestra a cuántos usuarios les "me gusta" la página. De forma predeterminada, la incorporación el complemento "Me gusta" en una página web que usa el JSSDK de Facebook extrae alrededor de 215 KB de recursos, de los cuales 197 KB corresponde a JavaScript. El complemento suele aparecer al final de artículo o cerca del final de una página, por lo que cargarlo con anticipación cuando está fuera de pantalla puede ser subóptimo.
![Complemento “Me gusta” de Facebook](https://web.developers.google.cn/static/articles/iframe-lazy-loading/image/facebook-button-e0eb339d5d796.png?authuser=7&hl=es-419)
Gracias al ingeniero Stoyan Stefanov, todos los complementos sociales de Facebook ahora
admitir iframe estandarizado
carga diferida
Los desarrolladores que habilitan la carga diferida a través de los complementos data-lazy
de Terraform ahora puede evitar que se carguen estos complementos hasta que el usuario se desplace
cerca. Esto permite que la incorporación siga funcionando para los usuarios que la necesitan, mientras que
ahorrando datos para los usuarios que no se desplazan hasta el final de una página. Tenemos esperanza
Esta es la primera de muchas incorporaciones para explorar la carga diferida de iframe estandarizada.
producción.
Carga diferida de iframe en varios navegadores
La carga diferida de iframe a nivel del navegador es compatible con todos los navegadores principales y se recomienda para la mayoría de los casos de uso, ya que no requiere dependencias adicionales en JavaScript.
Sin embargo, si necesitas admitir más navegadores o quieres tener más control sobre los umbrales de carga diferida, puedes usar una biblioteca de terceros para cargar iframes de carga diferida en tu sitio.
También puedes realizar una carga diferida de iframes fuera de pantalla con la opción lazysizes. Biblioteca JavaScript:
<script src="lazysizes.min.js" async></script>
<iframe frameborder="0"
class="lazyload"
allowfullscreen=""
width="600"
height="400"
data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>
Usa el siguiente patrón para detectar la carga diferida y recuperar tamaños diferidos cuando no está disponible:
<iframe frameborder="0"
class="lazyload"
loading="lazy"
allowfullscreen=""
width="600"
height="400"
data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>
<script>
if ('loading' in HTMLIFrameElement.prototype) {
const iframes = document.querySelectorAll('iframe[loading="lazy"]');
iframes.forEach(iframe => {
iframe.src = iframe.dataset.src;
});
} else {
// Dynamically import the LazySizes library
const script = document.createElement('script');
script.src =
'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js';
document.body.appendChild(script);
}
</script>
¿Hay excepciones a la carga diferida de iframe fuera de pantalla?
Experimento inicial con iframes de carga diferida automática para Ahorro de datos los usuarios de Chrome tenían una excepción de los iframes ocultos, que a menudo se usaban para las comunicaciones o estadísticas. Se impidió que se cargaran de forma diferida y siempre estén cargados para evitar fallas en esas funciones.
El atributo loading
no aplica estas heurísticas, por lo que el desarrollador siempre
elige lo que se carga de forma diferida. El atributo loading
siempre debe ser
respetados, sujetos a límites de distancia y otras opciones del navegador (como imprimir).
Recursos
Para obtener más ideas de carga diferida, consulta web.dev colección de imágenes y videos de carga diferida.
Agradecimientos a Dom Farolino, Scott Little, Houssein Djirdeh, Simon Pieters, Kayce Basques, Joe Medley y Stoyan Stefanov por sus opiniones.