> ## Documentation Index
> Fetch the complete documentation index at: https://docs.appsignal.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Web vitals do navegador

<Note>
  Browser monitoring é uma funcionalidade em beta do [AppSignal Labs](/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](https://discord.gg/EjF6ykYx63).
</Note>

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.

<h2 id="what-each-metric-measures">
  O que cada métrica mede
</h2>

| Métrica | O que mede | Bom | Precisa melhorar | Ruim |
| - | - | - | - | - |
| LCP (Largest Contentful Paint) | Quanto tempo o maior elemento visível leva para renderizar. | ≤ 2.500 ms | 2.500–4.000 ms | > 4.000 ms |
| INP (Interaction to Next Paint) | Com que rapidez a página responde a uma interação. | ≤ 200 ms | 200–500 ms | > 500 ms |
| CLS (Cumulative Layout Shift) | Quanto o layout se desloca de forma inesperada durante o carregamento. | ≤ 0,1 | 0,1–0,25 | > 0,25 |
| FCP (First Contentful Paint) | Quanto tempo até o primeiro conteúdo aparecer. | ≤ 1.800 ms | 1.800–3.000 ms | > 3.000 ms |
| TTFB (Time to First Byte) | Quanto tempo o servidor leva para começar a responder. | ≤ 800 ms | 800–1.800 ms | > 1.800 ms |

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.

<h2 id="how-values-are-attributed-to-routes">
  Como os valores são atribuídos às rotas
</h2>

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:

<CodeGroup>
  ```js JavaScript theme={null}
  import { setRouteTemplate } from "@appsignal/browser";

  setRouteTemplate("/orders/:id");
  ```
</CodeGroup>

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](/browser/error-tracking#how-errors-are-grouped).

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.

<h2 id="when-values-are-sent">
  Quando os valores são enviados
</h2>

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.

<h2 id="browser-support">
  Suporte dos navegadores
</h2>

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.

<h2 id="reviewing-performance-in-appsignal">
  Analisando a performance no AppSignal
</h2>

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](/browser-monitoring/performance).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.