Es hora de realizar una carga diferida de iframes fuera de pantalla.

Addy Osmani

Barry Pollard

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.

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>

Instagram

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.

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.