Teste de origem final de navegações suaves começando no Chrome 147

Barry Pollard
Michal Mocny

Publicado em: 20 de abril de 2026

O Chrome planeja lançar a API Soft Navigations com que já estamos fazendo testes ainda este ano. Em preparação para isso, estamos oferecendo mais um teste de origem, que começa no Chrome 147 e vai até o Chrome 149. Esse teste incorpora o feedback de testes anteriores no formato final esperado da API. Incentivamos os proprietários de sites interessados nesse recurso a fazer um teste final do formato final esperado da API antes do lançamento.

O que são navegações leves?

Uma "navegação suave" ocorre quando o JavaScript intercepta uma navegação (por exemplo, ao clicar em um link) e atualiza o conteúdo na página atual, em vez de carregar uma nova página, enquanto o URL ainda é atualizado na barra de endereço. Para os usuários, elas parecem iguais às navegações convencionais, mas, do ponto de vista do navegador, a página ainda é a original.

Necessidade da API Soft Navigation

A API Soft Navigations é uma API proposta para detecção de navegações leves usadas por sites de aplicativos de página única (SPA, na sigla em inglês). Como não há navegação nas páginas real em uma navegação suave, o JavaScript precisa gerenciar manualmente determinadas ações que normalmente acontecem em uma navegação. Algumas ações, como o gerenciamento do histórico de navegação, são possíveis com as APIs atuais. No entanto, outras ações, como medir as Core Web Vitals, não são possíveis para essas navegações.

A API Soft Navigation permite a observação de navegações suaves. Embora o JavaScript que inicia a navegação suave (normalmente um framework de JavaScript) saiba quando uma navegação ocorre, outros JavaScripts usados pelo site (por exemplo, scripts de análise) e o próprio navegador não sabem.

Core Web Vitals e SPAs

Um dos principais objetivos da API Soft Navigation é permitir a medição das Core Web Vitals para SPAs. As Core Web Vitals são medidas pelo navegador (para aparecer em ferramentas como o Chrome User Experience Report) e pelos proprietários de sites usando soluções de monitoramento de usuários reais (RUM, na sigla em inglês).

Os frameworks JavaScript podem medir alguns aspectos das Core Web Vitals para SPAs. Em particular, o Interaction to Next Paint (INP) e o Cumulative Layout Shift (CLS) são baseados em primitivos (respectivamente, a API Event Timing e a API Layout Instability) que podem ser medidos em qualquer período para calcular essas métricas. No entanto, outras métricas, como a Largest Contentful Paint (LCP), são emitidas apenas pelo navegador com base nas navegações de página e finalizadas após a interação.

Como a API permite a medição das Core Web Vitals para SPAs

A API Soft Navigation apresenta duas novas entradas de performance:

  • Uma entrada SoftNavigationEntry emitida quando todos os requisitos de navegação suave são atendidos. Isso inclui um interactionId para a interação que causou a navegação suave, um navigationId exclusivo e um name definido como o novo URL e vários tempos de renderização que podem ser usados para medir o primeiro conteúdo renderizado da navegação suave.
  • Uma entrada InteractionContentfulPaint que permite medir várias renderizações de conteúdo de tamanho crescente após as interações para medir a LCP em navegações suaves.

Essas novas entradas podem ser observadas usando um PerformanceObserver com os tipos soft-navigation e interaction-contentful-paint, respectivamente.

A API também expande cada uma das entradas de performance largest-contentful-paint, interaction-contentful-paint, event-timing e layout-shift (e outras) para incluir um identificador, navigationId, que representa a navegação da entrada. Como os PerformanceObservers não observam entradas de performance até que a página fique inativa, pode levar algum tempo entre o evento que criou a entrada de performance e sua observação dela. Isso é especialmente verdadeiro quando a página está muito ocupada, por exemplo, durante navegações suaves. Esse valor navigationId ajuda a atribuir entradas à navegação correta.

Algumas entradas de interaction-contentful-paint podem ocorrer antes da navegação e outras depois. Em vez de rastrear todas as renderizações que podem resultar em uma navegação suave, a entrada soft-navigation inclui uma entrada largestInteractionContentfulPaint, que é a maior renderização vista até o momento.

Juntos, eles permitem que as Core Web Vitals sejam medidas para:

  • LCP: usando largest-contentful-paint para o carregamento de página inicial e as novas entradas interaction-contentful-paint e soft-navigation para navegações suaves.
  • CLS: usando entradas layout-shift e segmentando-as com base nas entradas soft-navigation para navegações suaves.
  • INP: usando entradas event e segmentando-as com base nas entradas soft-navigation para navegações suaves.
  • FCP: usando first-contentful-paint para o carregamento de página inicial e os detalhes de marcação de tempo de pintura nas novas entradas soft-navigation para navegações suaves.

