Skip to main content
Browser monitoring é uma funcionalidade em beta do AppSignal Labs. O pacote @appsignal/browser é publicado sob a tag beta no npm, e sua configuração e API ainda podem mudar entre releases beta. Compartilhe seu feedback na nossa comunidade no Discord.
Web vitals medem a rapidez com que uma página carrega e responde. Também mostram se o layout dela se desloca de forma inesperada. O AppSignal as mede nos dispositivos e conexões de usuários reais. A coleta começa com init(). Não há nada para configurar.

​
O que cada métrica mede

LCP, INP e CLS são as três Core Web Vitals. FCP e TTFB ajudam a explicar um LCP ruim. Um TTFB lento aponta para o servidor ou a rede. Um TTFB rápido com um LCP lento aponta para o carregamento de recursos ou a renderização. Cada valor é classificado em relação a esses limites. O AppSignal rotula cada valor do resumo com uma classificação. A tabela por rota usa as mesmas classificações.

​
Como os valores são atribuídos às rotas

LCP, FCP e TTFB medem o carregamento da página. O navegador mede cada um deles uma vez, quando a página carrega pela primeira vez, e nunca mais. Em uma aplicação de página única, eles pertencem à rota carregada primeiro. Rotas client-side posteriores não recebem novas métricas de carregamento. Medi-los novamente por rota exigiria um recurso de navegador que ainda é experimental. CLS e INP podem se acumular enquanto a página está aberta. Quando o navegador oferece suporte a eles, o AppSignal atribui os valores observados à rota ativa. Ele reinicia esses valores a cada navegação. Para manter as rotas separadas e legíveis, informe ao AppSignal o template de rota a cada navegação do seu roteador:
Sem um template, o processador substitui IDs reconhecíveis nas URLs de web vitals, como números e UUIDs. Ele pode não identificar IDs específicos da sua aplicação. Os erros usam o caminho bruto, a menos que você defina um template, então uma chamada também melhora o agrupamento de erros. Há um segundo motivo para usar templates. O AppSignal mantém apenas um número limitado de rotas separadas por aplicação. Depois desse limite, as demais são agrupadas em um único grupo sem nome que o filtro de rota deixa de fora. Sem templates explícitos, rotas cujos IDs o processador não reconhece podem atingir esse limite mais cedo.

​
Quando os valores são enviados

Web vitals são agrupadas em lotes e enviadas nos limites de página e de rota:
  • Quando a página é ocultada, o que cobre a troca de aba e o envio da aplicação para segundo plano.
  • Quando a página é fechada ou abandonada.
  • Em uma mudança de rota no lado do cliente.
Se uma página travar ou for encerrada à força antes que qualquer um desses casos aconteça, nada é registrado para aquela visita. Para roteadores baseados em hash, o AppSignal trata #/orders como uma navegação. Ele não trata uma simples âncora na página, como #pricing, como tal.

​
Suporte dos navegadores

O SDK só relata uma métrica quando o navegador fornece as entradas de performance necessárias para medi-la. CLS precisa de layout-shift; INP precisa de event-timing. Navegadores sem esses tipos de entrada não contribuem para essas métricas. LCP, FCP e TTFB são coletadas pela biblioteca web-vitals quando ela está disponível.

​
Analisando a performance no AppSignal

A visualização Performance resume cada métrica para o período selecionado. Filtre-a por percentil, tempo, versão da aplicação ou rota. Leia mais em performance de front-end no AppSignal.