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

Indique ao navegador que você quer carregar lentamente um iframe com o atributo loading, da mesma forma que indica o carregamento lento de imagens.

<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 em 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. Em vez disso, ele só é visto quando o usuário rola a página para baixo. Apesar disso, os usuários 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 de 1% a 2% na Primeira exibição de conteúdo e melhorias de 2% na latência na primeira entrada (FID, na sigla em inglês) no 95o percentil.

Além disso, o carregamento lento de iframes fora da tela pode dar benefícios à Maior exibição de conteúdo (LCP, na sigla em inglês). Candidatos a LCP, como imagens ou texto dependentes de fontes da Web para renderizar. Como os iframes geralmente podem exigir uma quantidade significativa de largura de banda para carregar todos os sub-recursos, os iframes fora da tela de carregamento lento podem reduzir significativamente 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 de uma página.

Como funciona o carregamento lento integrado para iframes?

O atributo loading permite que o 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 terá o mesmo impacto que o carregamento explícito do 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);

Qual poderia ser o impacto do carregamento lento de embeddings populares do iframe?

Se a Web mudasse para que os iframes fora da tela de carregamento lento fosse o padrão, o código ficaria assim:

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>

História:quando mudamos para as incorporações do YouTube de carregamento lento no Chrome.com, economizamos 10 segundos da velocidade de interação das nossas páginas em dispositivos móveis. Abri um bug interno com o YouTube para discutir a adição de loading=lazy ao código de incorporação.

Incorporações do Instagram com carregamento lento (economiza cerca de 100 KB comprimido com gzip no carregamento inicial):

As incorporações do Instagram fornecem um bloco de marcação e um script, que injeta um iframe na sua página. O carregamento lento desse iframe evita a necessidade de carregar todo o script necessário para a incorporação. Como essas incorporações costumam ser exibidas abaixo da janela de visualização na maioria dos artigos, isso parece ser uma boa opção para carregamento lento do iframe.

Incorporações do Spotify com carregamento lento (economiza 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>

Embora as incorporações anteriores demonstrem os possíveis benefícios dos iframes de carregamento lento para conteúdo de mídia, há o potencial de também ver esses benefícios para anúncios.

Estudo de caso: carregamento lento de 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. Vários desses plug-ins são oferecidos, como postagens incorporadas, fotos, vídeos, comentários... O mais conhecido é o plug-in "Gostei", um botão que mostra uma contagem de quem marcou a página com "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. Em muitos casos, o plug-in pode aparecer no final de um artigo ou perto do final de uma página. Por isso, carregá-lo rapidamente quando estiver 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 ativarem o carregamento lento na configuração data-lazy dos plug-ins agora poderão evitar o carregamento até que o usuário role por perto. Isso permite que a incorporação funcione plenamente para os usuários que precisam dela, além de economia de dados para quem não estiver rolando a página até o fim. Esperamos que essa seja a primeira de muitas incorporações a testar o carregamento lento de iframe padronizado na produção.

Posso carregar iframes lentamente em vários navegadores? Sim

O carregamento lento do iframe pode ser aplicado como um aprimoramento progressivo. Os navegadores que oferecem suporte a loading=lazy em iframes carregam lentamente o iframe, enquanto o atributo loading é ignorado com segurança em navegadores que ainda não têm suporte a ele.

Também é possível usar o carregamento lento de iframes fora da tela usando a biblioteca JavaScript Lazysizes. Isso pode ser útil se você:

• exigem limites de carregamento lento mais personalizados do que os padronizados atualmente.
• querem 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 lentos 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á instâncias em que iframes fora da tela com loading=lazy ainda estão carregados?

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.

Com o atributo loading, a escolha volta para o desenvolvedor. Portanto, essa heurística não é aplicada e o atributo loading precisa ser sempre respeitado, sujeito a limites de distância e outras opções do navegador (por exemplo, impressão).

Conclusão

Confira a coleção de carregamento lento de imagens e vídeos do site web.dev para conferir ideias de carregamento lento.

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