Monitore os Core Web Vitals do Google para melhorar a experiência do usuário e o ranking de busca.
O que são Core Web Vitals?
Core Web Vitals são as métricas do Google para medir a experiência do usuário:
| Métrica | Nome completo | Mede | Bom | Precisa melhorar | Ruim |
|---|---|---|---|---|---|
| LCP | Largest Contentful Paint | Carregamento | ≤2,5s | 2,5-4s | >4s |
| INP | Interaction to Next Paint | Interatividade | ≤200ms | 200-500ms | >500ms |
| CLS | Cumulative Layout Shift | Estabilidade visual | ≤0,1 | 0,1-0,25 | >0,25 |
Por que importam
- Impacto em SEO: Google usa CWV como sinais de classificação
- Experiência do usuário: Correlação com engagement e conversão
- Orçamento de performance: Defina metas mensuráveis
Habilitando o monitoramento de CWV
A coleta de Core Web Vitals está habilitada por padrão em todos os planos, inclusive Free. Enquanto o seu script de rastreamento estiver carregando, o tracker mede LCP, CLS, INP, FCP e TTFB em cada sessão de visitante real e envia exatamente um beacon quando o visitante sai da página.
A sua tag de script padrão é suficiente:
<script
defer
data-tracking-code="YOUR_TRACKING_CODE"
src="https://api.zenovay.com/z.js"
></script>
Nenhum atributo adicional, nenhuma mudança no script. Para confirmar que o tracker está disparando, abra a aba Install Health nas configurações do seu site.
Desabilitando para um site específico (avançado)
Se você precisar excluir um site rastreado da coleta de CWV, defina a feature flag enable_core_web_vitals como false nas configurações desse site. Não há um interruptor na interface porque o padrão está habilitado para todos — entre em contato com suporte em [email protected] se deseja mudar isso para um de seus sites.
Visão geral do painel
Resumo de CWV
Abra o painel do seu site e selecione a aba Performance (sob o grupo COMPORTAMENTO na barra lateral):
Visão geral de Core Web Vitals
LCP ████████████████░░░░ 2.1s ✓ Bom
INP ██████████████████░░ 156ms ✓ Bom
CLS ████████████████████ 0.05 ✓ Bom
Pontuações P75
A barra de ferramentas permite que você mude o percentil (P75, P90, P95, P99), filtre por dispositivo (Todos, Desktop, Móvel) e altere o intervalo de tempo (24 horas, 7 dias, 30 dias ou 90 dias).
Distribuição de pontuações
Cada bloco de métrica mostra como suas visitas se distribuem entre os limites Bom/Precisa melhorar/Ruim para o percentil selecionado:
| Classificação | LCP | INP | CLS |
|---|---|---|---|
| Bom | 65% | 72% | 85% |
| Precisa melhorar | 25% | 20% | 10% |
| Ruim | 10% | 8% | 5% |
Largest Contentful Paint (LCP)
O que mede
Tempo até o maior elemento de conteúdo ficar visível:
- Imagens
- Miniaturas de vídeo
- Imagens de fundo
- Blocos de texto
LCP no painel
- Tendência ao longo do tempo: LCP no percentil selecionado em todo o intervalo escolhido
- Por página: Rotas mais lentas
- Por dispositivo: Desktop vs Móvel
- Por geografia: Um mapa coroplético de LCP por país/região
- Elementos problemáticos: Os elementos específicos medidos como o LCP
Problemas comuns de LCP
| Problema | Impacto | Solução |
|---|---|---|
| Resposta lenta do servidor | Alto | Otimizar TTFB, usar CDN |
| Recursos que bloqueiam renderização | Alto | Diferir CSS/JS não críticos |
| Imagens grandes | Alto | Otimizar, usar WebP, lazy loading |
| Renderização do lado do cliente | Médio | SSR, pré-renderização |
| Scripts de terceiros | Médio | Carregamento assíncrono, remover desnecessários |
Melhorando o LCP
Otimização de imagens:
<!-- Pré-carregar imagem LCP -->
<link rel="preload" as="image" href="hero.webp">
<!-- Imagens responsivas -->
<img
src="hero.webp"
srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
sizes="100vw"
loading="eager"
fetchpriority="high"
/>
Dicas de recurso:
<!-- Pré-conectar a origens críticas -->
<link rel="preconnect" href="https://cdn.example.com">
<link rel="dns-prefetch" href="https://api.example.com">
Interaction to Next Paint (INP)
O que mede
Responsividade às interações do usuário:
- Cliques
- Toques
- Pressionamentos de tecla
INP mede o tempo da interação até a próxima atualização visual.
INP no painel
- Pontuação INP: No percentil selecionado (padrão P75)
- Por página: Rotas mais lentas para interatividade
- Por dispositivo: Desktop vs Móvel
Problemas comuns de INP
| Problema | Impacto | Solução |
|---|---|---|
| Tarefas JavaScript longas | Alto | Dividir tarefas, usar web workers |
| DOM grande | Médio | Virtualizar listas, simplificar estrutura |
| Handlers de evento pesados | Alto | Debounce, otimizar handlers |
| Layout thrashing | Médio | Agrupar leituras/escritas DOM |
| Scripts de terceiros | Médio | Lazy loading, isolar |
Melhorando o INP
Dividindo tarefas longas:
// Antes: Tarefa síncrona longa
function processLargeArray(items) {
items.forEach(item => expensiveOperation(item));
}
// Depois: Ceder ao thread principal
async function processLargeArray(items) {
for (const item of items) {
expensiveOperation(item);
// Ceder para permitir renderização
await new Promise(r => setTimeout(r, 0));
}
}
Usar requestIdleCallback:
function runWhenIdle(callback) {
if ('requestIdleCallback' in window) {
requestIdleCallback(callback, { timeout: 2000 });
} else {
setTimeout(callback, 100);
}
}
Cumulative Layout Shift (CLS)
O que mede
Estabilidade visual - quanto o conteúdo se desloca inesperadamente:
- Imagens que carregam sem dimensões
- Anúncios/incorporações redimensionando
- Inserção de conteúdo dinâmico
- Carregamento de fontes web
CLS no painel
- Pontuação CLS: No percentil selecionado (padrão P75)
- Por página: Páginas com mais deslocamento
- Por dispositivo: Desktop vs Móvel
Problemas comuns de CLS
| Problema | Impacto | Solução |
|---|---|---|
| Imagens sem dimensões | Alto | Sempre definir largura/altura |
| Anúncios sem espaço reservado | Alto | Usar containers de espaço reservado |
| Conteúdo dinâmico acima da dobra | Médio | Reservar espaço, usar transforms |
| Carregamento de fontes web | Médio | Usar font-display: swap |
| Incorporações carregando tarde | Médio | Reservar espaço, lazy loading |
Melhorando o CLS
Reservando espaço para imagens:
<!-- Sempre incluir dimensões -->
<img src="photo.jpg" width="800" height="600" alt="Photo">
<!-- Ou usar aspect ratio -->
<style>
.image-container {
aspect-ratio: 16 / 9;
}
</style>
Reservando espaço para anúncios:
.ad-slot {
min-height: 250px;
background: #f0f0f0;
}
Estratégia de carregamento de fontes:
@font-face {
font-family: 'CustomFont';
src: url('font.woff2') format('woff2');
font-display: swap;
}
Análise no nível da página
Detalhamento por página
A aba Performance inclui um detalhamento por rota para que você veja quais páginas reduzem uma métrica:
- Abra a aba Performance
- Role até o detalhamento por página
- Ordene para encontrar os piores resultados
- Use o painel de elementos problemáticos para ver o que está sendo medido como LCP
Cartão de performance da página
/products/widget
LCP: 2.8s ⚠ Precisa melhorar
INP: 145ms ✓ Bom
CLS: 0.18 ⚠ Precisa melhorar
Elementos problemáticos:
• Elemento LCP: img.hero-banner
• Fonte de CLS: .reviews-widget
• Alvo de INP: button.add-to-cart
Amostras: 12.450
O painel de elementos problemáticos mostra o elemento de página específico medido como o LCP, a maior fonte de deslocamento de layout e o elemento com o qual um usuário interagiu para o INP mais lento. Esses seletores CSS apontam diretamente para o que precisa ser corrigido.
Segmentação
Por tipo de dispositivo
Filtre toda a aba Performance por dispositivo (Todos, Desktop ou Móvel):
Dispositivo LCP INP CLS
Desktop 2.0s 120ms 0.05
Móvel 3.2s 210ms 0.12
Por geografia
O mapa coroplético mostra pontuações CWV por país/região para ajudar a identificar problemas de CDN ou localização do servidor:
Região LCP INP CLS
América do Norte 2.1s 140ms 0.05
Europa 2.4s 150ms 0.06
Ásia 3.6s 180ms 0.08
Alertas e relatórios
Os alertas automatizados de Zenovay cobrem detecção de anomalias e picos de tráfego em vez de limites Web Vitals por métrica. Para receber notificações quando o desempenho geral mudar e agendar resumos recorrentes, veja o guia dedicado Alertas de performance.
Integração com outras ferramentas
Google Search Console
Compare dados do Zenovay com o GSC:
- Zenovay: Dados de usuário real (RUM)
- GSC: Dados de laboratório + dados de campo
Lighthouse
Correlacione auditorias do Lighthouse com dados do mundo real.
PageSpeed Insights
Use Zenovay para monitoramento, PageSpeed para recomendações.
Comparação histórica
Análise de tendências
- Compare os intervalos de 24h, 7d, 30d e 90d
- Veja melhorias ao longo do tempo
- Correlacione tendências com suas datas de implementação
- Acompanhe em direção aos seus objetivos
Melhores práticas
Estratégia de monitoramento
- Definir baselines: Conhecer o desempenho atual
- Definir objetivos: Com base na indústria/concorrentes
- Monitorar continuamente: Não apenas auditorias pontuais
- Análise segmentada: Móvel geralmente pior
- Priorizar correções: Impacto vs esforço
Orçamento de performance
Métrica Atual Objetivo Orçamento
LCP 2.8s 2.0s ✗ Excedido
INP 150ms 150ms ✓ No alvo
CLS 0.08 0.1 ✓ Abaixo do alvo
Revisões regulares
- Semanal: Verificar regressões
- Mensal: Análise profunda
- Trimestral: Planejamento estratégico
Solução de problemas
Dados não aparecem
Verifique:
- Script instalado corretamente (use a aba Install Health nas configurações do seu site para confirmar que o tracker está disparando)
- A coleta de Core Web Vitals não foi desabilitada para o site (está habilitada por padrão — veja « Desabilitando para um site específico » acima)
- Tráfego suficiente (usuários reais necessários)
Valores inesperados
Considere:
- Tráfego de bots distorcendo dados
- Tráfego de desenvolvimento/staging
- Diferenças na compatibilidade do navegador
Discrepância com dados de laboratório
Normal – RUM captura:
- Condições reais de rede
- Desempenho real do dispositivo
- Comportamento real do usuário
- Distribuição geográfica