web-vitals 6 mede soft navigations: o que muda no RUM de uma SPA

Desenvolvimento Web · "Loop"

A versão 6 da biblioteca web-vitals, publicada em 21 de julho de 2026, consegue reiniciar LCP, CLS e INP quando o navegador reconhece uma navegação interna de uma SPA. Até aqui, boa parte do RUM enxergava a sessão como uma única visita longa: a primeira carga recebia métricas, enquanto transições seguintes ficavam misturadas ou precisavam de instrumentação própria.

O recurso aproxima a medição da pergunta que interessa: como a rota que o usuário acabou de abrir se comportou? Mas ele não transforma automaticamente qualquer mudança de estado em uma página, nem produz números diretamente comparáveis com a série antiga. A adoção pede uma pequena migração de dados, não só a troca da versão no package.json.

Quando o navegador considera que houve uma soft navigation

A detecção usada pelo Chrome combina três sinais: uma interação do usuário, uma mudança de URL e uma nova pintura na tela. Essa definição evita depender de uma API diferente para cada framework e permite observar aplicações existentes. Ao mesmo tempo, ela pode produzir falsos positivos ou deixar escapar transições que o produto considera uma navegação, mas não cumprem os três sinais.

A biblioteca só separa as métricas onde o navegador oferece suporte. Outros navegadores continuam reportando o modelo tradicional, mesmo com a opção habilitada. Por isso o backend de RUM precisa guardar o tipo da navegação e a capacidade do cliente, em vez de misturar todas as amostras numa única curva.

As métricas recomeçam, mas não do mesmo jeito que uma carga completa

  • LCP: passa a considerar o maior conteúdo pintado depois da transição; elementos persistentes que não foram repintados ficam fora.
  • INP: reinicia o conjunto de interações para representar a nova rota.
  • CLS: começa outra janela de estabilidade visual.
  • TTFB: vale zero para a soft navigation; ele não tenta representar a primeira chamada de rede feita pela rota.

Esse TTFB zerado é um bom exemplo de por que a semântica importa. Numa SPA, o custo inicial da rota pode estar numa API, num chunk carregado sob demanda ou numa tarefa longa no cliente. Chamar qualquer um deles de TTFB criaria outra métrica com um nome conhecido, mas significado diferente.

Como habilitar sem perder o contexto da rota

O web-vitals 6 aceita reportSoftNavs: true. O objeto da métrica inclui navigationURL e navigationType; use esses campos no envio, porque o callback pode acontecer depois de a URL visível já ter mudado novamente.

import { onCLS, onINP, onLCP } from 'web-vitals';

function report(metric) {
  const body = JSON.stringify({
    name: metric.name,
    value: metric.value,
    id: metric.id,
    navigationType: metric.navigationType,
    navigationURL: new URL(metric.navigationURL).pathname,
    appVersion: window.APP_VERSION,
  });

  navigator.sendBeacon('/rum', body);
}

const options = { reportSoftNavs: true };
onCLS(report, options);
onINP(report, options);
onLCP(report, options);

O exemplo reduz a URL ao caminho para não enviar query strings com identificadores ou dados pessoais. Em produção, normalize rotas dinâmicas — por exemplo, /produto/123 para /produto/:id — e controle a cardinalidade. Sem isso, o dashboard ganha milhares de séries com poucas amostras e perde utilidade.

Não compare v5 e v6 como se só o número do pacote tivesse mudado

Quando a primeira soft navigation acontece, a biblioteca finaliza as métricas da URL anterior. INP e CLS deixam de acumular a sessão inteira. Isso muda a unidade observada e pode melhorar ou piorar percentis sem nenhuma alteração real na aplicação.

  1. Envie uma versão do coletor em cada evento.
  2. Separe navigate, restauração de bfcache e soft-navigation.
  3. Mantenha dashboards paralelos durante uma janela de comparação.
  4. Valide manualmente as rotas críticas com o painel Performance e logs de navegação.
  5. Só depois redefina alertas e metas históricas.

Esse cuidado complementa a diferença entre Lighthouse e dados reais de usuários. A versão 6 melhora a granularidade do campo; ela não substitui laboratório, traces ou métricas do fluxo de negócio.

A medição melhor não decide se a aplicação deveria ser uma SPA

Soft navigation observável reduz um ponto cego, mas não elimina o custo arquitetural de manter estado, roteamento e renderização no cliente. O critério continua sendo o produto. A reflexão sobre até onde usar uma SPA faz sentido vem antes da escolha da ferramenta de RUM.

O valor do web-vitals 6 aparece quando uma sessão deixa de ser um único balde. Uma rota rápida não esconde outra lenta, e uma interação ruim pode ser associada à tela que a produziu. Para aproveitar isso sem criar um gráfico enganoso, trate suporte, semântica e migração da série como partes do mesmo release.

Fontes

Leia também