Lazy loading adia um recurso não crítico até ele ser necessário, reduzindo o trabalho inicial quando o conteúdo adiado continua descobrível, utilizável e disponível para os rastreadores.
Escolha o que pode esperar
O lazy loading é adequado para conteúdo bem abaixo da área inicial visível, como imagens de galerias inferiores, embeds ou miniaturas de listas longas. É uma má escolha padrão para uma imagem de destaque, uma foto de produto que o comprador precisa ver de imediato, o maior elemento de conteúdo (LCP) ou um componente necessário para a navegação por teclado. Adiar um recurso acima da dobra pode atrasar justamente o momento em que a página se torna útil.
Faça um inventário da área inicial visível nas larguras comuns de celular e desktop. Identifique o provável candidato a LCP antes de adicionar atributos de carregamento. Use width e height explícitos ou uma proporção reservada equivalente, para que as imagens não empurrem o texto quando chegarem.
Use marcação robusta
Para imagens comuns, o atributo nativo loading="lazy" do navegador costuma bastar. Mantenha um valor significativo em alt para mídias informativas, alt vazio apenas em elementos decorativos e uma fonte de imagem real que continue disponível sem um script disparado pela rolagem. Para imagens responsivas, forneça srcset e sizes adequados, para que o navegador não baixe, por padrão, um recurso maior do que o necessário.
Não coloque links, títulos ou informações essenciais de produto apenas dentro de um componente de lazy loading no lado do cliente. Um rastreador e um usuário sem a execução bem-sucedida de script ainda devem encontrar o conteúdo principal da página. Intersection observers podem ser úteis para widgets especializados, mas acrescentam pontos de falha que a marcação nativa evita.
Teste o limite da janela de visualização
Use um teste de celular com conexão limitada e um carregamento normal de navegador. Verifique se a imagem principal começa rapidamente, se a mídia abaixo da dobra é adiada e se a rolagem revela cada recurso sem placeholders vazios ou deslocamentos de layout. Inspecione o DOM e a cascata de requisições: uma imagem marcada como lazy, mas buscada imediatamente, pode estar próxima da janela de visualização; uma imagem buscada tarde demais pode ter sido adiada de forma agressiva demais.
Em um artigo com diagrama depois da introdução, o lazy loading pode ser razoável se o diagrama não for o elemento LCP e suas dimensões estiverem reservadas. Em uma página de produto, a imagem principal do produto normalmente é uma má candidata, porque é central na primeira decisão.
Limites e verificação
Um número menor de requisições iniciais não prova, por si só, uma página mais rápida ou melhor. Meça separadamente a resposta do documento, o LCP, a estabilidade do layout e a interação. Revise o HTML renderizado e uma amostra das URLs rastreadas depois de mudanças no template, para que a mídia adiada mantenha o texto alternativo pretendido, o contexto da URL canônica e os links internos.