É hora de carregar lentamente iframes fora da tela.

Addy Osmani

Barry Pollard

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

Assim como no carregamento lento de imagens, use o atributo loading para informar ao navegador que você quer fazer o carregamento lento de 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 com carregamento lento:

Por que fazer o carregamento lento de iframes?

Incorporações de terceiros abrangem uma grande variedade de casos de uso, de players de vídeo a postagens de mídias sociais em anúncios. Esse conteúdo muitas vezes não é imediatamente visível em para a janela de visualização do usuário, mas eles ainda pagam o custo de download dos dados JavaScript para cada frame, mesmo que eles não rolem até ele.

Com base na pesquisa do Chrome sobre iframes fora da tela com carregamento lento automático para usuários da Economia de dados, iframes com carregamento lento podem gerar uma economia mediana de 2% a 3%, 1% a 2% Reduções da First Contentful Paint na mediana e 2% Melhorias no First Input Delay (FID, na sigla em inglês) no 95o percentil.

O carregamento lento de iframes fora da tela também pode melhorar a maior qualidade dos Contentful Paint (LCP). Como os iframes geralmente precisam de uma largura de banda significativa para carregar todos os sub-recursos, carregamento lento os iframes fora da tela podem reduzir a contenção de largura de banda em redes com restrição dispositivos, deixando mais largura de banda para carregar recursos que contribuem para a maior parte da ou LCP.

Como funciona o carregamento lento integrado para iframes?

O atributo loading permite que um navegador adie o carregamento de iframes fora da tela e imagens até que os usuários rolem a tela perto delas. loading aceita dois valores:

• lazy: uma boa candidata para carregamento lento.
• eager: não é um bom candidato para carregamento lento. Carregue agora mesmo.

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 rapidamente o recurso.

Se você precisar criar iframes dinamicamente usando JavaScript, definir 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 o carregamento lento de incorporações de iframe comuns afeta 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 e dados do Tempo para interação da página (TTI, na sigla em inglês) de economia para incorporações de mídia, mas os iframes de publicidade com carregamento lento podem gerar resultados benefícios.

YouTube

O carregamento lento das incorporações de vídeos do YouTube economiza cerca de 500 KB no carregamento inicial da 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

Os embeddings do Instagram fornecem um bloco de marcação e um script que injeta uma ou iframe em sua página. O carregamento lento desse iframe evita que você tenha que carregar todos os script que a incorporação precisa e pode economizar cerca de 100 KB no carregamento inicial. Devido ao essas incorporações são frequentemente exibidas abaixo da janela de visualização na maioria dos artigos, um candidato razoável para o carregamento lento de iframe.

Spotify

O carregamento lento das incorporações do Spotify pode 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 aos seus páginas da Web. O mais popular deles é o plug-in Like, um botão que mostra quantos usuários gostaram da página. Por padrão, a incorporação o plug-in "Curtir" de uma página da Web usando o JSSDK do Facebook extrai cerca de 215 KB de recursos, 197 KB dos quais são JavaScript. O plug-in geralmente aparece no final um artigo ou próximo ao final de uma página, portanto, carregá-lo prontamente 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 iframe padronizado carregamento lento. Os desenvolvedores que optarem pelo carregamento lento nos plug-ins data-lazy agora pode impedir o carregamento desses plug-ins até que o usuário role a tela por perto. Isso permite que a incorporação continue funcionando para os usuários que precisam dela, enquanto salvar dados para os usuários que não rolam a página até o fim. Estamos esperançosos esta é a primeira de muitas incorporações a explorar o carregamento lento padronizado de iframe em a produção.

Carregamento lento de iframe entre navegadores

O carregamento lento do iframe no nível do navegador tem suporte em todos os principais navegadores e é recomendado para a maioria dos casos de uso para remover a necessidade de dependências extras no JavaScript.

No entanto, se precisar de compatibilidade com mais navegadores ou quiser ter mais controle sobre os limites de carregamento lento, você poderá usar uma biblioteca de terceiros para fazer o carregamento lento do iframe no seu site.

Também é possível fazer o carregamento lento de iframes fora da tela usando o 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>

Use o seguinte padrão para a detecção de carregamento lento e a busca de Slowsizes quando 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>

Existem exceções ao carregamento lento de iframe fora da tela?

Um experimento inicial com iframes de carregamento lento automático para a Economia de dados usuários no Chrome tinham uma exceção para iframes ocultos, frequentemente usados para comunicações ou análises. Eles foram impedidos de carregar lentamente, sempre carregado para evitar corromper esses recursos.

O atributo loading não aplica essa heurística, então o desenvolvedor sempre pode escolher o que é carregado lentamente. O atributo loading precisa ser sempre honrados, sujeitos a limites de distância e outras escolhas do navegador (como impressão).

Recursos

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

Graças a Dom Farolino, Scott Little, Houssein Djirdeh, Simon Pieters, Kayce Basques, Joe Medley e Stoyan Stefanov pelos comentários.