Velocidade
Lazy Loading: Como Adiar Imagens sem Atrasar o Site
O que é lazy loading, como o carregamento adiado de imagens e vídeos acelera a página e o erro comum que piora o LCP em vez de melhorar.
Resumo Rápido
- Lazy loading é adiar o carregamento de imagens e vídeos até a pessoa rolar a página perto deles.
- Bem usado, deixa a primeira tela mais rápida e economiza dados de quem visita.
- Mal usado, na imagem de destaque, piora o LCP. A regra é: adiado só o que está abaixo da primeira tela.
O Que É Lazy Loading
Por padrão, o navegador baixa todas as imagens da página assim que pode, inclusive as que estão no rodapé. Com lazy loading, ou carregamento adiado, as imagens fora da tela só são baixadas quando a pessoa rola até perto delas. A página inicial fica mais leve, e quem não rola até o fim não gasta dados com imagens que não viu.
Hoje, os navegadores fazem isso com um atributo simples:
<img src="/fotos/galeria-3.webp" width="800" height="600"
alt="Sala após a limpeza do sofá" loading="lazy">O Erro que Piora o Site
Muitos temas e plugins aplicam o lazy em todas as imagens, inclusive na imagem de destaque do topo. Aí acontece o contrário do esperado: o navegador espera a página ser montada para descobrir que precisa daquela imagem, e o LCP piora.
Nunca na Primeira Tela
A imagem de destaque, o logotipo e qualquer imagem visível sem rolar não devem ter loading="lazy". A de destaque pode até ganhar fetchpriority="high".
Como Usar do Jeito Certo
- Imagens abaixo da primeira tela:
loading="lazy". - Imagem de destaque do topo: sem lazy, e com prioridade alta.
- Toda imagem com
widtheheight, para reservar o espaço e não causar CLS. - Vídeos e mapas incorporados, como YouTube e Google Maps, também adiados.
- Imagens em formatos leves. Veja imagens em WebP e AVIF.
Iframes
Vídeos do YouTube e mapas são iframes, que carregam uma página inteira dentro da sua. O mesmo atributo funciona neles:
<iframe src="https://www.youtube.com/embed/ID_DO_VIDEO" loading="lazy"
width="560" height="315" title="Como funciona a limpeza de sofá"></iframe>Uma opção ainda mais leve é mostrar só a miniatura do vídeo e carregar o player quando a pessoa tocar.
No WordPress e nas Plataformas
- O WordPress aplica lazy automaticamente nas imagens do conteúdo e, nas versões recentes, tenta deixar de fora a primeira imagem. Confira na sua página.
- Plugins de otimização têm a opção de excluir as primeiras imagens do lazy. Use.
- Construtores de página costumam ter a configuração por imagem ou por seção.
- Nas lojas prontas, o tema decide. Se o banner do topo estiver adiado, procure a opção no tema ou fale com o suporte.
O Google Vê as Imagens Adiadas?
Sim, quando o lazy é feito com o atributo nativo do navegador ou com bibliotecas que colocam o endereço da imagem no HTML. O Google renderiza a página com uma tela alta e carrega as imagens. O risco está em soluções antigas que só carregam a imagem depois de um evento de rolagem, que o Google não executa. Na dúvida, confira a página com o teste ao vivo da Inspeção de URL.
Perguntas Frequentes
Lazy loading melhora a nota do PageSpeed?
Ajuda quando a página tem muitas imagens abaixo da primeira tela. Na imagem de destaque, piora. O PageSpeed avisa quando a imagem do LCP está adiada.
Preciso de plugin para lazy loading?
Na maioria dos casos, não. O atributo nativo resolve. Plugins ajudam a controlar exceções.
Lazy loading em imagens de fundo funciona?
O atributo não vale para imagens de fundo definidas no CSS. Para elas, a melhor saída é usar uma tag de imagem quando possível.
Equipe IndexaJá
Escrito pela equipe do IndexaJá, que audita e otimiza sites para o Google com a meta de 100 em todo site. Publicado em 21 de outubro de 2026.