O que é Lazy Loading?
Lazy loading, traduzido como carregamento preguiçoso ou carregamento sob demanda, é a técnica que adia o carregamento de imagens, vídeos e blocos de conteúdo até que eles estejam prestes a entrar na área visível da tela. O navegador baixa primeiro o que o visitante vai ver e deixa o resto para depois.
A lógica vem de um desperdício comum. Uma página longa pode ter trinta imagens, e o visitante enxerga três ao abrir. Sem lazy loading, o navegador baixa as trinta de uma vez, disputando banda com o conteúdo que já está na tela.
O ganho aparece em dois lugares. A página fica pronta antes, porque há menos coisa para baixar no início. E o visitante em plano de dados móvel gasta menos, já que só é baixado o que ele realmente percorre. Em sites longos, boa parte das imagens do rodapé nunca chega a ser carregada.
Como funciona na prática?
O mecanismo tem três partes:
- Marcação do elemento: a imagem entra no HTML com o atributo que sinaliza o adiamento. Nos navegadores atuais, o atributo
loading="lazy"resolve o caso das imagens de forma nativa, sem biblioteca externa. - Observação da rolagem: o navegador acompanha a posição do elemento em relação à tela e dispara o download quando ele se aproxima da área visível, com uma margem de antecedência.
- Substituição: o espaço reservado dá lugar à imagem carregada. Reservar as dimensões corretas desde o início evita que o conteúdo pule na tela quando a imagem chega.
O detalhe que separa uma boa implementação de uma ruim é o escopo. Imagens da primeira dobra, o logotipo e o banner principal precisam carregar imediatamente. Aplicar lazy loading nelas atrasa justamente o que o visitante espera ver, e piora a métrica de maior elemento visível.
Lazy loading vs Eager loading: qual a diferença?
| Aspecto | Lazy loading | Eager loading (carregamento imediato) |
|---|---|---|
| Momento do download | Quando o elemento se aproxima da tela | No carregamento inicial da página |
| Efeito na abertura | Página inicial mais leve e rápida | Página inicial mais pesada |
| Onde aplicar | Conteúdo abaixo da dobra | Banner principal, logotipo, primeira dobra |
| Risco | Espaço em branco durante a rolagem rápida | Concorrência de banda no início |
Veredito: use carregamento imediato no que aparece na primeira tela e lazy loading em todo o resto; a divisão importa mais do que a técnica em si.
Exemplos de uso
- Uma loja virtual com página de categoria exibindo 60 produtos aplica lazy loading nas miniaturas; o navegador baixa as primeiras oito e as demais entram conforme o visitante rola.
- Um blog com posts longos e muitas ilustrações reduz o peso inicial da página, e a maior parte das imagens do fim do artigo nunca é baixada por quem lê só o começo.
- Um site institucional troca o vídeo do YouTube incorporado por uma miniatura clicável, carregando o player só quando alguém clica em reproduzir.
Erros comuns
- Aplicar lazy loading na imagem principal da primeira dobra, atrasando o elemento que o visitante espera ver e piorando as métricas de carregamento.
- Não reservar as dimensões do espaço da imagem, o que faz o conteúdo saltar quando ela carrega e atrapalha a leitura.
- Depender de biblioteca JavaScript pesada para algo que o atributo nativo do navegador já resolve.
- Aplicar lazy loading em imagens dentro de galerias e carrosséis sem testar o comportamento durante a navegação rápida.
- Presumir que o plugin de otimização configurou tudo corretamente, sem conferir o resultado com uma ferramenta de medição.
Perguntas frequentes sobre Lazy Loading
Lazy loading atrapalha o SEO?
A implementação nativa dos navegadores é reconhecida pelo Googlebot, que consegue indexar imagens carregadas dessa forma. O risco aparece em implementações caseiras que escondem o endereço real da imagem atrás de JavaScript complexo. Usando o atributo nativo e mantendo o src correto, o conteúdo continua visível para o buscador.
Preciso de plugin para ativar lazy loading?
Não necessariamente. Os navegadores atuais suportam o atributo loading="lazy" diretamente no HTML, e muitos CMS já o aplicam por padrão nas imagens do conteúdo. Plugins entram quando você quer controle sobre exceções, aplicar a técnica a vídeos e iframes ou combinar o recurso com compressão de imagens.
Lazy loading serve para vídeo e iframe?
Serve, e o ganho costuma ser maior que nas imagens. Um vídeo incorporado carrega o player inteiro, com scripts e arquivos do serviço externo, mesmo quando ninguém aperta play. Trocar o incorporado por uma miniatura que só carrega o player ao clique elimina esse peso da abertura da página.