Checklist de imagens para Core Web Vitals

LCP (Largest Contentful Paint)

• A imagem principal está no HTML como <img>, não inserida por JavaScript.
• Ela tem fetchpriority="high" e não tem loading="lazy".
• Se for um fundo CSS, tem um <link rel="preload">.
• É servida em AVIF (com WebP ou JPEG de fallback em <picture>).
• Suas dimensões se ajustam ao tamanho exibido, com srcset e sizes.

Detalhes em como melhorar o LCP.

CLS (Cumulative Layout Shift)

• Todas as imagens têm width e height (ou aspect-ratio no CSS).
• O CSS usa max-width: 100%; height: auto;.
• Os espaços de anúncios e conteúdos incorporados têm altura reservada.

Peso total

• Nenhuma imagem passa de uns 200 KB sem motivo justificado.
• As fotos usam formatos com perdas; as capturas de tela, WebP sem perdas ou PNG otimizado.
• Logotipos e ícones são SVG sempre que possível, otimizados com SVGO.
• Os metadados EXIF foram removidos.

Carregamento adiado

• As imagens abaixo da primeira tela usam loading="lazy".
• As primeiras 1-4 imagens visíveis não são adiadas.

INP (Interaction to Next Paint)

• Carrosséis e galerias não decodificam imagens enormes ao interagir.
• As imagens têm decoding="async".

Medição

• PageSpeed Insights: dados reais e de laboratório por URL.
• Search Console > Core Web Vitals: problemas agrupados por modelo de página.
• Chrome DevTools > Desempenho: para depurar o LCP passo a passo.
• Auditor de imagens: revisa de uma vez o peso, o formato e os atributos de todas as imagens de uma URL.

Perguntas frequentes

Qual o peso máximo que uma imagem deveria ter?

Não há um número oficial, mas para uma imagem principal 100-200 KB em AVIF ou WebP é uma meta razoável.

As imagens afetam o INP?

Pouco, mas decodificar imagens muito grandes durante uma interação pode bloquear a thread principal.