otimizar LCP alto: causa raiz e como resolver no PageSpeed

17 min de leitura  ·  Guia técnico

otimizar LCP alto é reduzir o tempo até que o maior elemento visível da página seja carregado e renderizado no navegador. Para corrigir no PageSpeed Insights, siga estes passos:

1. Identifique o elemento LCP no relatório do PageSpeed Insights.
2. Meça TTFB, cache e tempo de resposta do HTML inicial.
3. Otimize imagem hero, CSS crítico, fontes e JavaScript que bloqueiam renderização.
4. Ative cache de página, compressão e headers adequados no servidor ou hospedagem.
5. Teste novamente em mobile e desktop e ajuste o gargalo que ainda aparecer.

Pré-requisitos

• Acesso ao Google PageSpeed Insights ou ferramenta equivalente de análise de Core Web Vitals.
• Acesso ao painel da hospedagem, WordPress, cPanel ou servidor onde o site está publicado.
• Permissão para alterar imagens, CSS, JavaScript, cache e configurações do site.
• Se usar servidor próprio: acesso SSH e conhecimento básico de Nginx, Apache, PHP-FPM ou cache.
• Ambiente de referência possível: Debian 12, Ubuntu 24.04 LTS, Rocky Linux 9, PHP 8.3, Nginx 1.26 ou Apache.
• Backup recente antes de alterar tema, plugins, arquivos de configuração ou regras de cache.

Como otimizar LCP alto começando pelo elemento correto

LCP no PageSpeed Insights deve ser analisado pelo elemento candidato indicado no relatório, não apenas por uma nota geral de performance. Em muitos sites, o LCP é a imagem principal do topo, um banner, um título grande, um bloco de texto acima da dobra ou até um vídeo incorporado. Ao abrir o relatório, procure a seção relacionada ao Largest Contentful Paint e confirme qual elemento foi considerado o maior conteúdo visível.

O erro comum é comprimir todas as imagens do site sem verificar se a imagem que realmente aparece como LCP está sendo carregada tarde, em tamanho excessivo, sem prioridade ou dependente de JavaScript. Se o PageSpeed mostra uma imagem hero, priorize essa imagem. Se mostra texto, investigue fontes, CSS e resposta do HTML. Se mostra um bloco renderizado por script, o problema pode estar no JavaScript atrasando a montagem da página.

1. Abra o teste do PageSpeed Insights para a URL exata que apresenta LCP alto.
2. Verifique o elemento candidato ao Largest Contentful Paint.
3. Confirme se ele é imagem, texto, vídeo, banner ou bloco gerado por JavaScript.
4. Liste os recursos necessários para esse elemento aparecer: HTML, CSS, fonte, imagem e scripts.
5. Otimize primeiro o recurso que impede esse elemento de surgir rapidamente.

otimizar LCP alto sem mexer no item errado

Ao trabalhar em produção, faça uma alteração por vez e teste novamente. Isso evita culpar hospedagem, tema ou plugin sem evidência. Se o maior elemento é uma imagem, o foco inicial é formato, dimensão, preload e prioridade. Se o maior elemento é texto, o foco muda para CSS crítico, fontes e tempo de resposta. Se você ainda está estruturando o ambiente, o artigo Configurando um Servidor Linux para Hospedagem de Sites ajuda a entender a base de publicação.

Diagnóstico de TTFB alto antes de alterar imagens

TTFB alto significa que o navegador demora para receber o primeiro byte do HTML, o que pode elevar o LCP mesmo quando imagem, CSS e JavaScript estão bem otimizados. Em sites PHP, WordPress ou aplicações com banco de dados, isso costuma estar ligado a cache ausente, consultas lentas, plugins pesados, excesso de processos PHP-FPM ou recursos insuficientes. Antes de trocar imagens, teste a resposta do HTML inicial.

Use o comando abaixo a partir de um terminal. Ele não altera nada no servidor, apenas mede quanto tempo a URL leva para começar a responder e quanto tempo a requisição total demora. Substitua o domínio pelo endereço real da página analisada no PageSpeed.

curl -o /dev/null -s -w "TTFB: %{time_starttransfer}s\nTotal: %{time_total}s\n" https://www.seudominio.com.br/

Output esperado:
TTFB: 0.320s
Total: 0.780s

