Decida o que é necessário agora, não apenas o que aparece cedo no HTML
Lazy loading marca um recurso como não crítico até que seja necessário. Classifique por jornada real: essenciais da primeira tela, mídia abaixo da dobra, embeds opcionais e código para rota ou painel posterior. A posição no CMS não é evidência suficiente; uma imagem pode estar fora da tela em um template e ser central em outro.
Revise cold loads em um telefone pequeno e em um desktop típico. Também teste links de campanha e âncoras na página, que podem levar o visitante mais abaixo. Essa revisão mostra o que precisa estar pronto sem uma solicitação acionada por scroll.
A tarefa inicial, a navegação visível, o texto-chave e o primeiro visual significativo devem estar disponíveis imediatamente.
Galerias mais abaixo na página, mapas, embeds sociais, players fora da tela e código para recursos não escolhidos são candidatos comuns.
Proteja o hero e o viewport inicial
Não aplique lazy loading a conteúdo provável de estar visível quando a página abrir. O Google alerta contra isso, e a análise do web.dev mostra que lazy-loading de imagens no viewport inicial pode atrasar o LCP. O elemento LCP pode ser um hero, imagem de produto, poster ou texto; verifique em cada template importante em vez de adivinhar.
Carregue a imagem confirmada como LCP de forma eager. Se os testes mostrarem que uma imagem crítica perde atenção da rede, teste uma dica de fetch-priority alta para ela. É uma sugestão, não um comando. Uma imagem de fundo crítica em CSS pode precisar de preload precoce porque o parser não a descobre diretamente; meça esse caso.
Verifique padrões do CMS e plugins para imagens destacadas que estejam incorretamente marcadas como lazy em páginas de listagem.
Use carregamentos cold em mobile e desktop, não apenas a pré-visualização de design no desktop.
Reserve espaço antes da mídia chegar
Cumulative Layout Shift (CLS) é o movimento inesperado do conteúdo visível. Uma imagem adiada sem altura conhecida pode empurrar texto e controles depois que o leitor começa a ler ou alcança um botão. Isso é um risco de interação, não apenas uma questão de métricas.
Forneça atributos width e height precisos para imagens e vídeos, ou reserve a forma com CSS aspect-ratio. Use um placeholder com a pegada final do componente. Para um frame de terceiros, reserve sua altura e ofereça um estado claro de carregando ou indisponível.
Armazene dimensões da mídia com o ativo quando possível; uma proporção genérica não é confiável para formatos de imagem mistos.
Role, filtre, abra painéis, rotacione o dispositivo móvel e use a navegação de volta para encontrar deslocamentos tardios.
Mantenha o conteúdo descobrível e as interações compreensíveis
Google Search Central diz que o Google não interage com páginas rolando ou clicando. Conteúdo importante lazy-loaded deve carregar quando visível, e o HTML renderizado deve expor o conteúdo ou URLs de mídia esperados. Inspecione páginas representativas no Search Console após a implementação.
Uma lista infinita indexável precisa de uma rota paginada para cada segmento durável: uma URL única persistente, conteúdo estável nessa URL e links através da sequência. Isso também cria um ponto compartilhável ao qual pessoas podem retornar.
Quando uma ação revela conteúdo, mantenha o controle operável por teclado e torne o resultado compreensível. Para uma atualização significativa não focada, como “resultados carregados”, exponha o status programaticamente para que tecnologias assistivas possam anunciar sem mover o foco.
Detalhes do produto, corpo de artigo, informações de elegibilidade e instruções de tarefa não devem existir apenas após uma ação do visitante.
Não atrase controles obrigatórios de checkout ou autenticação. Tenha revisores qualificados de segurança e conformidade avaliando mudanças em pagamento, identidade e scripts de terceiros.
Use o mecanismo menos frágil
Para imagens e iframes comuns fora da tela, o lazy loading nativo do navegador costuma ser o ponto de partida mais simples. O navegador decide quando iniciar uma solicitação próxima à viewport; essa distância não é garantia. O evento window load pode disparar enquanto recursos lazy ainda estão incompletos.
Use um Intersection Observer quando um componente nomeado precisar de ativação customizada, como montar um painel custoso pouco antes de aparecer. Mantenha o observer estreito e inicie o trabalho cedo o suficiente para rolagem rápida. Use code splitting para rotas não iniciais ou recursos opcionais, não como razão para atrasar a tarefa atual.
Não substitua uma fonte simples por data attributes, vários scripts e uma biblioteca a menos que o comportamento adicional resolva uma necessidade testada.
Um embed opcional deve ter um fallback claro ou estado de omissão, não um spinner permanente.
Meça, libere e remedeie juntos
Compare baseline e candidato nas mesmas URLs, estado de cache, viewport e caminho do usuário. Use testes cold em mobile restrito mais verificações em dispositivos reais quando possível. Registre LCP, sequência visível, layout shifts, erros de mídia, HTML renderizado e ações essenciais. Dados de campo complementam testes de laboratório.
Envie uma mudança reversível e escopada por template. Registre ativos movidos de eager para deferred, referência de deploy, ação em cache, responsável e primeiro passo de rollback. Se o LCP ficar lazy ou um caminho de conversão ficar incompleto, remova a regra desse ativo crítico e verifique novamente. Recheck após mudanças de tema, CMS, serviço de imagem, tag ou embed.
Foque em prevenir e remediar uma experiência quebrada, não apenas em reportar status atual ou alertas.
Reverta a configuração do template afetado antes de retunar cada imagem em todo o site.