PageSpeed e Core Web Vitals: o que significam e por que importam
Entenda de forma simples o que sao LCP, INP, CLS e como a velocidade do seu site afeta suas vendas. Sem tecniques - so analogias praticas.
Voce ja ouviu falar em “PageSpeed”, “Core Web Vitals”, “LCP”? Se pareceu grego, este artigo e pra voce.
Vou explicar cada termo de forma simples, com analogias do dia a dia. No final, voce vai entender por que isso importa pro seu negocio.
Por que velocidade importa?
Antes dos termos tecnicos, os numeros:
| Dado | Fonte |
|---|---|
| 53% dos usuarios abandonam sites que demoram mais de 3 segundos | |
| Cada 100ms de atraso = -1% em vendas | Amazon |
| Sites que carregam em 1s tem conversao 3x maior que sites de 5s | HigherVisibility |
| Taxa de conversao cai ~7% a cada segundo extra | Cloudflare |
Resumo: site lento = dinheiro perdido.
PageSpeed: o “boletim” do seu site
O PageSpeed Insights e uma ferramenta gratuita do Google que da uma nota de 0 a 100 pro seu site.
| Nota | Cor | Significado |
|---|---|---|
| 90-100 | Verde | Excelente |
| 50-89 | Laranja | Precisa melhorar |
| 0-49 | Vermelho | Ruim |
Analogia: E como o boletim escolar do seu site. Nota verde = aprovado com louvor. Nota vermelha = precisa estudar mais.
Voce pode testar seu site agora em pagespeed.web.dev.
Core Web Vitals: os 3 sinais vitais
O Google usa 3 metricas principais pra avaliar a experiencia do usuario. Sao como os sinais vitais que o medico mede: pressao, batimento, temperatura.
1. LCP (Largest Contentful Paint) - Carregamento
O que mede: Tempo para o conteudo principal aparecer na tela.
Analogia do restaurante: Voce faz o pedido. O LCP nao e quando o garcom traz a agua - e quando o prato principal chega na mesa. E o momento que voce sente que foi atendido.
| Status | Tempo |
|---|---|
| Bom (verde) | Menos de 2.5 segundos |
| Precisa melhorar | 2.5 a 4 segundos |
| Ruim (vermelho) | Mais de 4 segundos |
O que deixa o LCP ruim:
- Imagens muito grandes/pesadas
- Servidor lento
- Codigo mal otimizado
2. INP (Interaction to Next Paint) - Interatividade
O que mede: Rapidez com que a pagina responde quando voce clica em algo.
Analogia do interruptor: Voce aperta o interruptor da luz. O INP e o tempo entre seu dedo apertar e a luz acender. Se demora e voce fica clicando varias vezes achando que nao funcionou, o INP e ruim.
| Status | Tempo |
|---|---|
| Bom (verde) | Menos de 200ms |
| Precisa melhorar | 200 a 500ms |
| Ruim (vermelho) | Mais de 500ms |
O que deixa o INP ruim:
- JavaScript pesado
- Muitos scripts de terceiros
- Animacoes exageradas
3. CLS (Cumulative Layout Shift) - Estabilidade Visual
O que mede: Se os elementos da pagina “pulam” enquanto carregam.
Analogia do clique acidental: Voce vai clicar em “Cancelar”, mas de repente um anuncio carrega, empurra tudo pra baixo, e voce clica em “COMPRAR” sem querer. Essa “danca” irritante dos elementos e o que o CLS mede.
| Status | Pontuacao |
|---|---|
| Bom (verde) | Menos de 0.1 |
| Precisa melhorar | 0.1 a 0.25 |
| Ruim (vermelho) | Mais de 0.25 |
O que causa CLS ruim:
- Imagens sem tamanho definido
- Anuncios que carregam depois
- Fontes que “trocam” no meio do carregamento
Outras metricas importantes
TTFB (Time to First Byte)
O que mede: Tempo que o servidor demora pra comecar a responder.
Analogia: E o tempo entre voce fazer o pedido ao garcom e ele ir ate a cozinha gritar “sai um pedido!”. Se o cozinheiro (servidor) tiver dormindo, demora.
Meta: Menos de 800ms.
FCP (First Contentful Paint)
O que mede: Tempo ate o primeiro elemento aparecer na tela.
Analogia: E quando o garcom coloca a toalha ou o couvert na mesa. Voce ainda nao pode comer, mas ja sabe que o restaurante ta funcionando.
Meta: Menos de 1.8 segundos.
Tabela resumo (cola rapida)
| Sigla | Nome | O que mede | Meta | Analogia |
|---|---|---|---|---|
| LCP | Largest Contentful Paint | Conteudo principal carregou | < 2.5s | Prato principal chegou |
| INP | Interaction to Next Paint | Resposta aos cliques | < 200ms | Interruptor de luz |
| CLS | Cumulative Layout Shift | Elementos nao pulam | < 0.1 | Nada se move sozinho |
| TTFB | Time to First Byte | Servidor respondeu | < 800ms | Cozinheiro acordou |
| FCP | First Contentful Paint | Algo apareceu | < 1.8s | Couvert na mesa |
Por que o Google se importa com isso?
Simples: o Google quer mostrar sites que oferecem boa experiencia. Se seu site e lento, o usuario fica frustrado, volta pro Google e clica no concorrente.
Core Web Vitals sao fator de ranqueamento oficial. Sites rapidos aparecem melhor nas buscas.
Como saber se meu site esta bom?
Ferramentas gratuitas:
| Ferramenta | O que faz |
|---|---|
| PageSpeed Insights | Nota + diagnostico completo |
| Google Search Console | Core Web Vitals de todo o site |
| Lighthouse (F12 no Chrome) | Auditoria completa |
O que fazer se meu site esta lento?
Geralmente o problema e:
- Imagens grandes - precisam ser comprimidas e no formato certo (WebP)
- Servidor lento - hospedagem barata demais
- Codigo pesado - templates prontos cheios de funcoes inuteis
- Sem cache - o site carrega tudo do zero toda vez
A boa noticia: tudo isso tem solucao.
Conclusao
Nao precisa decorar siglas. O importante e entender que:
- Site rapido = mais vendas
- Site lento = clientes indo pro concorrente
- Google premia sites rapidos com melhor posicionamento
Se seu site demora mais de 3 segundos pra carregar, voce esta perdendo 53% dos visitantes antes mesmo de mostrar seu produto.
Quer saber a nota do seu site? Me manda o link no WhatsApp que eu analiso de graca e te mando um relatorio.
Gostou do artigo?
Se você quer um site profissional pro seu negócio, me manda uma mensagem.
Falar no WhatsApp