Ao rodar este comando, você verá duas informações úteis. O TTFB mostra a demora até o HTML começar a chegar. O total mostra o tempo da requisição completa. Se o TTFB estiver muito maior do que o esperado para sua aplicação, investigue cache, PHP, banco de dados e logs antes de focar apenas no front-end.

1. Teste a página inicial e também a URL específica com LCP alto.
2. Repita o teste algumas vezes para evitar conclusão baseada em uma única medição.
3. Compare páginas leves e páginas pesadas do mesmo site.
4. Se apenas uma página for lenta, procure plugin, consulta ou bloco específico daquela URL.
5. Se todas forem lentas, priorize cache, aplicação e recursos do ambiente.

Em WordPress e sites PHP, cache de página pode reduzir a geração repetida do HTML. Se houver banco de dados envolvido, também vale revisar conexões e permissões; quando o problema for acesso ao banco no cPanel, consulte Conectando remotamente ao MySQL - cPanel.

Otimização de imagem hero para reduzir Largest Contentful Paint

Imagem hero pesada é uma das causas mais comuns de LCP alto quando o maior elemento visível é um banner no topo da página. A correção deve combinar tamanho correto, compressão, formato adequado, carregamento prioritário e remoção de dependências desnecessárias. Não basta diminuir a qualidade visual sem ajustar a dimensão real exibida no layout.

Verifique se a imagem do topo não está sendo enviada em dimensão muito maior do que o espaço usado na tela. Uma imagem exibida pequena, mas entregue em arquivo muito grande, desperdiça rede e atrasa o LCP. Também evite lazy load no elemento LCP acima da dobra, porque ele precisa aparecer cedo. Lazy load é útil para imagens abaixo da dobra, não para o principal conteúdo visível inicial.

1. Baixe ou localize a imagem apontada pelo relatório do PageSpeed.
2. Redimensione para dimensões compatíveis com o layout real.
3. Comprima mantendo qualidade visual aceitável.
4. Garanta que a imagem LCP não esteja com carregamento preguiçoso.
5. Priorize o carregamento da imagem principal quando o tema ou aplicação permitir.

Se você administra o servidor, pode conferir se a imagem está sendo servida com cache pelo cabeçalho HTTP. O comando abaixo consulta apenas os headers da imagem.

curl -I https://www.seudominio.com.br/caminho/imagem-principal.webp

Output esperado:
HTTP/2 200
content-type: image/webp
cache-control: public, max-age=31536000

O output esperado deve mostrar um tipo de conteúdo coerente e um cabeçalho de cache para arquivos estáticos. Se aparecer ausência de cache, tipo incorreto ou redirecionamentos em cadeia, a imagem pode estar atrasando a renderização. Em hospedagens com painel, procure opções de cache estático, otimização de imagens e compressão. Em servidores próprios, ajuste Nginx ou Apache com cuidado.

CSS crítico, fontes e JavaScript que atrasam renderização

CSS bloqueante pode impedir que o navegador pinte o elemento LCP, principalmente quando o conteúdo acima da dobra depende de arquivos grandes de tema, construtores visuais ou bibliotecas carregadas em todas as páginas. O navegador precisa baixar e interpretar estilos essenciais antes de exibir corretamente o topo. Por isso, reduzir CSS não utilizado e priorizar CSS crítico costuma melhorar o tempo de renderização percebido.

Fontes também merecem atenção. Quando o texto é o elemento LCP, uma fonte externa atrasada pode segurar a exibição ou causar troca visual tardia. Prefira carregar apenas pesos necessários, evite famílias demais e revise se o tema inclui ícones e fontes que não são usados. JavaScript deve ser avaliado com o mesmo critério: scripts de chat, rastreamento, sliders e construtores podem atrasar o conteúdo principal.

1. Remova CSS de plugins ou módulos que não aparecem na página analisada.
2. Adie JavaScript que não é necessário para exibir o topo.
3. Evite sliders pesados como primeiro elemento visível.
4. Reduza fontes externas e carregue apenas variações usadas.
5. Teste a página após cada alteração para confirmar impacto real no LCP.

Para investigar arquivos carregados no HTML inicial, use um comando simples e procure referências a CSS e JavaScript. Ele ajuda a enxergar excesso de dependências antes mesmo de abrir ferramentas avançadas do navegador.

