Dimensão Core/Dash: Tipo de Navegação

Dimensão: Tipo de Navegação (nt)

Cada visualização de página nos seus dados do CrUX carrega um tipo de navegação. Isso informa como o navegador carregou a página, o que determina quais sistemas do navegador foram envolvidos: a pilha de rede, o back/forward cache, o pipeline de prerender ou uma restauração de sessão. O CoreDash expõe isso como a dimensão nt para que você possa filtrar e comparar os Core Web Vitals em cada contexto de navegação separadamente.

Os dados vêm da API PerformanceNavigationTiming, especificamente da propriedade type. Você a lê com performance.getEntriesByType("navigation")[0].type. O Chrome relata esse valor junto com cada medição de web vitals enviada ao CrUX, e o CoreDash o armazena e indexa para que você possa segmentar sem escrever nenhuma instrumentação personalizada.

Por que o Tipo de Navegação é importante

Agregar o LCP ou INP em todos os tipos de navegação produz um número que é tecnicamente correto e, na prática, enganoso. Um hit no back/forward cache é concluído em milissegundos. Uma navegação fria aguarda por DNS, TCP, TLS e TTFB. Se 20% das suas sessões forem hits de bfcache, elas puxarão seu LCP p75 para baixo e tornarão um problema real em navegações novas mais difícil de enxergar.

O inverso também é verdadeiro. Se o bfcache estiver quebrado no seu site, as sessões de back/forward terão um desempenho tão ruim quanto navegações novas. Sem segmentar por tipo de navegação, você nunca notará, porque o agregado permanece estável.

O prerender é o caso mais drástico. Uma página com prerender correto deve mostrar um LCP próximo a zero, porque a renderização terminou antes mesmo de o usuário clicar no link. Se as suas páginas com prerender mostrarem números normais de LCP, a configuração das Speculation Rules está errada e o prerender não está sendo acionado ou está sendo descartado antes do uso.

Os Tipos de Navegação

navigate

Uma navegação padrão: o usuário digitou uma URL, clicou em um link de outro site ou seguiu um redirecionamento. Este é um carregamento de página completo sem atalhos de cache. O navegador passa por todo o pipeline de solicitação, incluindo pesquisa de DNS, estabelecimento de conexão e carregamento completo de recursos. Nos dados do CoreDash, o navigate representa cerca de 65% das sessões. É a sua linha de base. Todos os outros tipos de navegação devem ser avaliados em comparação com o navigate.

reload

O usuário pressionou F5, clicou no botão de recarregar do navegador ou o seu código chamou location.reload(). O navegador envia solicitações de revalidação para recursos em cache, o que significa que o TTFB geralmente parece pior do que um navigate, apesar do usuário estar na mesma página. Se o TTFB do seu reload for drasticamente maior do que o TTFB do navigate, seus cabeçalhos de cache estão acionando a revalidação a cada recarregamento em vez de servir o conteúdo obsoleto. Aproximadamente 10% das sessões são reloads no tráfego típico do CoreDash.

back_forward

O usuário pressionou o botão de voltar ou avançar do navegador. Se o back/forward cache (bfcache) estiver funcionando, este é o tipo de navegação mais rápido possível. O navegador restaura a página da memória sem nenhuma solicitação de rede. O LCP para um hit de bfcache é efetivamente o tempo para pintar a partir da memória, o que é quase instantâneo.

Se as suas métricas de back_forward parecerem semelhantes às do navigate, o bfcache não está funcionando. As causas mais comuns são manipuladores de eventos unload, cabeçalhos de resposta Cache-Control: no-store e conexões IndexedDB abertas que não foram fechadas antes da navegação. Os dados do CoreDash colocam o back/forward em cerca de 20% das sessões, tornando esta uma correção de alto impacto.

prerender

A página foi carregada em segundo plano usando a API Speculation Rules antes que o usuário clicasse no link. Quando o usuário clica, o documento com prerender é ativado instantaneamente. O LCP para um prerender ativado corretamente é próximo a zero porque todo o trabalho de renderização foi concluído antes do evento de navegação.

Se o LCP do seu prerender parecer normal, uma de três coisas aconteceu: o prerender foi descartado antes da ativação, a speculation rule foi direcionada para URLs erradas, ou a página usa cabeçalhos ou JavaScript que impedem o prerender. Aproximadamente 3% das sessões do CoreDash são ativações de prerender, mas essa participação aumenta rapidamente assim que as Speculation Rules são implantadas.

restore

A aba foi restaurada após o navegador ser fechado ou a aba travar. O navegador recarrega a página do zero, mas a sessão é considerada uma restauração em vez de uma navegação nova. O desempenho é semelhante ao de uma navegação fria. Isso representa cerca de 2% das sessões e raramente é o foco do trabalho de otimização, mas vale a pena monitorar se você tem usuários em sessões de navegador instáveis.

Fluxo de Trabalho de Depuração

1. Compare o LCP do navigate com o seu alvo geral de LCP. Esta é a sua base da verdade para o desempenho de carregamentos novos. Se o navigate já estiver passando, o seu problema está em outro lugar.
2. Verifique o back_forward em relação ao navigate. Se estiverem próximos, o bfcache está quebrado. Abra o Chrome DevTools, vá para o painel Application e execute o teste de bfcache. A saída do DevTools listará exatamente quais recursos ou cabeçalhos estão bloqueando a elegibilidade do bfcache.
3. Verifique o LCP do prerender. Se estiver acima de 200ms, o pipeline de prerender não está entregando o esperado. Verifique se o seu JSON de Speculation Rules é válido, confira se as páginas de destino não retornam lógica de bloqueio e confirme se as ativações estão sendo contabilizadas no Chrome DevTools em Speculation Rules.

Regra Prática de Engenharia

• navigate: Deve atender ao seu limite de LCP por meio de otimização normal: TTFB rápido, fetchpriority="high" na imagem de LCP, sem recursos que bloqueiem a renderização.
• back_forward: Deve ser de 10 a 20 vezes mais rápido que o navigate. Se não for, o bfcache está quebrado.
• prerender: Deve mostrar um LCP abaixo de 200ms. Se não for o caso, as suas Speculation Rules estão mal configuradas.
• reload: O TTFB não deve ser drasticamente pior que o navigate. Se for, corrija seus cabeçalhos de revalidação de cache.

O Tipo de Navegação é a dimensão que separa "como está o desempenho da minha página?" de "como está o desempenho da minha página sob cada estratégia de carregamento do navegador?". Essa distinção é a diferença entre adivinhar e depurar.