Carregamento tardio de iframes
Adie o carregamento de iframes fora da tela com loading=lazy.
Carregamento tardio de iframes é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.
O que é carregamento tardio?
O carregamento tardio adia o carregamento dos recursos até que sejam necessários — quando um elemento está próximo ou dentro da área de visualização. Para iframes, isso significa que o documento incorporado, os seus scripts, CSS e recursos não são baixados até que o usuário role para perto do iframe.
O atributo loading
Adicione loading="lazy" a um iframe: <iframe src="embed.html" loading="lazy">. O navegador determina quando iniciar o carregamento com base na própria heurística (normalmente entre 1000 e 2500 px antes de o iframe entrar na área de visualização). Nenhum JavaScript é necessário.
Impacto no desempenho
Os iframes podem carregar muitos recursos (o YouTube carrega cerca de 500 KB de JavaScript). O carregamento tardio de um vídeo incorporado abaixo da dobra reduz o carregamento inicial da página exatamente nessa quantidade — melhorando diretamente o LCP e o tempo até a interatividade do conteúdo acima da dobra.
loading="eager"
loading="eager" carrega o iframe imediatamente, independentemente da posição. Esse é o comportamento padrão. Adicionar eager explicitamente é útil em contextos que usam lazy por padrão (como estruturas que adicionam o carregamento tardio globalmente), quando um iframe específico precisa ser carregado imediatamente.
Alternativa com IntersectionObserver
Para uma lógica de carregamento tardio complexa (carregamento ao clicar ou com base na qualidade da conexão), use IntersectionObserver: observe o contêiner do iframe e defina src somente quando ele entrar na área de visualização. Isso oferece controle total sobre quando e se o iframe será carregado.
const observer = new IntersectionObserver(entries => {
if (entries[0].isIntersecting) {
iframe.src = iframe.dataset.src;
observer.disconnect();
}
});
observer.observe(iframe);Padrão de fachada
Mostre uma miniatura estática em vez do iframe por padrão. Adicione um botão de reprodução sobreposto. Ao clicar, substitua a miniatura pelo iframe real. O padrão de fachada do YouTube: mostre a imagem em miniatura do vídeo e carregue o iframe somente quando o usuário clicar em reproduzir — economizando o custo total do carregamento da incorporação do YouTube.
Padrão de carregamento ao clicar
Para incorporações de redes sociais (linhas do tempo do Twitter e publicações do Instagram) que carregam muito JavaScript: mostre um botão "Carregar comentários". Ao clicar, injete o iframe. Os usuários que não interagirem nunca pagarão o custo do carregamento. Isso é aprimoramento progressivo para conteúdo social incorporado.
Suporte dos navegadores
loading="lazy" para iframes é compatível com Chrome 77+ e Firefox 121+. O Safari não oferece suporte ao carregamento tardio de iframes (em 2024). Para carregamento tardio entre navegadores, use IntersectionObserver como alternativa confiável — ele funciona em todos os navegadores modernos.
Prevenção de CLS
Reserve espaço para iframes carregados tardiamente com width, height e CSS aspect-ratio explícitos para evitar a mudança cumulativa de layout (CLS). Quando o iframe for carregado e ficar visível, o espaço já estará alocado — nenhum conteúdo ao redor mudará de posição para acomodá-lo.
Rastreamento de análise
Os iframes carregados tardiamente podem afetar a análise: se um iframe de pixel de rastreamento ou de incorporação de análise for carregado tardiamente, talvez não seja executado para usuários que não rolem até ele. Garanta que os iframes essenciais de análise e rastreamento de conversões sejam carregados imediatamente ou estejam acima da dobra.
Combinando carregamento tardio e sandbox
Use lazy e sandbox juntos: <iframe src="embed.html" loading="lazy" sandbox="allow-scripts">. Ambos os atributos funcionam de forma independente — lazy controla quando o iframe é carregado, e sandbox controla o que ele pode fazer. Combine-os para obter uma incorporação de terceiros eficiente e segura.
Verificação de conhecimento
Qual é o padrão de fachada para o carregamento tardio de quadros incorporados?
Resumo
O carregamento tardio de quadros incorporados com loading="lazy" adia o carregamento dos recursos até que estejam próximos da área visível — reduzindo significativamente o carregamento inicial da página em incorporações pesadas. O padrão de fachada e o carregamento ao clicar vão além, carregando o quadro incorporado somente quando o usuário interage com ele. IntersectionObserver oferece controle compatível com vários navegadores para cenários complexos de carregamento tardio. Reserve as dimensões do quadro incorporado para evitar CLS.
Perguntas Frequentes
A aula “Carregamento tardio de iframes” é grátis?
Sim — o texto completo de “Carregamento tardio de iframes” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.
O que vou aprender em “Carregamento tardio de iframes”?
Adie o carregamento de iframes fora da tela com loading=lazy. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar HTML Academy?
Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Carregamento tardio de iframes”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de HTML Academy?
Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- O elemento iframe: src e sandbox
- Segurança de iframe: clickjacking e X-Frame-Options
- Os elementos embed e object
- Carregamento tardio de iframes