Sua página de portfólio tem 30 fotos de projetos entregues. A maioria dos visitantes olha as primeiras 5, gosta do que vê, e já rola até o formulário de contato. Mas o site, por padrão, insiste em carregar as 30 fotos de uma vez — inclusive as 25 que quase ninguém chega a ver — deixando a página lenta justamente no momento em que o visitante mais precisa dela rápida.
Por que carregar tudo de uma vez é ineficiente
Uma página com 20 imagens, mas onde o visitante normalmente só vê as 5 primeiras antes de decidir sair ou converter, desperdiça tempo e dados carregando as outras 15 imagens que talvez nunca sejam vistas.
Como funciona na prática
Com o atributo HTML loading="lazy" em uma tag de imagem, o navegador só inicia o download do arquivo quando ela está prestes a entrar na área visível da tela — de forma nativa, sem necessidade de JavaScript adicional.
Impacto direto no LCP
Ao não competir por banda com imagens fora da tela, o elemento principal visível (LCP, uma das Core Web Vitals) carrega mais rápido — o que melhora tanto a experiência percebida quanto o ranking no Google.
Quando NÃO usar lazy loading
A imagem principal da primeira dobra (a que aparece assim que a página carrega, sem precisar rolar) não deve usar lazy loading — pelo contrário, ela deve ter prioridade alta de carregamento, já que faz parte da primeira impressão do visitante.
Lazy loading além de imagens
A mesma lógica se aplica a vídeos incorporados, iframes (como mapas do Google) e até componentes JavaScript pesados que só são necessários mais abaixo na página.
Como verificar se está funcionando
Nas ferramentas de desenvolvedor do navegador (aba Network), é possível observar que imagens abaixo da dobra só aparecem na lista de download conforme a página é rolada — confirmando que a técnica está ativa corretamente.
As 25 fotos que quase ninguém vê
Elas não precisam sumir do portfólio — só não precisam competir por atenção com as 5 primeiras logo de cara. Ative lazy loading e a página inteira fica mais leve, sem cortar uma imagem sequer.