O que é LCP e como Imagens Pesadas Prejudicam seu Site
Se você já abriu o Google PageSpeed Insights ou Search Console e se deparou com a sigla 'LCP' em vermelho, sabe que é algo importante — mas talvez não entend...
O que é LCP e como Imagens Pesadas Prejudicam seu Site
Se você já abriu o Google PageSpeed Insights ou Search Console e se deparou com a sigla "LCP" em vermelho, sabe que é algo importante — mas talvez não entenda exatamente o que significa ou por que imagens são tão centrais nessa métrica. Este artigo é um mergulho profundo no LCP: o que é, como o Google mede, por que imagens dominam esse número, e como corrigir o problema de forma prática.
O que é LCP
LCP significa Largest Contentful Paint — em português, "Maior Pintura de Conteúdo". É a métrica que responde à pergunta: quanto tempo o usuário esperou para ver o conteúdo principal da página?
Em termos técnicos, o LCP mede o tempo desde que o usuário inicia a navegação para a página até o momento em que o maior elemento de conteúdo visível na viewport é renderizado na tela.
O Google define "elemento de conteúdo" como:
- Elementos
<img> - Elementos
<image>dentro de SVG - Elementos
<video>com poster - Elementos com imagem de fundo via CSS (
background-image) - Elementos de texto (parágrafos, headings) com tamanho suficiente
Na prática, em mais de 70% das páginas, o elemento de LCP é uma imagem — tipicamente o banner de hero, a foto principal do produto, ou a imagem de capa de um artigo.
Como o Google mede o LCP
O LCP não é medido da mesma forma que a maioria das métricas técnicas. O Google usa dois tipos de dados:
1. Dados de laboratório (Lab Data)
Medições feitas em condições controladas pelo Lighthouse (a ferramenta por trás do PageSpeed Insights). O Lighthouse simula:
- Uma conexão 4G lenta (10 Mbps download, 40ms latência)
- Um dispositivo de mid-range (CPU equivalente a Moto G4)
- Sem cache
Isso representa um usuário típico em condições reais — não seu escritório com fibra e computador top de linha.
2. Dados de campo (Field Data / CrUX)
O Chrome coleta dados reais de usuários reais que visitaram sua página (anonimizados), com suas conexões e dispositivos reais. Esses dados são agregados no Chrome UX Report (CrUX).
O que conta para rankeamento é principalmente os dados de campo (CrUX), coletados nos últimos 28 dias. Mas os dados de laboratório são sua ferramenta de diagnóstico para identificar e corrigir problemas antes que afetem os dados de campo.
Valores de referência do LCP
O Google define três faixas:
| Faixa | LCP | Significado |
|---|---|---|
| Bom | < 2,5 segundos | Site é percebido como rápido |
| Precisa melhorar | 2,5s a 4,0s | Experiência abaixo do ideal |
| Ruim | > 4,0 segundos | Usuários abandonam antes de ver o conteúdo |
Para um site bem otimizado, mirar em LCP < 2,0 segundos é uma meta razoável — deixa margem para variações de rede e ainda mantém o "Bom" em condições adversas.
Por que imagens dominam o LCP
Existem várias razões pelas quais imagens são a causa mais comum de LCP ruim:
Tamanho de arquivo (a causa principal)
Uma imagem de hero de 1,5 MB em uma conexão 4G simulada (10 Mbps) leva 1,2 segundos só para transferir — antes mesmo de ser decodificada e renderizada. Somando latência, conexão TCP, TLS handshake, e processamento do servidor, o LCP facilmente passa de 3 segundos.
A mesma imagem otimizada para WebP com qualidade 82 pode pesar 150 KB — 10x menor — e transferir em 0,12 segundos. Diferença de LCP: quase 1 segundo só nessa etapa.
Descoberta tardia (late discovery)
O browser só descobre que precisa baixar uma imagem quando encontra a tag <img> no HTML. Se o HTML é gerado por JavaScript (sites SPA, React, Angular), a imagem pode não ser descoberta até que o JS execute — o que pode levar 1-3 segundos extras.
Solução: rel="preload" no <head> para a imagem crítica de LCP, ou garantir que a tag <img> esteja no HTML estático (não dependente de JavaScript para renderizar).
Prioridade de download incorreta
Por padrão, browsers priorizam downloads com base na posição no HTML e no tipo de recurso. Imagens, por padrão, têm prioridade média. Se sua imagem de LCP compete com outros recursos de alta prioridade (CSS, JS críticos), ela pode esperar na fila.
Solução: adicionar fetchpriority="high" na imagem de LCP.
Imagens sem dimensões corretas (decode overhead)
Uma imagem de 4.000×3.000px servida num container de 800×600px transfere 25x mais pixels que o necessário. O decode de todos esses pixels extras consome CPU — aumentando o tempo entre o download concluir e a imagem aparecer na tela.
Solução: redimensionar para as dimensões de exibição antes de publicar — o MKT com Marcos — Compressor de Imagens faz isso.
Como diagnosticar o LCP com PageSpeed Insights
Passo a passo
- Acesse pagespeed.web.dev
- Digite a URL da página que quer analisar
- Clique em "Analyze"
- Aguarde 30-60 segundos
O que procurar no relatório
Na seção "Diagnose Performance Issues":
- O elemento de LCP identificado — geralmente com screenshot
- O tempo de LCP medido
- Decomposição do LCP em sub-métricas:
- TTFB (Time to First Byte): tempo até o primeiro byte do HTML chegar
- Resource Load Delay: tempo entre o primeiro byte do HTML e o início do download da imagem de LCP
- Resource Load Duration: tempo de download da imagem
- Element Render Delay: tempo entre o download concluir e a pintura na tela
Se "Resource Load Duration" for alta → o arquivo é muito pesado. Comprima com o compressor de imagens.
Se "Resource Load Delay" for alta → a imagem está sendo descoberta tardiamente. Use rel="preload".
Na seção "Opportunities":
- "Serve images in next-gen formats": use WebP ou AVIF
- "Properly size images": a imagem é muito grande para o container
- "Efficiently encode images": a imagem não foi otimizada
Usando o Lighthouse no Chrome DevTools
Para análise sem publicar a URL (útil para desenvolvimento local):
- Abra a página no Chrome
- F12 → aba "Lighthouse"
- Selecione "Performance" e "Mobile"
- Clique "Analyze page load"
- Procure a seção "LCP" e "Opportunities"
Quanto o LCP afeta o rankeamento
O Google incorporou os Core Web Vitals, incluindo o LCP, como fator de rankeamento de forma progressiva:
- Maio 2021: CWV anunciado como fator de rankeamento
- Agosto 2021: Rollout completo no mobile
- Fevereiro 2022: Expansão para desktop
O impacto no rankeamento é real mas não é o único fator. O Google deixa claro que relevância de conteúdo ainda domina — uma página com conteúdo excelente mas LCP ruim pode ainda rankear bem para termos pouco competitivos.
Mas em nichos competitivos, onde vários sites têm conteúdo de qualidade similar, o LCP pode ser o diferencial entre a posição 3 e a posição 7 — diferença significativa em cliques orgânicos.
Como resolver: o plano de ação
Passo 1: Identifique o elemento de LCP
Use o PageSpeed Insights para descobrir qual elemento é o LCP candidato. Na maioria dos sites, é uma imagem específica — foto de hero, banner, ou imagem principal de um artigo.
Passo 2: Comprima e converta essa imagem
Use o MKT com Marcos — Compressor de Imagens para:
- Converter de JPG/PNG para WebP ou AVIF
- Redimensionar para a largura máxima de exibição (geralmente 1.200-1.920px para heroes)
- Qualidade 80-85 para fotos de hero
- Remover metadados EXIF
Uma imagem de hero típica vai de 800 KB-2 MB para 80-200 KB — redução de 70-90%.
Passo 3: Faça preload da imagem
Adicione ao <head> do seu HTML:
<link rel="preload" as="image" href="/images/hero.webp" fetchpriority="high">
Se usar formatos modernos com fallback:
<link rel="preload" as="image" href="/images/hero.avif"
imagesrcset="/images/hero.avif" type="image/avif">
Passo 4: Adicione fetchpriority na tag img
<img src="/images/hero.webp" alt="Descrição do hero"
width="1200" height="600" fetchpriority="high">
Passo 5: Não use lazy loading no LCP
loading="lazy" em imagens de LCP é um erro frequente — atrasa o download da imagem mais importante da página:
<!-- Errado para o LCP -->
<img src="hero.webp" loading="lazy" alt="...">
<!-- Correto -->
<img src="hero.webp" loading="eager" fetchpriority="high" alt="...">
Outras causas de LCP além de imagens
Embora imagens sejam a causa mais comum, existem outros fatores:
TTFB alto: o servidor demora para responder. Solução: CDN, cache do servidor, servidor mais rápido.
JavaScript bloqueante: JS de terceiros (analytics, chat, ads) executado antes do conteúdo principal. Solução: carregar scripts de terceiros com defer ou async.
CSS bloqueante: CSS de fontes ou frameworks carregado de forma que atrasa o render. Solução: inlining de CSS crítico, carregamento assíncrono de CSS não crítico.
Elementos de texto como LCP: se o maior elemento for texto (heading ou parágrafo), fontes customizadas não carregadas podem atrasar o LCP. Solução: rel="preload" para fontes, font-display: swap.
Monitoramento contínuo do LCP
Corrigir o LCP uma vez não basta — cada nova imagem publicada pode degradar a métrica. Configure um processo de revisão:
- Antes de publicar novas imagens: passe pelo compressor para reduzir tamanho
- Mensalmente: verifique o Search Console → Core Web Vitals → URLs problemáticas
- A cada mudança maior: rode o PageSpeed Insights nas páginas mais importantes
- Para sites de e-commerce: monitore especialmente páginas de categoria e produto, que atualizam frequentemente
Perguntas Frequentes
O LCP mede apenas a imagem principal?
O LCP identifica o maior elemento visível na viewport inicial. Se o maior elemento for um bloco de texto, esse será o LCP. Na maioria dos sites, é uma imagem, mas não é uma regra absoluta.
LCP mede no mobile ou no desktop?
O Google coleta dados para ambos separadamente. Para busca mobile (a maioria do tráfego), o que conta é o LCP mobile. O Lighthouse simula mobile por padrão.
Meu LCP é 3,2s no PageSpeed mas minha internet é super rápida e carrega em 0,5s. Qual acreditar?
O PageSpeed simula condições de usuários reais (4G médio, dispositivo mid-range). Seu carregamento rápido não representa a experiência da maioria dos seus usuários. O PageSpeed está correto.
Posso ter LCP bom sem CDN?
Sim, principalmente se seu servidor está no Brasil e a maioria dos seus usuários também. O CDN ajuda principalmente com TTFB para usuários geograficamente distantes.
Imagem de background CSS conta para LCP?
Sim, se for o maior elemento visível na viewport. Mas backgrounds CSS têm uma desvantagem adicional: não podem usar rel="preload" facilmente. Por isso, heróis com imagem de fundo CSS tendem a ter LCP pior que heróis com <img>.
LCP é medido após interação do usuário?
O LCP para de ser medido quando o usuário interage (clique, scroll, toque). A ideia é capturar o LCP da experiência inicial, antes de qualquer interação.
Conclusão: LCP começa com imagens menores
O LCP é a métrica mais diretamente impactada por imagens — e a mais importante dos Core Web Vitals para SEO. A boa notícia é que o impacto mais significativo vem de uma ação simples: comprimir e converter suas imagens para formatos modernos.
O MKT com Marcos — Compressor de Imagens reduz imagens de 500 KB a 2 MB para 50-200 KB, com qualidade visual indistinguível para o usuário — e diferença de LCP de 1 a 3 segundos mensurável no PageSpeed.
Comece agora: baixe o programa em mktcommarcos.com.br/aplicacoes/compressor-de-imagens, comprima as imagens das suas páginas mais importantes, faça o upload, e teste o novo LCP no PageSpeed Insights.
Marcos Roberto
Consultor de Marketing Digital especializado em Google Ads, SEO e Inteligência Artificial para negócios.
Ver perfil completo →Pronto para Escalar seus Resultados?
Agende uma consultoria gratuita e descubra como o marketing digital estratégico pode transformar o crescimento da sua empresa.