SEO Técnico

Melhorar Core Web Vitals: guia prático

Publicado em , atualizado em 02/09/2021, 4 min de leitura, 829 palavras, por Equipe Seoexpresso

Melhorar Core Web Vitals: código e performance
Melhorar Core Web Vitals: guia prático. Foto: Unsplash.

Como melhorar Core Web Vitals na prática: LCP, CLS e INP com soluções simples de imagens, scripts e layout. Guia hands-on do Seoexpresso.

Publicidade
Neste artigo (8 topicos)
  1. LCP: acelerar a maior imagem
  2. CLS: acabar com os saltos de layout
  3. Plano de 30 minutos: 5 vitórias rápidas
  4. INP: tornar a página reativa
  5. Exemplo prático
  6. 5 erros comuns (e como evitá-los)
  7. Perguntas frequentes
  8. Resumo: o essencial

Dá para sair do vermelho nas métricas do Google em uma tarde, sem contratar ninguém.

Para melhorar Core Web Vitals sem programador, siga o plano de 30 minutos: são as 5 ações com melhor retorno que aplicamos em dezenas de sites, ordenadas por facilidade.

Saber o que são as métricas é o primeiro passo; melhorar Core Web Vitals é o segundo. Este guia é 100% prático: para cada métrica, a causa mais comum e a solução mais simples.

Aplicámos este método em dezenas de sites. Na maioria, 3 tardes de trabalho chegam ao verde. Vamos por partes: LCP, CLS e INP.

LCP: acelerar a maior imagem

O culpado do LCP lento é quase sempre a imagem principal (hero). Solução em 3 passos: comprima e converta para WebP; use preload nessa imagem para o navegador a buscar primeiro; e elimine sliders pesados, uma imagem única carrega muito mais rápido.

Se usa WordPress, um plugin de cache + CDN resolve metade do caminho. Remova também vídeos de fundo automáticos: são bonitos e lentos. Troque por imagem com botão de play.

CLS: acabar com os saltos de layout

Cada imagem, anúncio ou vídeo precisa de espaço reservado (largura e altura definidas). Sem isto, o conteúdo empurra o texto quando carrega, e o visitante clica no lugar errado.

Nunca injete faixas de cookies ou promoções acima do conteúdo sem placeholder. E cuidado com fontes: texto que muda de aspecto ao carregar também conta como instabilidade. Use font-display: swap e fontes do sistema quando possível.

Publicidade

Plano de 30 minutos: 5 vitórias rápidas

1. Comprima as 10 maiores imagens (10 min). Exporte em WebP com 80% de qualidade. Poupa muitas vezes 70% do peso da página.

2. Ative cache + lazy-load (5 min). Um plugin de cache bem configurado e lazy-load nas imagens abaixo da dobra cortam segundos do LCP.

3. Reserve espaço de anúncios (5 min). Defina altura mínima nos contentores de ads e embeds. O CLS agradece imediatamente.

4. Desative 3 plugins (5 min). Sliders duplicados, contadores vaidosos, chats redundantes: desligue e meça. Menos é mais rápido.

5. Reduza fontes (5 min). Fique com 2 pesos de fonte no máximo. Cada peso extra é uma viagem à rede que atrasa tudo. Re-meca amanhã e celebre o verde.

INP: tornar a página reativa

O INP mau vem de JavaScript a mais. Divida o código em partes, adie o que não é essencial (defer) e remova plugins duplicados (dois sliders, três chats, quatro contadores).

Regra prática: cada plugin deve justificar a existência com negócio. No WordPress, aponte a 10 ou menos. Meça antes e depois no PageSpeed Insights e confirme a evolução no relatório de experiência da Search Console.

Exemplo prático

Blog com CLS de 0,45 (mau): o banner de publicidade empurrava o texto a cada carregamento. Ao reservar altura fixa para o anúncio e definir dimensões em todas as imagens, o CLS caiu para 0,03 em um dia. As reclamações de «cliquei sem querer» desapareceram e o tempo de leitura subiu.

5 erros comuns (e como evitá-los)

  • Otimizar só a homepage. O Google avalia o site todo. Corrija o template e todas as páginas herdam a melhoria.
  • Medir só no laboratório. O teste local varia com a sua internet. Decida pelos dados reais (CrUX) do PageSpeed Insights.
  • Carrossel de 8 imagens. Cada imagem pesa e quase ninguém passa do 2.º slide. Uma imagem forte converte mais e carrega mais rápido.
  • Três ferramentas de chat. Chat + WhatsApp + push = JavaScript triplicado. Escolha um canal e remova o resto.
  • Esquecer as fontes. Seis pesos de fonte do Google Fonts atrasam tudo. Use 2 pesos no máximo, ou fontes do sistema.
Publicidade

Perguntas frequentes

LCP, CLS ou INP: qual corrigir primeiro?

O que estiver vermelho para mais páginas. Em geral: LCP primeiro (imagens), depois CLS (layout), depois INP (scripts).

CDN ajuda nas Core Web Vitals?

Sim, sobretudo no LCP: serve imagens e arquivos do servidor mais próximo do visitante. Muitas têm plano grátis.

De quanto em quanto tempo devo medir?

Após cada mudança grande e 1 vez por mês. Use também monitoramento contínua (Lighthouse CI) se tiver programador.

Devo contratar um programador ou faço sozinho?

As 5 vitórias rápidas do plano de 30 minutos fazem-se sem programador: imagens, cache, plugins e fontes. Chame um programador quando o problema for JavaScript à medida, renderização complexa ou Core Web Vitals vermelhos em todo o site após o básico.

O tema do WordPress influencia as notas?

Muito. Temas pesados com construtores visuais cheios de efeitos penalizam LCP e INP. Um tema leve e bem codificado pode valer 20 pontos. Antes de trocar, teste a demo do tema no PageSpeed Insights.

Resumo: o essencial

Resumindo: para melhorar Core Web Vitals, comprima a hero (LCP), reserve espaços (CLS) e corte JavaScript (INP). Corrija o template, meça com dados reais e acompanhe na Search Console.

Equipe Seoexpresso
Blog independente sobre SEO desde 2019. Explicamos cada tema de forma simples, com exemplos e checklists — sem jargão. Dúvidas? Fale conosco em sobre o Seoexpresso.

Continue a ler

SEO técnico avançado explicado de forma simples SEO Técnico, 25/06/2025 Search Console: guia simples para iniciantes SEO Técnico, 02/10/2024 Dados estruturados: guia simples de rich snippets SEO Técnico, 10/11/2022
Anterior: Page Experience: experiência que ranqueia Próximo: Topic clusters: organize o conteúdo e cresça

Voltar a todos os artigos

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *