Carregamento tardio de imagens loading=lazy

<img loading="lazy" src="..."> informa ao navegador que deve adiar o download da imagem até que ela esteja prestes a entrar na janela de visualização. O suporte nativo em todos os navegadores modernos torna essa a maneira mais simples de obter um ganho de desempenho em páginas com muitas imagens.

Os navegadores usam uma pequena margem heurística, geralmente alguns milhares de pixels abaixo da dobra. A imagem começa a carregar com antecedência suficiente para estar totalmente renderizada quando o usuário rolar até ela — o carregamento lento é imperceptível para quem rola a página com atenção.

Nunca defina loading="lazy" em imagens acima da dobra ou na imagem candidata a LCP (maior pintura de conteúdo). O carregamento adiado atrasa o elemento visual mais importante, prejudicando tanto a velocidade percebida quanto as métricas essenciais da Web.

Para que o carregamento lento seja eficaz, atribua ao <img> valores explícitos de width e height (ou use a propriedade CSS aspect-ratio). Sem dimensões, o navegador não consegue reservar espaço, a rolagem faz o layout ser recalculado e a heurística de carregamento lento não funciona corretamente.

O mesmo atributo funciona em <iframe>. <iframe loading="lazy"> adia o carregamento de mapas, vídeos e incorporações de redes sociais abaixo da dobra — cada um deles, caso contrário, carregaria megabytes de JavaScript de terceiros a cada visualização da página.

O valor padrão é loading="eager" (carregar imediatamente) e raramente é escrito de forma explícita. Definir eager em imagens acima da dobra pode ser útil como documentação, indicando aos revisores que essa escolha foi deliberada.

O carregamento lento combina perfeitamente com imagens responsivas. O navegador continua escolhendo a opção adequada em srcset; apenas adia a transferência. Não é necessária nenhuma coordenação adicional entre loading="lazy" e srcset.

Combine o carregamento lento com decoding="async" para permitir que o navegador decodifique a imagem fora da thread principal. Isso evita bloquear a entrada durante a rolagem quando muitas imagens chegam simultaneamente após uma longa sequência de rolagem.

background-image do CSS não pode ser carregado lentamente de forma nativa. Para planos de fundo hero acima da dobra, isso não é um problema; para planos de fundo abaixo da dobra, use IntersectionObserver para inserir o endereço quando o elemento se aproximar da janela de visualização.

Quando a página é impressa, o navegador carrega imediatamente todas as imagens, independentemente de loading="lazy", para que a cópia impressa fique completa. Não é necessário tratar imagens com carregamento lento de forma especial nas folhas de estilo para impressão.

A auditoria “Adiar imagens fora da tela” do Lighthouse lista todas as imagens que deveriam usar loading="lazy". Filtrar o painel de rede por “Imagem” e usar a visualização “Cascata” mostra os carregamentos escalonados produzidos pelo carregamento lento — as solicitações iniciais diminuem drasticamente em galerias de imagens.

Por que é prejudicial definir loading="lazy" em uma imagem hero no topo da página?

Usar loading="lazy" em elementos <img> e <iframe> fora da tela é um ganho de desempenho obtido com um único atributo. Combine-o com width/height explícitos (para reservar espaço), srcset (para obter responsividade) e decoding="async" (para manter a rolagem fluida). Nunca o aplique à imagem LCP nem a qualquer elemento visível na janela de visualização inicial.