curl -L https://www.seudominio.com.br/ | grep -E "stylesheet|script"

Output esperado:

Se o resultado listar muitos arquivos de plugins, bibliotecas duplicadas ou scripts de terceiros antes do conteúdo principal, revise a necessidade de cada um. Em WordPress, faça isso com cautela: desativar otimizações agressivas pode quebrar menus, formulários ou checkout. Em aplicações próprias, separe o JavaScript essencial do restante e evite que recursos não críticos bloqueiem a renderização do conteúdo acima da dobra.

Cache e servidor quando o PageSpeed mostra resposta lenta

Cache de página melhora o LCP quando o gargalo está na geração do HTML, pois reduz o trabalho repetido do PHP, framework, CMS ou banco de dados. Em WordPress, WooCommerce, sites institucionais e aplicações PHP, o HTML pode ser montado dinamicamente a cada visita. Sem cache, picos de tráfego ou plugins pesados aumentam o tempo até o navegador receber a base da página.

Atenção: antes de alterar configuração de servidor, crie backup do arquivo original e valide a sintaxe. Uma configuração incorreta em Nginx ou Apache pode deixar o site indisponível. Se você usa cPanel ou hospedagem gerenciada, prefira recursos do painel e plugins compatíveis antes de editar arquivos manualmente.

Em Nginx, arquivos estáticos podem receber headers de cache. O exemplo abaixo é apenas uma referência de bloco para imagens, CSS, JavaScript e fontes; ajuste ao seu ambiente antes de aplicar.

location ~* \.(jpg|jpeg|png|webp|gif|css|js|woff2)$ {
    expires 30d;
    add_header Cache-Control "public";
}

Output esperado:
Configuração aceita após validação de sintaxe do Nginx

Depois de editar, valide a configuração antes de recarregar o serviço.

nginx -t

Output esperado:
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

Em seguida, recarregue o serviço apenas se a validação estiver correta.

systemctl reload nginx

Output esperado:
Sem mensagem de erro no terminal

Se o site usa Apache, plugins de cache ou regras no painel podem ser mais apropriados do que ajustes manuais. O mais importante é confirmar que HTML, imagens, CSS e JavaScript não estão sendo entregues sempre como conteúdo sem cache quando poderiam ser armazenados com segurança. Conteúdo dinâmico, carrinho, área logada e páginas personalizadas exigem exceções.

Validação depois de corrigir o LCP no PageSpeed

Core Web Vitals devem ser validados após cada ciclo de otimização para separar ganho real de variação momentânea. O PageSpeed Insights pode mostrar diferenças entre mobile e desktop, porque rede, CPU simulada, peso do layout e recursos renderizados variam. Por isso, teste a mesma URL, registre o elemento LCP apontado e compare se ele mudou depois da correção.

1. Rode novamente o PageSpeed Insights na URL exata.
2. Confira se o elemento LCP continua sendo o mesmo.
3. Compare a causa exibida: imagem, servidor, CSS, fonte ou JavaScript.
4. Teste também páginas internas importantes, como produto, categoria, blog ou landing page.
5. Monitore logs e consumo de recursos se a lentidão aparecer apenas em horários de pico.

Em servidor Linux, você pode observar uso de CPU e memória durante acessos reais. Esse diagnóstico não substitui análise de aplicação, mas ajuda a perceber se o problema é infraestrutura sobrecarregada.

top

Output esperado:
Lista de processos com uso de CPU, memória e tempo de execução

Ao rodar este comando, você verá processos como PHP-FPM, banco de dados, Nginx, Apache ou tarefas do sistema. Se o consumo dispara durante o teste, investigue aplicação, plugins, consultas e cache. Para uma visão mais ampla de boas práticas de servidor, consulte Dicas de Otimização de Servidores Linux.

Problemas comuns e como resolver

Sintoma: PageSpeed indica imagem principal como LCP

Causa: a imagem acima da dobra pode estar grande demais, sem cache, carregada com lazy load ou vindo de um redirecionamento. Também pode haver CSS ou JavaScript atrasando sua exibição.

Solução: redimensione a imagem para o tamanho real do layout, comprima o arquivo, use cache para estáticos e remova lazy load do elemento LCP. Depois, teste a URL novamente e confirme se o elemento candidato mudou ou melhorou.

