O que é LCP (Largest Contentful Paint)?
LCP, ou Largest Contentful Paint, é a métrica que mede quanto tempo leva para o maior elemento de conteúdo visível na área inicial da tela terminar de ser renderizado, contado a partir do início do carregamento da página. É uma das Core Web Vitals do Google e representa a percepção de que a página já carregou. O limite para ser considerado bom é 2,5 segundos, entre 2,5 e 4 segundos a página precisa melhorar e acima de 4 segundos o resultado é ruim, sempre avaliado no percentil 75 dos carregamentos reais e separadamente para celular e desktop. Em loja virtual, o elemento de LCP costuma ser a imagem principal do produto ou o banner do topo da home.
O que a métrica observa
Quais elementos podem ser o LCP
O LCP considera apenas elementos de conteúdo visíveis na área inicial da tela: imagens, imagens dentro de SVG, imagem de pôster de vídeo, primeiro quadro de vídeo ou animação, blocos com imagem de fundo e blocos de texto. O maior deles, em área visível, é o candidato.
O elemento pode mudar durante o carregamento. No começo, um título em texto pode ser o maior candidato; quando a foto do produto termina de chegar, ela assume o posto e o LCP passa a ser marcado por ela. A medição fica valendo o último candidato antes da primeira interação do usuário.
Isso tem uma consequência prática direta em e-commerce: na maioria das páginas de produto, o LCP é a imagem principal. Otimizar essa imagem específica costuma render mais que qualquer ajuste genérico de performance, porque age exatamente no elemento que a métrica está cronometrando.
Vale saber também o que não conta: elemento fora da área visível inicial, imagem que ocupa a tela inteira como fundo de página e conteúdo carregado só depois de rolagem ou interação não entram no cálculo.
As quatro partes do tempo de LCP e como reduzir cada uma
O LCP se decompõe em quatro trechos. Saber em qual deles está o tempo evita otimizar a parte errada.
Tempo até o primeiro byte
Quanto o servidor leva para começar a responder. Reduz-se com cache de página, hospedagem adequada, CDN próxima do usuário e menos processamento no backend antes da resposta.
Atraso para o recurso começar a carregar
Intervalo entre a resposta inicial e o início do download da imagem de LCP. Costuma ser causado por imagem descoberta tarde, dentro de script ou de CSS. Declarar a imagem no HTML e pré-carregá-la resolve boa parte.
Tempo de download do recurso
Depende do tamanho do arquivo. Use formato moderno como WebP ou AVIF, sirva a dimensão adequada por breakpoint, comprima de verdade e evite enviar uma imagem de 2000 pixels para uma tela de 400.
Atraso de renderização
Tempo entre o arquivo estar disponível e aparecer na tela. Causas comuns são CSS ou JavaScript bloqueando a renderização e conteúdo que só é montado no navegador. Reduza o caminho crítico e evite depender de script para exibir a imagem principal.
Confirme no dado de campo
Depois das correções, valide no dado de usuário real, não apenas em teste de laboratório. O dado de campo usa janela móvel de 28 dias, então a melhoria aparece de forma gradual.
Lojas com vídeo entregue por CDN
O iShorts roda em mais de 6 mil lojas, com carregamento sob demanda em cada bloco.
Erros que causam LCP alto em loja virtual
Em e-commerce, quase sempre a causa está na imagem principal ou em algo que atrasa a descoberta dela.
Lazy load na imagem principal
Aplicar carregamento sob demanda na imagem do topo atrasa justamente o elemento que a métrica cronometra. Lazy load serve para o que está abaixo da dobra, nunca para o candidato de LCP.
Carrossel com várias imagens no topo
Galeria que baixa cinco fotos em alta antes de mostrar a primeira divide a banda disponível. Carregue o primeiro slide com prioridade e os demais depois.
Imagem servida sem redimensionamento
Arquivo original da câmera reduzido por CSS transfere megabytes desnecessários no celular. Gere versões por breakpoint e sirva a menor que atende à tela.
Banner injetado por aplicativo
Faixa de promoção montada por script de terceiro entra tarde e pode virar o candidato de LCP, com tempo pior. Prefira renderização no HTML da página.
Perguntas frequentes sobre LCP
Até 2,5 segundos no percentil 75 dos carregamentos. Entre 2,5 e 4 segundos a página fica na faixa que precisa melhorar, e acima de 4 segundos é considerada ruim. Os limites valem separadamente para celular e desktop.
Quer vídeo na página sem mexer no LCP?
Demonstração guiada do iShorts, com o bloco de vídeo fora do caminho crítico.
