É 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 de 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 geralmente não fica imediatamente visível na viewport do usuário, mas os usuários ainda pagam o custo do download de dados e do JavaScript caro para cada frame, mesmo que não rolem até ele.

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%, a reduções de 1 a 2% na pintura de conteúdo inicial (FCP) na mediana e a 2% de melhorias no atraso de primeira entrada (FID) na 95ª 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: 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 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 iframes incorporados populares 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 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

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

Graças ao engenheiro Stoyan Stefanov, todos os plug-ins sociais do Facebook agora oferecem suporte ao carregamento lento de iframes padronizados. 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, salvando dados para os usuários que não rolam até o fim da página. Esperamos que esta seja a primeira de muitas incorporações para explorar o carregamento lento de iframes padronizados na produção.

Quando você quiser ter mais controle sobre o carregamento lento do iframe

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 fazer isso no seu site. A biblioteca JavaScript lazysizes é uma delas e permite outras opções, se necessário.

Existem exceções ao carregamento lento de iframe 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 lentamente, sempre carregado para evitar corromper esses recursos.

O atributo loading não aplica essas heurísticas. Assim, o desenvolvedor sempre escolhe o que será carregado de forma lenta. 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.