LCP (Largest Contentful Paint)

    LCP, sigla de Largest Contentful Paint, é uma métrica que mede quanto tempo demora para o principal conteúdo visível de uma página aparecer na tela.

    Ela faz parte das Core Web Vitals e ajuda a avaliar a experiência de carregamento percebida pelo usuário. Em vez de medir apenas quando a página começa a mostrar algo, o LCP observa quando o maior elemento visível é renderizado.

    O que o LCP mede?

    O LCP começa a ser contado quando o usuário acessa a página e termina quando o maior elemento de conteúdo aparece na área visível da tela.

    Esse elemento pode ser:

    • uma imagem;
    • um bloco de texto;
    • a imagem de capa de um vídeo;
    • uma imagem de fundo carregada pelo CSS;
    • uma imagem inserida dentro de um elemento SVG.

    Na prática, o elemento medido pode ser a imagem principal de um artigo, o título de uma página, um banner ou a apresentação principal de uma página de vendas.

    O LCP considera apenas o conteúdo visível antes de o usuário começar a rolar a página. Por isso, imagens e textos localizados mais abaixo normalmente não são usados como o principal elemento da medição inicial.

    Qual é um bom resultado de LCP?

    As faixas recomendadas são:

    • até 2,5 segundos: bom;
    • acima de 2,5 até 4 segundos: precisa melhorar;
    • acima de 4 segundos: ruim.

    Para uma avaliação adequada, o resultado deve estar dentro da faixa boa em pelo menos 75% das visitas, considerando separadamente usuários de celulares e computadores.

    Isso significa que um único teste rápido não apresenta toda a realidade. A experiência pode variar conforme o aparelho, a conexão, a localização do visitante e a velocidade do servidor.

    LCP e FCP são a mesma coisa?

    Não.

    O FCP, ou First Contentful Paint, mede quando o primeiro conteúdo aparece na tela. Pode ser um texto pequeno, um ícone ou parte do cabeçalho.

    O LCP busca identificar quando o maior conteúdo visível foi apresentado.

    Exemplo:

    1. O fundo da página aparece.
    2. O menu é carregado.
    3. Um pequeno texto fica visível.
    4. A imagem principal do artigo finalmente aparece.

    O FCP pode ser registrado no terceiro momento. O LCP provavelmente será registrado no quarto, quando o elemento principal estiver visível.

    Por isso, uma página pode começar a mostrar conteúdo rapidamente e ainda apresentar um LCP ruim.

    O que pode deixar o LCP lento?

    O tempo total do LCP pode ser dividido em quatro partes principais:

    Resposta inicial do servidor

    O navegador precisa receber o código inicial da página antes de começar a exibir o conteúdo.

    Uma hospedagem lenta, muitos redirecionamentos, processamento excessivo ou falta de cache podem aumentar o tempo até o primeiro byte, conhecido como TTFB.

    Atraso para encontrar o recurso

    Mesmo depois de receber a página, o navegador pode demorar para descobrir qual imagem, fonte ou arquivo precisa carregar.

    Isso acontece quando o elemento principal depende de JavaScript, está escondido em um arquivo CSS ou não aparece diretamente no código HTML inicial.

    Tempo para carregar o recurso

    Uma imagem grande ou um arquivo hospedado longe do usuário pode demorar para ser transferido.

    O tamanho do arquivo, a qualidade da conexão, a localização do servidor e a quantidade de recursos carregados ao mesmo tempo influenciam esse período.

    Atraso para renderizar o elemento

    O recurso pode ter terminado de carregar, mas continuar invisível porque o navegador está processando CSS, JavaScript, fontes ou outras tarefas.

    Nesse caso, reduzir apenas o tamanho da imagem talvez não resolva o problema. O navegador também precisa estar livre para mostrar o elemento.

    Como melhorar o LCP?

    Otimize a imagem principal

    Quando o elemento de LCP é uma imagem, vale:

    • usar dimensões adequadas;
    • comprimir o arquivo;
    • utilizar formatos modernos, como WebP ou AVIF;
    • evitar carregar uma imagem muito maior que o espaço em que ela será exibida;
    • entregar versões diferentes conforme o tamanho da tela.

    Reduzir o peso da imagem pode ajudar, mas a melhoria precisa ser confirmada com novos testes.

    Não use carregamento tardio na imagem principal

    O carregamento tardio, também chamado de lazy loading, é útil para imagens localizadas abaixo da área inicial da página.

    Porém, ele não deve ser usado na imagem principal responsável pelo LCP. Isso pode atrasar o momento em que o navegador começa a baixar o recurso.

    Melhore a resposta do servidor

    Cache, hospedagem adequada, redução de redirecionamentos e otimização do banco de dados podem ajudar o servidor a entregar a página mais rapidamente.

    Um TTFB elevado adiciona atraso a todas as etapas posteriores do carregamento.

    Reduza CSS e JavaScript desnecessários

    Arquivos grandes ou mal organizados podem bloquear a exibição da página.

    Remover códigos não utilizados, adiar recursos secundários e reduzir tarefas longas ajuda o navegador a mostrar o conteúdo principal mais cedo.

    Priorize o recurso principal

    O navegador deve encontrar rapidamente a imagem ou fonte necessária para apresentar o maior conteúdo.

    Em configurações mais técnicas, podem ser utilizados recursos como preload e fetchpriority="high" para informar que determinado arquivo possui prioridade. Essas alterações precisam ser aplicadas com cuidado para não colocar vários recursos como prioritários ao mesmo tempo.

    Como descobrir qual elemento está causando o LCP?

    O PageSpeed Insights pode mostrar qual elemento foi identificado como o principal conteúdo da página durante o teste.

    Ele pode apresentar, por exemplo:

    • a imagem destacada do artigo;
    • o título principal;
    • um banner;
    • uma seção de apresentação;
    • uma imagem de fundo.

    Também é possível analisar o elemento e os tempos de carregamento pelo Chrome DevTools, Lighthouse e outras ferramentas de desempenho.

    Antes de instalar plugins ou fazer várias alterações, é importante descobrir qual elemento está sendo medido e onde ocorre o atraso.

    Dados de campo e dados de laboratório

    Os dados de laboratório vêm de uma simulação controlada, como a realizada pelo Lighthouse.

    Os dados de campo representam a experiência de usuários reais e podem ser consultados em ferramentas como PageSpeed Insights e Google Search Console, quando há informações suficientes.

    Como o objetivo das Core Web Vitals é avaliar experiências reais, o acompanhamento deve considerar o 75º percentil das visitas em celulares e computadores.

    Uma página pode ter um bom resultado no teste de laboratório e apresentar dificuldades para usuários reais. Também pode acontecer o contrário.

    LCP melhora o posicionamento no Google?

    O LCP faz parte das Core Web Vitals, que são consideradas pelos sistemas de classificação do Google.

    Porém, atingir 2,5 segundos não garante uma boa posição. O Google avalia vários aspectos da experiência e continua priorizando a relevância e a utilidade do conteúdo. Buscar uma pontuação perfeita apenas por SEO pode não ser o melhor uso de tempo e recursos.

    A melhoria do LCP deve ter como principal objetivo fazer o usuário encontrar o conteúdo com rapidez.

    Exemplo prático

    Imagine uma página de vendas cuja imagem principal possui 4 MB.

    Além disso, a imagem:

    • está configurada com lazy loading;
    • só é descoberta depois da execução de um script;
    • depende de arquivos CSS grandes;
    • está hospedada num servidor lento.

    Comprimir a imagem pode ajudar, mas não resolverá todos os atrasos.

    A correção completa pode exigir a otimização da imagem, a retirada do lazy loading, a priorização do recurso, a redução de códigos que bloqueiam a renderização e uma resposta mais rápida do servidor.

    Em resumo

    LCP é a métrica que mede quanto tempo demora para o maior conteúdo visível de uma página aparecer.

    Um bom resultado ocorre em até 2,5 segundos para pelo menos 75% das visitas.

    Imagens pesadas, servidor lento, carregamento tardio, CSS excessivo e JavaScript podem prejudicar o resultado. A melhoria deve começar pela identificação do elemento medido e da etapa responsável pelo atraso.

    Explore também

    Aprofunde o assunto

    ✅ Na prática

    Analise uma página importante no PageSpeed Insights e responda:

    1. Qual elemento foi identificado como LCP?
    2. Ele é uma imagem ou um bloco de texto?
    3. O arquivo está pesado?
    4. A imagem principal usa lazy loading?
    5. O servidor demora para responder?
    6. Existem códigos bloqueando a exibição?
    7. O resultado real é diferente do teste de laboratório?

    Faça uma alteração por vez e teste novamente. Assim, será possível identificar o que realmente melhorou o carregamento.

    💡 Você sabia?

    O elemento considerado como LCP pode mudar durante o carregamento.

    Um texto pode ser inicialmente o maior conteúdo visível, mas depois ser substituído na medição quando uma imagem maior termina de carregar. O navegador mantém como resultado o maior elemento apresentado antes da primeira interação do usuário.

    Post anterior Experiência do Usuário (UX)