Lazy loading é uma técnica que adia o carregamento de recursos não críticos, como imagens e iframes, até que estejam prestes a entrar na tela. Isso reduz o peso inicial da página e acelera a renderização. Aplicado corretamente, melhora a experiência sem esconder conteúdo de buscadores.
O que é lazy loading exatamente?
Segundo a Wikipedia, lazy loading é um padrão de projeto de software que adia a inicialização de um objeto até o ponto em que ele é necessário (Wikipedia, 2026-09-15). Na prática, o navegador só busca a imagem, o iframe ou o script quando o usuário rola até perto daquele elemento. O ganho aparece na primeira dobra: menos requisições competindo por banda e CPU.
Quando usar e quando evitar?
Use em imagens abaixo da dobra, iframes de vídeo, mapas e listas longas. Evite no conteúdo que aparece logo no topo da página, como a imagem principal do artigo ou o logo. Se o elemento é essencial para a primeira impressão, carregue imediatamente. A regra prática: se o usuário vê sem rolar, não aplique lazy loading.
Como implementar com o atributo loading="lazy"
O jeito mais simples é o atributo nativo do HTML. Basta adicionar loading="lazy" na tag <img> ou <iframe>. O navegador decide quando buscar o recurso. Não precisa de JavaScript nem de biblioteca externa. Funciona bem em navegadores modernos, mas verifique o suporte antes de confiar só nisso.
Como implementar com JavaScript (Intersection Observer)
Quando você precisa de controle fino, como carregar um componente React ou um bloco de anúncio, use a API Intersection Observer. Ela observa quando o elemento entra na viewport e dispara o carregamento. Evite o antigo evento scroll com cálculos manuais: ele consome mais CPU e é mais difícil de acertar.
Erros comuns que quebram SEO e usabilidade
O erro mais grave é aplicar lazy loading no conteúdo principal. Se o robô de indexação não executar o JavaScript, a imagem ou o texto pode nunca ser carregado. Outro problema é não definir dimensões (width e height), o que causa saltos de layout e prejudica as Core Web Vitals. Por fim, cuidado com placeholders muito pesados: eles anulam o ganho.
Como testar se está funcionando
Abra o DevTools, vá em Network e recarregue a página. Role devagar e observe se as imagens só aparecem na lista de requisições quando se aproximam da tela. Se todas carregarem de uma vez, o lazy loading não está ativo. Teste também com o JavaScript desabilitado para garantir que o conteúdo essencial continua acessível.
Resumo rápido
Lazy loading adia o carregamento do que não é urgente. Use o atributo nativo para casos simples e Intersection Observer para controle fino. Nunca aplique no que aparece na primeira dobra e sempre defina dimensões. Teste no DevTools antes de publicar.
FAQ
O lazy loading prejudica o SEO?
Não, se feito corretamente. O risco surge quando o conteúdo essencial depende de JavaScript para carregar. Mantenha o conteúdo principal com carregamento imediato e use lazy loading apenas no que está abaixo da dobra. Assim, os robôs indexam tudo sem problema.
Qual a diferença entre lazy loading e carregamento assíncrono?
Lazy loading adia o carregamento até o recurso ser necessário. Carregamento assíncrono permite que o recurso carregue em paralelo, sem bloquear a renderização. São técnicas complementares: você pode usar as duas juntas para otimizar diferentes partes da página.
Preciso de JavaScript para implementar lazy loading?
Não necessariamente. O atributo loading="lazy" do HTML resolve a maioria dos casos de imagens e iframes sem uma linha de JavaScript. O JavaScript, via Intersection Observer, entra quando você precisa de controle sobre o momento exato ou sobre elementos que não são imagens.
O lazy loading funciona em todos os navegadores?
O atributo nativo tem suporte amplo nos navegadores modernos, mas não em versões muito antigas. O Intersection Observer também é bem suportado. Se precisar atender navegadores legados, inclua um fallback que carregue a imagem normalmente quando a API não estiver disponível.
Lazy loading ajuda nas Core Web Vitals?
Ajuda, principalmente no Largest Contentful Paint (LCP) e no Cumulative Layout Shift (CLS). Ao reduzir o peso inicial, a página renderiza mais rápido. Para evitar CLS, sempre defina width e height nas imagens. Sem isso, o layout pode pular e a métrica piora.
Posso aplicar lazy loading em vídeos?
Sim, é um dos casos mais recomendados. Iframes de YouTube e Vimeo pesam bastante. Aplicar lazy loading neles reduz o carregamento inicial. Só não faça isso se o vídeo for o conteúdo principal da página, como em uma página de player dedicada.
Antes de gastar com servidor ou CDN, teste o lazy loading nativo. Em muitos casos, ele resolve o gargalo sem custo extra. Meça no DevTools e compare o tempo de carregamento antes e depois.