Lazy loading de imagens — o que é e como implementar

Imagine uma página de blog com 20 fotos. Sem lazy loading, o navegador baixa todas as 20 imagens assim que a página carrega — mesmo que o usuário só veja as 3 primeiras. Isso desperdiça dados, aumenta o tempo de carregamento e prejudica a experiência.

Com lazy loading, as imagens são carregadas somente quando estão prestes a entrar na área visível da tela (o "viewport"). O resultado: páginas que carregam muito mais rápido.

Por que lazy loading importa

Velocidade inicial: A página carrega mais rápido porque baixa menos dados no início
Core Web Vitals: Melhora o LCP (Largest Contentful Paint) — métrica de SEO do Google
Economia de dados: Usuários que não rolam a página não baixam imagens que nunca verão
Melhor UX em mobile: Crucial em conexões 4G/5G com dados limitados

Implementação nativa — sem JavaScript

Desde 2019, todos os navegadores modernos suportam lazy loading nativo com um único atributo HTML:

<img src="foto-produto.webp" 
     alt="Descrição da imagem"
     loading="lazy"
     width="800" 
     height="600">

Apenas isso já é suficiente para ativar o lazy loading. Simples, sem bibliotecas, sem JavaScript.

💡 Não use loading="lazy" na primeira imagem

A imagem principal acima da dobra (visível sem rolar) deve ter loading="eager" ou simplesmente não ter o atributo loading. Lazy loading nela prejudica o LCP, que é uma métrica importante de SEO.

Código HTML de implementação de lazy loading em editor

A implementação do lazy loading nativo é simples — apenas um atributo no HTML

Sempre defina width e height

Uma causa comum de Cumulative Layout Shift (CLS) — outra métrica do Core Web Vitals — é imagens sem dimensões definidas. O navegador não sabe o espaço a reservar, e quando a imagem carrega, empurra o conteúdo abaixo.

<!-- ❌ Sem dimensões — causa layout shift -->
<img src="foto.webp" alt="..." loading="lazy">

<!-- ✅ Com dimensões — sem layout shift -->
<img src="foto.webp" alt="..." loading="lazy" width="800" height="600">

Checklist completo de imagens para performance

✅ Formato WebP (ou JPG como fallback)
✅ Comprimida com qualidade 75–85%
✅ Dimensionada para o tamanho de exibição
✅ loading="lazy" em todas as imagens abaixo da dobra
✅ loading="eager" ou ausente na imagem principal (LCP)
✅ Atributos width e height definidos
✅ Alt text descritivo
✅ Nome de arquivo com palavras-chave

Resultado de teste de velocidade mostrando melhoria após lazy loading

Sites com lazy loading implementado corretamente melhoram significativamente no Google PageSpeed Insights

Perguntas frequentes

Lazy loading prejudica o SEO?

Não — quando implementado corretamente com o atributo nativo. O Googlebot processa o atributo loading="lazy" e indexa as imagens normalmente.

Preciso de JavaScript para lazy loading?

Não. O atributo loading="lazy" nativo funciona em todos os navegadores modernos sem JavaScript. Bibliotecas como LazyLoad.js só são necessárias para suporte a navegadores muito antigos.

Lazy loading funciona com CSS background-image?

O atributo nativo não funciona com background-image CSS. Para isso, é necessário JavaScript — uma Intersection Observer API detecta quando o elemento entra no viewport e aplica a imagem.

Imagine a blog page with 20 photos. Without lazy loading, the browser downloads all 20 images as soon as the page loads — even if the user only sees the first 3. This wastes data, increases loading time, and hurts the experience.

With lazy loading, images are only loaded when they're about to enter the visible screen area (the "viewport"). The result: pages that load much faster.

Why lazy loading matters

Initial speed: The page loads faster because it downloads less data at the start
Core Web Vitals: Improves LCP (Largest Contentful Paint) — a Google SEO metric
Data savings: Users who don't scroll don't download images they'll never see
Better mobile UX: Crucial on 4G/5G connections with limited data

Native implementation — no JavaScript

Since 2019, all modern browsers support native lazy loading with a single HTML attribute:

<img src="product-photo.webp" 
     alt="Image description"
     loading="lazy"
     width="800" 
     height="600">

That's all you need to activate lazy loading. Simple, no libraries, no JavaScript.

💡 Don't use loading="lazy" on the first image

The main image above the fold (visible without scrolling) should have loading="eager" or simply no loading attribute. Lazy loading on it hurts LCP, which is an important SEO metric.

HTML code implementing lazy loading in editor

Native lazy loading implementation is simple — just one attribute in the HTML

Always define width and height

A common cause of Cumulative Layout Shift (CLS) — another Core Web Vital metric — is images without defined dimensions. The browser doesn't know the space to reserve, and when the image loads, it pushes the content below.

<!-- ❌ No dimensions — causes layout shift -->
<img src="photo.webp" alt="..." loading="lazy">

<!-- ✅ With dimensions — no layout shift -->
<img src="photo.webp" alt="..." loading="lazy" width="800" height="600">

Complete image performance checklist

✅ WebP format (or JPG as fallback)
✅ Compressed at 75–85% quality
✅ Sized to the display dimensions
✅ loading="lazy" on all images below the fold
✅ loading="eager" or absent on the main image (LCP)
✅ width and height attributes defined
✅ Descriptive alt text
✅ Keyword-rich filename

Frequently asked questions

Does lazy loading hurt SEO?

No — when correctly implemented with the native attribute. Googlebot processes the loading="lazy" attribute and indexes images normally.

Do I need JavaScript for lazy loading?

No. The native loading="lazy" attribute works in all modern browsers without JavaScript. Libraries like LazyLoad.js are only needed for very old browser support.

Does lazy loading work with CSS background-image?

The native attribute doesn't work with CSS background-image. For that, JavaScript is needed — an Intersection Observer API detects when the element enters the viewport and applies the image.