Orbit
Kapsule Orbit Web Vitals
The Web Vitals tab reports Core Web Vitals collected from your project's real visitors rather than from a synthetic test, so what you see is what people are actually experiencing on their own…
Orbit Web Vitals
A guia Web Vitals reporta Core Web Vitals coletadas de visitantes reais do seu projeto em vez de testes sintéticos, então o que você vê é exatamente o que as pessoas estão vivenciando em seus próprios dispositivos e conexões.
Onde Web Vitals se encontra
Abra Orbit, clique no projeto e escolha Web Vitals sob o grupo Observability na faixa de abas do projeto. A página tem o título Web Vitals e explica seu próprio número de título: p75 é a pontuação usada para Page Experience.
Até você adicionar o coletor ao seu site, a página não tem nada a mostrar, então comece com o cartão de configuração na parte inferior.
Adicionando o Coletor
O cartão de configuração fornece uma tag de script de uma linha para adicionar ao <head> do seu site:
<script defer src="https://kapsulehost.com/api/v/<your-project-slug>/script.js"></script>
A linha exata, com o slug do seu projeto já preenchido, está na página. Copie-a de lá em vez de digitá-la.
O script coleta cinco métricas conforme os visitantes saem de cada página e as reporta em um único lote. Nenhuma informação pessoalmente identificável é capturada e nenhum cookie é definido, portanto não adiciona um requisito de consentimento próprio.
Os dados começam a aparecer cerca de trinta segundos após a primeira visualização de página real. Se nada aparecer depois disso, o script não está carregando: verifique a guia de rede do seu navegador no site ao vivo.
Há uma segunda cópia do mesmo coletor oferecida sob Settings, no cartão Web Analytics, que carrega do domínio do painel e vem antes da tag de fechamento </body>. Ambas funcionam e alimentam os mesmos dados. Use uma, não ambas, ou cada visualização de página será contada duas vezes.
As Cinco Métricas
| Métrica | O que mede |
|---|---|
| LCP | Largest Contentful Paint: quanto tempo até o conteúdo principal ficar visível |
| INP | Interaction to Next Paint: com que rapidez a página responde à entrada |
| CLS | Cumulative Layout Shift: quanto o layout pula durante o carregamento |
| FCP | First Contentful Paint: quanto tempo até algo ser desenhado |
| TTFB | Time to First Byte: quanto tempo o servidor levou para começar a responder |
As primeiras três são as Core Web Vitals propriamente ditas. FCP e TTFB são diagnósticas: elas informam se um LCP ruim é um servidor lento ou uma página lenta.
Lendo p75
Cada figura nesta página é uma p75, não uma média, sobre as amostras na janela selecionada. Três quartos dos seus visitantes tiveram uma experiência pelo menos tão boa quanto esta; um quarto tiveram pior.
Essa escolha importa. Uma média é dominada pelas muitas visitas rápidas em boas conexões e mascara a cauda. Uma p75 não: se seu p75 LCP é de quatro segundos, um em cada quatro visitantes espera mais que isso.
Cada cartão de métrica apresenta uma classificação de Good, Needs improvement ou Poor, mais a contagem de amostras com a qual foi calculada. Para LCP, a página declara os limites diretamente: bom é 2500ms ou menos, e ruim é acima de 4000ms.
Desconfie de qualquer cartão com uma contagem de amostra pequena. Uma p75 sobre uma dúzia de amostras é ruído. Amplie a janela com o seletor no topo da página ou aguarde mais tráfego antes de agir com base nela.
O Gráfico de Tendência
O gráfico de tendência plota p75 diário para LCP e CLS na janela selecionada, com os limites bom e ruim marcados. O subtítulo informa o que você está procurando: linhas planas são saudáveis.
Uma mudança de degrau em um dia específico é o sinal útil, porque quase sempre se alinha com um deploy. Faça referência cruzada da data com a guia Deployments ou marque o evento na linha do tempo do projeto para que seja anotado da próxima vez: consulte Orbit Timeline Annotations.
Uma deriva lenta para cima ao longo de semanas é um problema diferente, geralmente peso de página acumulado em vez de uma única mudança.
Principais Países
Top countries mostra volume de amostras por país, derivado de cabeçalhos de borda. Está aí para contexto em vez de para análise: uma p75 que parece pobre no geral muitas vezes acaba sendo boa para seu mercado principal e dominada por um público menor e mais distante.
Se a maior parte do seu tráfego está longe da sua origem, isso é um argumento para fazer cache mais agressivamente na borda em vez de otimizar seu código ainda mais.
Páginas Que Precisam de Atenção
A tabela Pages needing attention classifica caminhos por como seu p75 fica acima do limiar bom para cada métrica, com a contagem de amostras para cada linha.
Trabalhe nesta tabela em vez de tentar melhorar o site como um todo. Dois ou três templates geralmente respondem pela maior parte do problema, e corrigir um template corrige todas as páginas que o usam.
Causas comuns, na ordem em que vale a pena verificar:
- Uma imagem hero que não é dimensionada ou pré-carregada. Este é o problema de LCP mais frequente por uma margem ampla.
- Um script de terceiros bloqueando a thread principal. Widgets de chat, gerenciadores de tags e pilhas de análise são os suspeitos usuais e prejudicam INP principalmente.
- Imagens e embeds sem dimensões. Estes causam o layout pular conforme carregam, que é exatamente o que CLS mede.
- Uma resposta de origem lenta. Se TTFB é ruim, nenhum dos itens acima o salvará; o conserto é cache ou uma resposta mais rápida, não trabalho front-end.
Sem Amostras Nesta Janela
Se a página disser que não há amostras, uma de três coisas é verdadeira:
- O coletor não foi adicionado ou não está carregando nas páginas que as pessoas visitam.
- Foi adicionado recentemente e ninguém visitou ainda.
- A janela selecionada é mais curta que a lacuna desde seu último tráfego.
Amplie a janela primeiro, já que isso é grátis, depois verifique se o script está presente no HTML servido do site ao vivo em vez de apenas em sua fonte.
Quanto Tempo Os Dados São Mantidos
Amostras individuais são podadas automaticamente uma vez que têm 30 dias de idade, por um trabalho noturno. O seletor de janela permite que você veja através do histórico retido; não há arquivo além disso.
Se você precisar de um registro de longo prazo, tire uma captura de tela ou anote os valores p75 em um ponto no tempo, por exemplo, logo antes e logo após um projeto de desempenho, para que você tenha um antes e um depois que possa citar mais tarde.
Vitals na Página de Status Pública
Se você publicar uma página de status para o projeto, ela pode mostrar o mesmo resumo Core Web Vitals para seus visitantes, junto com uptime e deploys recentes. Consulte Orbit Status Page.
Onde Ir a Seguir
- Orbit Project Analytics para os números do lado da build e um resumo de vitals condensado.
- Orbit Timeline Annotations para marcar os deploys e incidentes atrás de uma mudança de degrau.
- Website Speed para conselhos gerais de desempenho.