Os Core Web Vitals são um conjunto de métricas definidas pelo Google para medir a experiência do utilizador numa página web. Desde 2021, estas métricas fazem parte dos sinais de classificação do Google — o que significa que uma má pontuação pode penalizar o seu SEO. As imagens são um dos principais fatores que influenciam estas pontuações, para bem ou para mal.
As três métricas Core Web Vitals
O Google mede três dimensões da experiência do utilizador através dos Core Web Vitals:
| Métrica | O que mede | Limiar "Bom" | Limiar "A melhorar" |
|---|---|---|---|
| LCP (Largest Contentful Paint) | Tempo de carregamento do maior elemento visível | ≤ 2,5 segundos | 2,5 a 4 segundos |
| INP (Interaction to Next Paint) | Capacidade de resposta às interações do utilizador | ≤ 200 ms | 200 a 500 ms |
| CLS (Cumulative Layout Shift) | Estabilidade visual do layout | ≤ 0,1 | 0,1 a 0,25 |
LCP e imagens: a ligação direta
O LCP (Largest Contentful Paint) mede o tempo necessário para apresentar o maior elemento visível na janela do navegador. Na grande maioria das páginas web, este elemento é uma imagem — imagem hero, banner principal, foto de produto. Uma imagem pesada ou mal carregada é portanto diretamente responsável por uma má pontuação LCP.
Para melhorar o LCP relacionado com imagens:
- Usar formatos modernos: WebP e AVIF são significativamente mais leves que JPEG e PNG a qualidade visual equivalente
- Pré-carregar a imagem LCP: adicione uma tag <link rel="preload"> no <head> para forçar o navegador a carregar a imagem hero em prioridade
- Evitar o lazy loading na imagem LCP: nunca aplique loading="lazy" à imagem que será o seu LCP — isso atrasa precisamente o que o Google mede
- Servir imagens a partir de um CDN: a proximidade geográfica do servidor reduz o Time to First Byte (TTFB) que impacta diretamente o LCP
- Dimensionar corretamente as imagens: nunca sirva uma imagem de 3000px de largura para uma visualização de 800px
Bom saber: pode identificar qual imagem constitui o seu LCP através das ferramentas PageSpeed Insights ou Chrome DevTools (separador Desempenho → clique no marcador LCP). Esta identificação é o primeiro passo indispensável antes de qualquer otimização.
CLS e imagens: os deslocamentos de layout
O CLS (Cumulative Layout Shift) mede os deslocamentos inesperados do layout durante o carregamento. Imagens sem dimensões definidas são uma das causas mais frequentes de uma má pontuação CLS: o navegador não conhece o tamanho da imagem antes de ser carregada, provocando um "salto" da página quando aparece.
A solução é simples e universal: especifique sempre os atributos width e height nas tags img. Isto permite ao navegador reservar o espaço exato necessário antes mesmo de a imagem ser transferida.
INP e imagens: um impacto indireto
O INP (Interaction to Next Paint) mede a capacidade de resposta da página às interações do utilizador (cliques, entradas). As imagens não impactam diretamente o INP, mas imagens muito pesadas que monopolizam o thread principal do navegador podem indiretamente degradar esta métrica ao bloquear o processamento de eventos JavaScript.
A descodificação de imagens volumosas (PNG de vários megabytes, TIFF de alta resolução) pode provocar bloqueios do thread principal. O atributo decoding="async" permite diferir esta descodificação para não bloquear as interações.
Boas práticas de imagens para os Core Web Vitals
- Formato: utilize WebP ou AVIF para todas as imagens de conteúdo
- Dimensões: especifique sempre width e height em todas as tags img
- Lazy loading: utilize loading="lazy" em todas as imagens fora do ecrã, exceto a imagem LCP
- Preload: pré-carregue apenas a imagem LCP com <link rel="preload" as="image">
- Imagens responsive: utilize o atributo srcset para servir o tamanho adequado a cada resolução de ecrã
- Compressão: comprima todas as imagens com uma ferramenta como Squoosh, Sharp ou ImageMagick antes de as publicar
- CDN: aloje as suas imagens num CDN para reduzir a latência de carregamento geográfico
Bom saber: o Google PageSpeed Insights e o Lighthouse são as ferramentas de referência para medir os seus Core Web Vitals e identificar imagens problemáticas. A Google Search Console também disponibiliza um relatório de Core Web Vitals baseado em dados reais dos seus visitantes (CrUX — Chrome User Experience Report), mais fiável do que os testes de laboratório para avaliar a experiência real dos seus utilizadores.