Lazy loading pode reduzir downloads iniciais de imagens fora da viewport, mas pode atrasar conteúdo visível.
Antes de começar
Identifique posição de cada imagem e descubra se alguma é o elemento LCP.
Passo a passo
-
Aplique
loading="lazy"a conteúdo abaixo da dobra e mantenha recursos essenciais prontamente acessíveis. -
Teste rolagem, rede lenta e carregamento de imagens próximas da tela.
Limites e cuidados
Não aplique lazy loading indiscriminadamente ao hero ou ao recurso LCP.
Continue na biblioteca
Fonte oficial: Lazy loading de imagens no navegador — web.dev.