Sintoma: LCP continua alto mesmo com imagens otimizadas

Causa: o gargalo provavelmente não está na imagem. TTFB alto, CSS bloqueante, fonte externa lenta ou JavaScript de terceiros podem impedir a renderização do conteúdo principal.

Solução: meça TTFB com curl, revise cache de página, reduza CSS não usado e adie scripts não essenciais. Se for WordPress, teste com cautela plugins de cache e otimização sem quebrar páginas dinâmicas.

Sintoma: desktop melhora, mas mobile continua ruim

Causa: a versão mobile pode carregar o mesmo banner pesado, scripts de layout, sliders ou fontes sem adaptação. Também pode haver elementos diferentes no topo da página para telas menores.

Solução: teste especificamente a versão mobile, confira o elemento LCP indicado e entregue imagens proporcionais ao layout. Evite colocar sliders, vídeos ou blocos dependentes de JavaScript como primeiro conteúdo visível.

Sintoma: LCP piora em horários de tráfego

Causa: o servidor ou a aplicação pode estar chegando ao limite de CPU, RAM, processos PHP ou banco de dados. Quando o HTML demora a ser gerado, o navegador recebe tudo tarde.

Solução: analise logs, consumo de recursos, cache e consultas ao banco. Se o ambiente estiver subdimensionado, considere ajustar recursos, revisar plugins ou migrar para uma hospedagem com mais capacidade.

Perguntas frequentes sobre otimizar LCP alto

O que significa LCP alto no Google PageSpeed?

LCP alto significa que o maior elemento visível da página, como imagem principal, banner, bloco de texto ou vídeo, está demorando para carregar. No Google PageSpeed, isso geralmente aponta gargalos em imagem pesada, CSS bloqueante, resposta lenta do servidor, cache ausente ou recursos renderizados tarde demais.

Como descobrir qual elemento está causando LCP alto?

Abra o teste no Google PageSpeed Insights e verifique a seção relacionada ao Largest Contentful Paint. O relatório indica o elemento candidato ao LCP, permitindo identificar se o problema está em imagem hero, fonte, CSS, JavaScript, resposta HTML ou carregamento do servidor.

Otimizar imagens resolve LCP alto sozinho?

Otimizar imagens ajuda muito quando o elemento LCP é uma imagem grande, mas nem sempre resolve sozinho. Se houver TTFB alto, CSS bloqueante, cache mal configurado ou JavaScript atrasando a renderização, o LCP continuará ruim mesmo com imagens comprimidas.

Cache melhora o LCP no WordPress e em sites PHP?

Cache pode melhorar o LCP porque reduz o tempo de geração da página e entrega o HTML mais rapidamente ao navegador. Em WordPress e aplicações PHP, cache de página, OPcache, cache de objetos e headers corretos ajudam, desde que não entreguem conteúdo desatualizado ou quebrem páginas dinâmicas.

Quando o LCP alto é problema do servidor?

O LCP alto pode ser problema do servidor quando o HTML inicial demora para responder, o TTFB está elevado ou a aplicação consome CPU, RAM ou banco de dados em excesso. Nesses casos, é necessário analisar logs, cache, PHP-FPM, banco de dados e recursos da hospedagem antes de mexer apenas no front-end.

Conclusão

• Comece sempre pelo elemento LCP indicado no PageSpeed Insights, pois ele define se o foco será imagem, texto, CSS, JavaScript ou servidor.
• Meça TTFB antes de concluir que o problema é visual; resposta lenta do HTML pode manter o LCP alto mesmo com arquivos leves.
• Aplique cache, otimize recursos acima da dobra e valide cada mudança em mobile e desktop para evitar ajustes sem efeito real.

Leia também

• Como otimizar o Apache para alta performance em VPS Linux: Guia Completo
• Como otimizar o WordPress para alta performance em VPS Linux: Guia Completo
• Dicas de Otimização para Hospedagem WordPress

Precisa de ajuda com otimização de LCP alto?

Uma hospedagem bem configurada ajuda a reduzir gargalos de resposta, cache e entrega de arquivos do site. Se o PageSpeed aponta lentidão no servidor ou em sites PHP e WordPress, vale revisar o ambiente antes de alterar apenas o layout.

Conheça a hospedagem de sites da AviraHost