É hora de carregar lentamente iframes fora da tela.

Addy Osmani

O carregamento lento de elementos <iframe> adia o carregamento de iframes fora da tela até que o usuário role até eles. Isso economiza dados, acelera o carregamento de outras partes da página e reduz o uso da memória.

Assim como no carregamento lento de imagens, use o atributo loading para informar ao navegador que você quer carregar lentamente um iframe.

<iframe src="https://example.com"
        loading="lazy"
        width="600"
        height="400"></iframe>

Esta demonstração de <iframe loading=lazy> mostra incorporações de vídeo de carregamento lento:

Por que usar iframes de carregamento lento?

As incorporações de terceiros abrangem uma grande variedade de casos de uso, desde players de vídeo até postagens de mídias sociais e anúncios. Muitas vezes, esse conteúdo não fica imediatamente visível na janela de visualização do usuário, mas os usuários ainda pagam o custo de download de dados e JavaScript caro para cada frame, mesmo que não rolem até ele.

Com base na pesquisa do Chrome sobre iframes de carregamento lento automaticamente para usuários da Economia de dados, os iframes de carregamento lento podem gerar uma economia média de dados de 2% a 3%, reduções na Primeira exibição de conteúdo e 2% na latência na primeira entrada (FID, na sigla em inglês) no 95o percentil.

O carregamento lento de iframes fora da tela também pode melhorar a Maior exibição de conteúdo (LCP) da sua página. Como os iframes geralmente precisam de uma quantidade significativa de largura de banda para carregar todos os sub-recursos, os iframes de carregamento lento fora da tela podem reduzir a contenção da largura de banda em dispositivos restritos pela rede, deixando mais largura de banda para carregar recursos que contribuem para a LCP da página.

Como funciona o carregamento lento integrado para iframes?

O atributo loading permite que um navegador adie o carregamento de iframes e imagens fora da tela até que os usuários rolem para perto deles. loading é compatível com dois valores:

• lazy: um bom candidato para carregamento lento.
• eager: não é um bom candidato para carregamento lento. Carregue imediatamente.

O uso do atributo loading em iframes funciona da seguinte maneira:

<!-- 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>

Não especificar o atributo tem o mesmo impacto que carregar explicitamente o recurso.

Se você precisa criar iframes dinamicamente usando JavaScript, a configuração de iframe.loading = 'lazy' no elemento também é compatível:

var iframe = document.createElement('iframe');
iframe.src = 'https://example.com';
iframe.loading = 'lazy';
document.body.appendChild(iframe);

Como as incorporações mais usadas de iframe com carregamento lento afetam a experiência do usuário?

Tornar os iframes de carregamento lento o padrão tornaria os sites muito mais responsivos. Os exemplos a seguir mostram melhorias no tempo até a interação (TTI, na sigla em inglês) e a economia de dados para incorporações de mídia, mas iframes de publicidade de carregamento lento podem oferecer benefícios semelhantes.

YouTube

As incorporações de vídeos do YouTube com carregamento lento economiza cerca de 500 KB no carregamento de página inicial:

<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

As incorporações do Instagram fornecem um bloco de marcação e um script que injeta um iframe na página. O carregamento lento desse iframe evita o carregamento de todo o script de que a incorporação precisa e pode economizar cerca de 100 KB no carregamento inicial. Como essas incorporações costumam ser exibidas abaixo da janela de visualização na maioria dos artigos, isso é um candidato razoável ao carregamento lento do iframe.

Spotify

As incorporações do Spotify com carregamento lento podem economizar 514 KB no carregamento inicial.

<iframe src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3"
        loading="lazy"
        width="300"
        height="380"
        frameborder="0"
        allowtransparency="true"
        allow="encrypted-media"></iframe>

Plug-ins sociais do Facebook

Os plug-ins sociais do Facebook permitem que os desenvolvedores incorporem conteúdo do Facebook nas páginas da Web deles. A mais conhecida é o plug-in "Like", um botão que mostra quantos usuários marcaram a página como "Gostei". Por padrão, a incorporação do plug-in "Curtir" em uma página da Web usando o JSSDK do Facebook extrai cerca de 215 KB de recursos, dos quais 197 KB são JavaScript. O plug-in geralmente aparece no final de um artigo ou perto do final de uma página. Portanto, carregá-lo prontamente quando está fora da tela pode não ser o ideal.

Graças ao engenheiro Stoyan Stefanov, todos os plug-ins sociais do Facebook agora são compatíveis com o carregamento lento de iframe padronizado. Os desenvolvedores que ativam o carregamento lento pela configuração data-lazy dos plug-ins agora podem impedir o carregamento desses plug-ins até que o usuário role por perto. Isso permite que a incorporação continue funcionando para os usuários que precisam dela e economiza dados para os usuários que não rolam a página até o fim. Esperamos que esta seja a primeira de muitas incorporações a testar o carregamento lento de iframe padronizado na produção.

Carregamento lento de iframe entre navegadores

Você pode aplicar o carregamento lento de iframe ao seu site como um aprimoramento progressivo. Os navegadores que oferecem suporte a loading=lazy em iframes carregam lentamente o iframe e os que não oferecem suporte ao atributo loading o ignoram.

Você também pode usar o carregamento lento de iframes fora da tela usando a biblioteca JavaScript Slowsizes. Faça isso se você:

• Exigir limites de carregamento lento mais personalizados do que as ofertas padronizadas de carregamento lento.
• Quer oferecer aos usuários uma experiência consistente de carregamento lento de iframe em todos os navegadores.

<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>

Use o seguinte padrão para detectar o carregamento lento e buscar recursos quando ele não estiver disponível:

<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>

Há exceções para o carregamento lento de iframe fora da tela?

Um experimento inicial com iframes de carregamento lento automático para usuários da Economia de dados no Chrome teve uma exceção para iframes ocultos, muitas vezes usados para comunicações ou análises. Eles eram impedidos de carregar lentamente e sempre eram carregados para evitar a quebra desses recursos.

O atributo loading não aplica essas heurísticas. Por isso, o desenvolvedor sempre pode escolher o que é carregado lentamente. O atributo loading precisa sempre ser seguido, sujeito a limites de distância e outras opções do navegador (como impressão).

Recursos

Para ver mais ideias de carregamento lento, consulte a coleção de carregamento lento de imagens e vídeos do web.dev.

Agradecimentos a Dom Farolino, Scott Little, Houssein Djirdeh, Simon Pieters, Kayce Basques, Joe Medley e Stoyan Stefanov pelas avaliações.