Imagens mal otimizadas são a causa mais comum de LCP ruim em sites modernos. A otimização de imagens para LCP envolve três frentes complementares: formato de arquivo, estratégia de carregamento e infraestrutura de entrega. Ignorar qualquer uma delas costuma anular o esforço nas outras duas.
LCP (Largest Contentful Paint) é a métrica do Core Web Vitals que mede o tempo até o maior elemento visível da tela ser renderizado, geralmente uma imagem de destaque, banner ou foto de produto. Segundo dados do Google, um LCP acima de 2,5 segundos já é classificado como “precisa de melhoria”, e a maioria dos sites com essa classificação tem imagens pesadas ou mal carregadas como principal gargalo.
Por que imagens derrubam o LCP?
Uma imagem afeta o LCP de duas formas: pelo peso do arquivo (tempo de download) e pela forma como é carregada (prioridade e ordem de renderização). Um banner de 3MB em JPEG, carregado sem prioridade e sem CDN próxima do usuário, pode sozinho comprometer toda a pontuação de performance da página.
A boa notícia é que essas três variáveis (formato, carregamento, entrega) são resolvidas com técnicas relativamente simples e sem exigir reescrita da aplicação.
AVIF é sempre a melhor escolha de formato?
Na maioria dos casos, sim, mas com ressalvas. AVIF é um formato de imagem baseado no codec AV1 que costuma gerar arquivos menores que JPEG e WebP mantendo qualidade visual comparável. A diferença de peso é mais evidente em fotos com muitos detalhes e gradientes.
| Critério | JPEG | WebP | AVIF |
|---|---|---|---|
| Compressão | Boa | Melhor que JPEG | Melhor que WebP na maioria dos casos |
| Suporte em navegadores | Universal | Amplo | Amplo, com exceções em versões antigas |
| Tempo de codificação | Rápido | Rápido | Mais lento |
| Indicado para | Compatibilidade máxima | Uso geral | Imagens grandes, hero images, banners |
Na prática, o ideal é servir AVIF como primeira opção e manter WebP ou JPEG como fallback, usando a tag picture:
html
<picture>
<source srcset="/banner.avif" type="image/avif">
<source srcset="/banner.webp" type="image/webp">
<img src="/banner.jpg" alt="Banner principal do site" width="1200" height="600">
</picture>Em projetos Next.js com WordPress headless, esse trabalho pode ser automatizado pelo componente next/image, que já gera AVIF e WebP a partir do arquivo original.
Lazy loading ajuda ou atrapalha o LCP?
Depende de qual imagem recebe o atributo. Lazy loading adia o carregamento de imagens fora da área visível inicial, o que é ótimo para performance geral, mas é um erro comum aplicá-lo também na imagem que forma o LCP.
A regra prática é simples:
- Imagem do LCP (geralmente acima da dobra): carregamento imediato e com prioridade alta
- Demais imagens da página: lazy loading
html
<img src="/hero.avif" alt="Imagem principal" fetchpriority="high" loading="eager">
<img src="/produto-2.avif" alt="Produto relacionado" loading="lazy">Aplicar loading="lazy" na imagem errada é uma das causas mais frequentes de LCP alto em sites que já usam formatos modernos, porque o navegador atrasa justamente o elemento que a métrica está medindo.
Qual o papel da CDN na otimização de imagens para LCP?
Uma CDN (Content Delivery Network) distribui cópias das imagens em servidores próximos geograficamente do usuário, reduzindo a latência de download. Sem CDN, um usuário no Brasil acessando um servidor de origem em outro continente pode esperar centenas de milissegundos só na conexão, antes mesmo do download começar.
Além da distância física, uma CDN de imagens costuma oferecer:
- Conversão automática de formato conforme o navegador do usuário
- Redimensionamento sob demanda para diferentes breakpoints
- Cache de longa duração, reduzindo requisições repetidas
Essa combinação (formato adequado, prioridade correta e entrega próxima do usuário) é o que sustenta um LCP consistentemente baixo, inclusive em conexões móveis mais lentas, comuns entre boa parte dos usuários brasileiros.
Perguntas frequentes
AVIF funciona em todos os navegadores?
Não em 100% dos casos, mas o suporte é amplo nos navegadores modernos. Por isso o uso da tag picture com fallback para WebP ou JPEG é recomendado, garantindo compatibilidade sem abrir mão do ganho de performance.
Posso usar lazy loading em todas as imagens para simplificar o código?
Não é recomendado. A imagem que compõe o LCP deve carregar com prioridade alta, sem lazy loading. Aplicar lazy loading nela costuma piorar diretamente a métrica.
Trocar apenas o formato de imagem já resolve o LCP?
Normalmente não sozinho. O formato reduz o peso do arquivo, mas se a imagem estiver com prioridade errada ou sendo servida de um servidor distante do usuário, o ganho é parcial. As três frentes juntas (formato, carregamento e CDN) costumam trazer o resultado mais consistente.
Como priorizar essas melhorias no seu site
Nem todo site precisa implementar as três frentes ao mesmo tempo. Uma auditoria de performance ajuda a identificar qual delas está causando mais impacto no seu caso específico, evitando esforço em otimizações que trarão pouco ganho real.
Seu site está lento e isso está custando clientes? A RANK#1 desenvolve sites Next.js de alta performance que carregam em segundos e ranqueiam desde o primeiro dia. Peça um diagnóstico grátis.
RANK#1 — Sites rápidos, bonitos e que ranqueiam desde o primeiro dia