Core Web Vitals: como melhorar LCP, CLS e INP do seu site
O Google mede a experiência do seu site com três números: LCP, CLS e INP. Se esses números estiverem ruins, seu site perde posições no ranking. Este guia explica o que cada métrica significa em linguagem simples e mostra como melhorar cada uma com técnicas práticas.
O que são Core Web Vitals e por que importam
Core Web Vitals são três métricas que o Google criou para medir a qualidade da experiência de quem visita um site. Em vez de avaliar apenas o conteúdo, o Google também quer saber se o site carrega rápido, se a página se mantém estável enquanto carrega e se os botões respondem quando clicados.
Desde 2021, essas métricas são oficialmente um fator de ranking. Na prática, funcionam como critério de desempate. Se dois sites têm conteúdo similar, o que tiver melhores Core Web Vitals aparece primeiro. Em nichos competitivos, essa diferença pode significar posições na primeira página.
Além do SEO, sites com boa performance retêm mais visitantes. Pesquisas mostram que cada segundo adicional de carregamento reduz a taxa de conversão em cerca de 7%. Melhorar os Core Web Vitals beneficia tanto o ranking quanto as vendas.
As três métricas explicadas de forma simples
As siglas podem parecer confusas, mas o conceito por trás de cada uma é intuitivo. Veja o que cada métrica mede e quais são os valores que o Google considera aceitáveis.
| Métrica | O que mede | Bom | Precisa melhorar | Ruim |
|---|---|---|---|---|
| LCP | Velocidade de carregamento | ≤ 2,5s | 2,5s - 4s | > 4s |
| CLS | Estabilidade visual | ≤ 0,1 | 0,1 - 0,25 | > 0,25 |
| INP | Responsividade | ≤ 200ms | 200ms - 500ms | > 500ms |
Se as três métricas estiverem na faixa "Bom", seu site passa no teste de Core Web Vitals do Google. Vamos entender cada uma em detalhe e como otimizar.
LCP: Largest Contentful Paint (velocidade de carregamento)
O LCP mede quanto tempo leva para o maior elemento visível da página carregar completamente. Esse elemento geralmente é uma imagem grande, um vídeo ou um bloco de texto. O Google quer que isso aconteça em até 2,5 segundos.
Pense assim: quando alguém abre seu site, a primeira coisa que vê é um espaço em branco. O LCP marca o momento em que o conteúdo principal finalmente aparece. Quanto mais rápido, melhor a primeira impressão.
Como melhorar o LCP
Otimize a imagem principal
Se o LCP é uma imagem (banner, foto de produto), converta para WebP ou AVIF. Comprima sem perda de qualidade visível. Defina largura e altura explícitas no HTML. Use carregamento prioritário: adicione o atributo fetchpriority="high" e evite lazy loading na imagem acima da dobra.
Pré-carregue a fonte principal
Se o LCP é um bloco de texto, a fonte precisa carregar antes que o texto apareça. Adicione um <link rel="preload"> para o arquivo da fonte (woff2) e use font-display: swap para mostrar texto imediatamente com uma fonte de reserva enquanto a fonte principal carrega.
Reduza o CSS que bloqueia a renderização
O navegador não exibe nada até processar todo o CSS. Se o arquivo CSS for grande, o carregamento atrasa. Solução: extraia o CSS essencial para a primeira tela (CSS crítico) e coloque direto no HTML. Carregue o restante de forma assíncrona.
Use uma hospedagem com CDN
Uma CDN (rede de entrega de conteúdo) distribui cópias do seu site em servidores ao redor do mundo. Quando alguém acessa, a página vem do servidor mais próximo, reduzindo a latência. Cloudflare oferece CDN gratuita e é compatível com qualquer hospedagem.
Descubra como está a performance do seu site
O MVPilot analisa velocidade, SEO, segurança e UX em 15 segundos. A primeira análise é 100% gratuita.
Analisar meu site agoraCLS: Cumulative Layout Shift (estabilidade visual)
O CLS mede quanto os elementos da página se movem enquanto ela carrega. Já aconteceu de você estar lendo um texto e, de repente, tudo pula para baixo porque uma imagem ou anúncio carregou? Isso é layout shift. É frustrante e o Google penaliza.
O valor ideal é menor que 0,1. Quanto mais próximo de zero, mais estável a página. Os maiores vilões são imagens sem dimensões definidas, fontes que trocam de tamanho ao carregar e conteúdo dinâmico inserido acima do conteúdo existente.
Como melhorar o CLS
Defina dimensões em todas as imagens e vídeos
Adicione os atributos width e height em cada tag <img> e <video>. Isso permite que o navegador reserve o espaço correto antes de a mídia carregar, evitando que o conteúdo pule. Em CSS, use aspect-ratio como alternativa moderna.
Use font-display: swap na fonte
Quando a fonte customizada carrega, ela pode ter tamanho diferente da fonte de reserva, causando um salto no layout. Use font-display: swap e escolha uma fonte de reserva com métricas similares. Para fontes como Inter, a reserva "system-ui, sans-serif" funciona bem.
Não insira conteúdo acima do conteúdo existente
Banners, barras de cookies e notificações que aparecem no topo da página empurram tudo para baixo. Se precisar exibir esse tipo de conteúdo, reserve o espaço previamente com CSS (min-height) ou coloque na parte inferior da tela.
INP: Interaction to Next Paint (responsividade)
O INP mede quanto tempo o site demora para reagir quando o usuário interage. Clicou num botão e nada aconteceu por 1 segundo? Isso é um INP ruim. O Google quer que a resposta visual aconteça em até 200 milissegundos.
O INP substituiu o FID (First Input Delay) em 2024. A diferença é que o FID media apenas a primeira interação, enquanto o INP considera todas as interações durante a visita e usa a pior delas como métrica. Isso torna o INP mais exigente e mais representativo da experiência real.
Como melhorar o INP
Reduza o JavaScript desnecessário
JavaScript pesado bloqueia a thread principal do navegador, impedindo que interações sejam processadas. Remova scripts que não são necessários, adie os que não são críticos (atributo defer) e divida scripts grandes em pedaços menores. Escolher uma stack leve desde o início ajuda muito.
Evite scripts de terceiros pesados
Widgets de chat, players de vídeo, analytics e ferramentas de marketing adicionam JavaScript que compete com suas interações. Carregue-os de forma assíncrona ou com atraso (por exemplo, só após 3 segundos ou após a primeira interação do usuário).
Use CSS para animações, não JavaScript
Animações feitas com JavaScript bloqueiam a thread principal. Animações CSS usam a GPU e não interferem na responsividade. Para transições simples (hover, abertura de menu, modais), CSS puro é sempre mais performático.
Ferramentas para medir Core Web Vitals
Você não precisa adivinhar se seu site está bom ou ruim. Existem ferramentas gratuitas que medem as três métricas e apontam os problemas.
Ferramentas recomendadas
MVPilot: análise gratuita que cobre performance, SEO, segurança e UX. Ideal para um diagnóstico rápido e completo. Testar agora.
PageSpeed Insights: ferramenta do Google que mostra os Core Web Vitals com dados reais de usuários e simulações em laboratório. Útil para detalhes técnicos.
Google Search Console: relatório de Core Web Vitals que agrupa todas as páginas do site por status (bom, precisa melhorar, ruim). Mostra tendências ao longo do tempo.
Chrome DevTools (aba Performance): para análises detalhadas durante o desenvolvimento. Permite gravar interações e identificar exatamente qual código está causando lentidão.
O fluxo ideal é: rodar o MVPilot para uma visão geral, usar o PageSpeed Insights para detalhes técnicos e acompanhar a evolução no Search Console. O MVPilot, desenvolvido pela Codecortex Tecnologia, combina análise de performance com SEO e segurança num único relatório.
Resumo das otimizações por métrica
Para facilitar a consulta, aqui está um resumo de todas as otimizações organizadas por métrica. Se você seguir o checklist de SEO para sites novos, muitas dessas otimizações já estarão cobertas.
| Métrica | Otimização | Dificuldade | Impacto |
|---|---|---|---|
| LCP | Converter imagens para WebP | Fácil | Alto |
| LCP | Pré-carregar fonte principal | Fácil | Médio |
| LCP | Extrair CSS crítico | Média | Alto |
| CLS | Dimensões em imagens/vídeos | Fácil | Alto |
| CLS | font-display: swap | Fácil | Médio |
| INP | Remover JS desnecessário | Média | Alto |
| INP | Animações CSS em vez de JS | Fácil | Médio |
Perguntas frequentes
O que são Core Web Vitals?
Qual é o valor ideal para cada Core Web Vital?
Core Web Vitals realmente afetam o ranking no Google?
Como posso medir os Core Web Vitals do meu site?
Preciso de conhecimento técnico para melhorar os Core Web Vitals?
Seu site passa no teste de Core Web Vitals?
Descubra em 15 segundos. Diagnóstico gratuito de performance, SEO, segurança e UX.
Analisar meu site grátisLeia também
Checklist de SEO para sites novos: 15 verificações
Checklist completo com tudo que seu site precisa antes de ir ao ar. Inclui prioridades e instruções de correção.
Melhores stacks para criar seu site ou MVP
Compare as tecnologias mais usadas e descubra qual é a melhor para o seu tipo de projeto.
Segurança de sites: HTTPS, SSL e headers
Como proteger seu site e seus visitantes com certificado SSL e headers de segurança.