Quando usar lazy loading em imagens do site

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

1. Aplique loading="lazy" a conteúdo abaixo da dobra e mantenha recursos essenciais prontamente acessíveis.

2. 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.

Conteúdo da biblioteca de Diego Henrich. Confira as fontes citadas e valide orientações que dependem da versão de uma plataforma ou serviço.