Como usar o atributo loading em imagens para melhorar a perf

Aprenda a usar este atributo pouco conhecido, mas muito poderoso, para melhorar a velocidade de carregamento das suas páginas web.

O atributo loading em imagens

O atributo loading permite que você defina quando uma imagem deve ser carregada na página, otimizando a performance.

O que é o atributo loading?

lazy: Carrega a imagem apenas quando ela está prestes a entrar na visualização do usuário. eager: Carrega a imagem imediatamente.

lazy vs eager

Exemplo de uso

img src='imagem.jpg' loading='lazy' alt="Descrição da imagem">

Como aplicar o loading?

Reduz o tempo de carregamento da página, economiza largura de banda e melhora a experiência do usuário.

Benefícios do loading="lazy"

O loading=lazy é suportado na maioria dos navegadores modernos, como Chrome, Firefox e Edge.

Compatibilidade

Use loading=lazy para imagens abaixo da dobra ou em páginas com muitas imagens para obter o máximo de benefícios.

Melhores práticas

Sempre teste suas páginas para garantir que o atributo loading está funcionando como esperado e monitorar o impacto na performance.

Teste e monitore

Comece a usar o loading=lazy e veja como pequenas mudanças podem ter um grande impacto na performance do seu site.

Otimize suas imagens agora!