Para mais detalhes, consulte a documentação sobre navegações suaves.

Como as navegações flexíveis são acionadas?

A API Soft Navigation aciona uma navegação suave quando ocorre o seguinte:

  • Uma interação do usuário ocorre,
  • … o que resulta em uma exibição visível de conteúdo para o usuário.
  • … e uma atualização de URL ocorre.

A API usa essa abordagem em vez de permitir que um framework de JavaScript "emita" uma navegação suave ou crie com base na API Navigation por dois motivos:

  1. Primeiro, isso inclui todos os sites SPA atuais sem que seja necessário fazer mudanças neles.
  2. Em segundo lugar, ela permite uma compreensão consistente do que constitui uma navegação suave, independente de como um framework ou desenvolvedor lida com as navegações.

Os frameworks ou desenvolvedores podem atualizar o URL de uma navegação suave mesmo sem uma interação do usuário ou uma atualização do DOM que os usuários considerariam uma navegação. Eles também podem atualizar o URL em momentos diferentes: no início da interação, apenas no final quando ela estiver concluída ou em qualquer estado intermediário.

Em vez de depender de escolhas de framework e desenvolvedor, a criação da detecção de navegação suave no navegador estabelece uma definição canônica que permite medir as Core Web Vitals para navegações suaves em grande escala e torna essas medições comparáveis em grande escala.

Frameworks e desenvolvedores também podem ignorar a API Soft Navigations e usar as APIs Event Timing e Layout Instability subjacentes, além da nova entrada de desempenho InteractionContentfulPaint, para medir outras métricas de desempenho conforme preferirem. No entanto, recomendamos usar a API para medir as Core Web Vitals e permitir uma medição consistente em sites e ferramentas.

Preciso de ajuda para testar a API Soft Navigation

Precisamos da sua ajuda para testar a API Soft Navigations e determinar se ela corresponde corretamente às suas expectativas de quando uma navegação suave ocorre. A API não informa navegações leves quando você considera que elas ocorreram? Por outro lado, a API informa um número excessivo de navegações que você não considera como tal?

O que mudou desde o último teste de origem

A principal mudança nesta iteração mais recente é a separação do InteractionContentfulPaint das navegações suaves para permitir outros casos de uso dessa entrada de performance e o atributo largestInteractionContentfulPaint adicional ao SoftNavigationEntry.

Do ponto de vista do site, a API agora também inclui replaceState como navegações leves porque ouvimos seu feedback de que isso é importante em muitas circunstâncias. Queremos saber sobre outros casos em que a API não reconhece uma navegação suave.

Também fizemos inúmeras outras melhorias na implementação. Para quem quer saber exatamente o que mudou na iteração mais recente, um histórico detalhado de todas as mudanças pode ser encontrado no registro de mudanças de navegações leves.

Queremos que a API seja o mais útil possível e estamos abertos a mais mudanças para que isso aconteça. É muito mais fácil implementar mudanças na API antes do lançamento e de os sites começarem a depender de uma implementação. Por isso, pedimos aos desenvolvedores de SPAs e às pessoas interessadas em medir o desempenho da Web nesses sites que testem a API e enviem feedback sobre ela.

Como testar

A API pode ser testada localmente com flags do Chrome ou opções de linha de comando. Além disso, você pode testar no campo com o teste de origem (saiba mais sobre testes de origem).

Consulte nossa documentação ou o repositório do GitHub para mais detalhes técnicos sobre a API, principalmente como medir as Core Web Vitals.

Além disso, uma versão experimental de navegação suave da biblioteca web-vitals está disponível no GitHub e no npm.

Para um teste mais simples, o painel Performance do Chrome DevTools mostra a navegação suave nos rastreamentos de performance a partir do Chrome 145, mesmo sem ativar o recurso:

Um marcador de navegação suave no painel "Performance" com um rastreamento de youtube.com.

Feedback

O feedback sobre a API deve ser levantado como problemas no GitHub, e os bugs na implementação do Chromium devem ser informados no rastreador de problemas do Chrome. Se você não tiver certeza de qual categoria o feedback se encaixa, não se preocupe muito. Preferimos receber feedback em qualquer um dos lugares. Vamos analisar os problemas nos dois locais e redirecioná-los para o local correto.