É hora de carregar lentamente iframes fora da tela.

Addy Osmani

Barry Pollard

Compatibilidade com navegadores

• 77
• 79
• 121
• 16.4

O carregamento lento de elementos <iframe> adia o carregamento dos iframes fora da tela até que o usuário role a tela perto deles. 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 um iframe de forma lenta.

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

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

Por que carregar iframes com carregamento lento?

As indisponibilidades de terceiros abrangem uma ampla gama 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 do download dos dados e do JavaScript caro para cada frame, mesmo que não rolem até ele.

O carregamento rápido de iframes fora da tela significa que os usuários desperdiçam dados fazendo o download de elementos que talvez nunca vejam.

Com base na pesquisa do Chrome sobre carregar automaticamente iframes fora da tela para usuários do Economizador de dados, o carregamento lento de iframes pode levar a uma economia média de dados de 2 a 3%, reduções de 1 a 2% na First Contentful Paint na mediana e melhorias de 2% no First Input Delay (FID) na percentil 95.

O carregamento lento de iframes fora da tela também pode melhorar a Largest Contentful Paint (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 com carregamento lento fora da tela podem reduzir a contenção de largura de banda em dispositivos restritos de 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 a página até eles. loading aceita dois valores:

• lazy: um bom candidato para o carregamento lento.
• eager: não é um bom candidato para carregamento lento. Carregar 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 o carregamento explícito do recurso.

Se você precisar criar iframes dinamicamente usando JavaScript, a configuração iframe.loading = 'lazy' no elemento também será 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?

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

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>

O Chrome.com reduziu o TTI em 10 segundos com o carregamento lento de incorporações do YouTube fora da tela.

Observação: se você estiver procurando maneiras mais eficientes de carregar incorporações do YouTube, talvez se interesse pelo componente YouTube Lite.

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 que seja necessário carregar todo o script necessário para a incorporação e pode economizar cerca de 100 KB no carregamento inicial. Como essas incorporações geralmente aparecem abaixo da viewport na maioria dos artigos, esse é um candidato razoável para o carregamento lento de iframes.

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 nas páginas da Web. A mais conhecida é o plug-in "Gostei", um botão que mostra quantos usuários marcaram a página com "Gostei". Por padrão, incorporar o plug-in "Curtir" a uma página da Web usando o JSSDK do Facebook extrai cerca de 215 KB de recursos, sendo que 197 KB são JavaScript. O plug-in geralmente aparece no final de um artigo ou perto do final de uma página. Portanto, o carregamento antecipado quando ele está fora da tela pode não ser ideal.

Plugin do Facebook.

Graças ao engenheiro Stoyan Stefanov, todos os plug-ins de redes sociais do Facebook agora são compatíveis com carregamento lento de iframe. Os desenvolvedores que ativarem o carregamento lento na configuração data-lazy dos plug-ins agora poderão impedir o carregamento deles 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 usuários que não rolam a página até o fim. Esperamos que esta seja a primeira de muitas incorporações para explorar o carregamento lento de iframes padronizados na produção.

Quando você quer mais controle sobre o carregamento lento de iframes

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 você precisar oferecer suporte a navegadores mais antigos ou quiser ter mais controle sobre os limites de carregamento lento, use uma biblioteca de terceiros para carregar iframes com carregamento lento no seu site. A biblioteca JavaScript lazysizes é uma delas, e permite outras opções, se necessário.

Há exceções ao carregamento lento de iframes fora da tela?

Um experimento inicial com iframes de carregamento lento automático para usuários do Data Saver no Chrome tinha uma exceção para iframes ocultos, geralmente usados para comunicações ou análises. Eles foram impedidos de carregar de forma lenta e sempre carregados para evitar a quebra desses recursos.

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

Recursos

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

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