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.
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 20 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.
O relatório do PageSpeed Insights aponta o elemento identificado, e o painel de performance do navegador também marca o candidato de LCP na linha do tempo. Em página de produto, na maioria dos casos é a imagem principal do item.
Não. Tempo de carregamento total mede quando todos os recursos terminaram. LCP mede quando o maior conteúdo visível ficou pronto, que é o instante em que o usuário percebe a página como utilizável. Uma página pode continuar carregando itens secundários bem depois de um LCP bom.
Depende de onde e como. Vídeo abaixo da dobra, entregue por CDN e carregado sob demanda, não participa do cálculo do LCP. Vídeo com autoplay no topo da página pode se tornar o candidato de LCP e disputar banda com a imagem principal, o que atrasa a renderização.
A relação não é uma regra fixa e depende do patamar de partida: sair de 6 segundos para 2 segundos em celular tende a ter efeito muito maior do que sair de 2,4 para 2,2. O que se pode afirmar com segurança é que carregamento lento em mobile faz o visitante desistir antes de ver o produto, e essa perda acontece antes de qualquer argumento comercial.
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.
