O que é o carregamento lento (lazy loading)?

O carregamento lento adia o carregamento de uma parte de uma página, como uma imagem ou um iframe incorporado, até essa parte realmente se aproximar da área visível ao rolar. Numa incorporação do YouTube, isso significa que o script do leitor e a pré-visualização da miniatura não carregam no instante em que a página abre, apenas quando o visitante está prestes a vê-la.

Porque importa para incorporações

Um iframe do YouTube é relativamente pesado de carregar. Uma página com várias incorporações (um artigo de blog a analisar cinco vídeos, por exemplo) pode parecer notavelmente mais lenta se todas carregarem imediatamente, razão pela qual o carregamento lento e uma recomendação comum para as Core Web Vitals e a velocidade geral da página.

Como ativa-lo

Os navegadores modernos suportam o atributo nativo loading=”lazy” diretamente num <iframe>, sem necessidade de script extra. O gerador de código de incorporação inclui este atributo por predefinição.

Como funciona o carregamento lento nativo por baixo

Quando um navegador encontra um elemento com loading=”lazy”, não cria um espaço reservado e espera indefinidamente; em vez disso, calcula um limiar de distância aproximado a partir da área visível atual e só começa o pedido de rede real quando o elemento se aproxima desse limiar, tipicamente algumas centenas a mil pixeis antes de se tornar visível, dependendo do navegador e das condições de rede. Isto significa que uma incorporação com carregamento lento contínua a carregar a tempo de estar visível quando o visitante rola até ela, sem pagar o custo de carregamento para incorporações muito mais abaixo na página que um visitante pode nunca chegar a ver.

Um exemplo prático

Um artigo longo a analisar dez produtos, cada um com um vídeo de demonstração incorporado, beneficia enormemente do carregamento lento: sem ele, todos os dez leitores pediriam os seus scripts e miniaturas simultaneamente ao carregar a página; com loading="lazy" acrescentado a cada iframe, só os um ou dois vídeos perto do topo carregam imediatamente, com o resto a carregar progressivamente a medida que o visitante rola para baixo.

Carregamento lento vs. clique para carregar

O carregamento lento e o clique para carregar resolvem um problema semelhante com compromissos diferentes. O carregamento lento acaba por carregar automaticamente cada incorporação assim que o visitante rola perto, o que é simples de implementar (um único atributo HTML) mas não poupa recursos para incorporações que o visitante efetivamente rola até e ve. O clique para carregar vai mais longe, nunca carregando o iframe real até o visitante clicar explicitamente num espaço reservado, o que exige mais trabalho de implementação mas garante zero pedidos para vídeos nunca realmente reproduzidos. Para a maioria dos sites, o carregamento lento nativo, já usado por predefinição no nosso gerador de código de incorporação, oferece o melhor equilibrio entre simplicidade e benefício de desempenho.

Perguntas frequentes