Lazy loading, ou carregamento sob demanda, posterga recursos que ainda estão fora da área visível e os busca quando se aproximam da tela. Em páginas com imagens ou incorporações pesadas, isso pode evitar trabalho desnecessário no início. O efeito depende da implementação, do navegador, da página e das condições da visita; ativar lazy loading em todo elemento não torna automaticamente o site mais rápido.
Para SEO, a regra central é que o conteúdo relevante precisa estar acessível sem depender de uma ação que o Googlebot não fará, como clicar ou rolar a página. O Google recomenda carregar conteúdo quando ele entra na área visível e testar a versão renderizada. O carregamento nativo do navegador pode ser suficiente para imagens e iframes; componentes dinâmicos podem exigir outra estratégia.
Quando usar lazy loading
Adie imagens e incorporações que ficam abaixo da primeira tela e não são necessárias para compreender ou usar imediatamente a página. Isso pode reduzir downloads que talvez nunca sejam vistos, especialmente em páginas longas. O navegador decide quando iniciar o carregamento conforme sua implementação e o contexto; o atributo lazy não significa necessariamente “só carregue depois que a pessoa rolar”.
Em imagens HTML, `loading="lazy"` é a opção nativa mais simples para recursos fora da tela. Navegadores modernos dão suporte ao carregamento nativo e podem aplicar seus próprios limites. Para conteúdo criado por JavaScript, uma técnica como IntersectionObserver pode iniciar a busca quando o elemento se aproxima da área visível. A implementação deve continuar funcionando com teclado, leitor de tela, navegação sem interação e condições em que o script não conclui.
Não adie a imagem principal da página
Evite lazy loading no elemento visual que aparece logo no carregamento, sobretudo quando ele é o maior conteúdo da primeira tela e pode corresponder ao LCP. Se essa imagem for adiada, ela pode começar a carregar tarde justamente quando deveria aparecer. Mantenha o recurso principal facilmente identificável no HTML e investigue prioridade, formato, tamanho e resposta do servidor com dados reais.
Também não confunda `loading="eager"` com prioridade alta: eager evita um adiamento lazy, mas sozinho não diz ao navegador para baixar o recurso antes de outros. Use qualquer ajuste de prioridade apenas para o recurso que os dados apontam como crítico, e confira se a configuração não compete com muitas outras imagens.
Preserve espaço para evitar mudanças de layout
Lazy loading muda o momento de busca do arquivo, mas não reserva automaticamente o espaço que a imagem ocupará. Defina dimensões compatíveis ou uma proporção estável para a mídia, mantenha o espaço do componente e verifique a página durante o carregamento. Sem espaço reservado, o conteúdo abaixo pode saltar quando a imagem chega, afetando a estabilidade visual.
A mesma cautela vale para anúncios, vídeos, mapas e incorporações de terceiros. Uma caixa vazia que só aparece depois pode deslocar títulos, botões e campos. Use um espaço previsível, explique o que será carregado quando necessário e teste a página em celular e desktop.
Lazy loading e conteúdo que o Google precisa encontrar
Carregar um componente apenas depois de um clique ou de uma rolagem pode impedir que mecanismos de busca vejam o conteúdo. Faça com que dados e mídia relevantes estejam disponíveis quando o elemento entra na janela de visualização, sem exigir ação manual. Depois, use a inspeção de URL no Search Console e confira o HTML renderizado para confirmar que texto e endereços das imagens aparecem.
Em imagens, o endereço deve estar presente na marcação renderizada, normalmente no atributo `src` de `menor queimgmaior que` ou `menor quevideomaior que`. Uma imagem de fundo definida apenas por CSS pode ser adequada ao desenho, mas não deve substituir uma imagem de conteúdo importante sem avaliar se o buscador consegue descobrir e compreender o recurso. Use texto alternativo que descreva a imagem quando ela transmitir informação; para decoração, evite acrescentar descrição artificial.
Lazy loading não é o mesmo que rolagem infinita
Postergar uma imagem na página não muda a estrutura das URLs. Rolagem infinita, por outro lado, pode carregar partes adicionais de uma lista ou página. Se a navegação depende de conteúdo dividido em blocos, forneça URLs únicas e persistentes para as partes, links sequenciais entre elas e uma forma consistente de chegar ao mesmo conteúdo. A atualização da URL com o History API pode ajudar a manter compartilhamento e navegação coerentes; não dependa apenas da rolagem para revelar páginas.
Exemplo de aplicação
Uma página de artigo contém fotos ao longo da leitura e uma imagem principal no topo. A equipe adia o carregamento das imagens fora da área inicial, mantém a principal disponível sem atraso e reserva dimensões para evitar deslocamento. Testa conexão lenta, rolagem, leitores de tela e HTML renderizado. A mudança é comparada em modelos distintos antes de ser aplicada ao site inteiro.
Checklist para implementar e testar
- Adie recursos fora da tela que não sejam necessários no início; mantenha a imagem principal e os recursos críticos sem adiamento lazy.
- Prefira carregamento nativo para imagens e iframes quando atender ao caso; use JavaScript adicional apenas quando houver necessidade concreta.
- Reserve as dimensões da mídia e evite mudanças de layout quando o recurso chegar.
- Confirme que imagens e conteúdo aparecem no HTML renderizado sem exigir clique ou rolagem manual.
- Teste páginas representativas em celular, conexão limitada e situações de JavaScript atrasado; observe rede, console e carregamento visual.
- Use a inspeção de URL no Search Console para verificar a renderização de páginas importantes.
- Compare dados de campo e laboratório antes e depois. Faça a mudança em um conjunto controlado de páginas e confira LCP, CLS, comportamento e acessibilidade.
Se o carregamento ficou mais lento, a página pulou ou as imagens desapareceram na versão renderizada, reverta e investigue o componente. Não use uma pontuação isolada de laboratório como prova de impacto em posições. A melhora depende de reduzir um gargalo real sem prejudicar descoberta, apresentação ou interação.
Perguntas frequentes
Lazy loading melhora SEO automaticamente?
Não. Pode evitar o carregamento antecipado de recursos fora da tela, mas uma implementação inadequada pode atrasar a imagem principal ou esconder conteúdo. O benefício precisa ser confirmado no desempenho e na renderização da página.
Devo aplicar loading="lazy" em todas as imagens?
Não. Em geral, reserve o adiamento para imagens fora da área inicial. A imagem que aparece no primeiro carregamento, especialmente se for o LCP, deve ser buscada sem atraso lazy.
O Google consegue rastrear imagens com lazy loading?
Pode conseguir se a implementação revelar o conteúdo quando ele se aproxima da viewport sem depender de interação manual, e se o recurso aparecer no HTML renderizado. Confirme o resultado na inspeção de URL do Search Console.
Preciso de uma biblioteca JavaScript para lazy loading?
Para imagens e iframes, o atributo nativo do navegador costuma atender aos casos comuns. JavaScript é apropriado quando o componente exige lógica específica, desde que a solução seja testada e não condicione a descoberta a uma ação do usuário.
Google Search Central: corrigir conteúdo carregado com lazy loading