Soft navigations

Soft navigations is the technical term to distinguish regular pagehits from JS driven pagehits. Everyday users won't know the difference. However, with the rise of JavaScript frameworks, the way of building websites and loading web pages changed over time.

Instead of requesting a whole webpage and its source code, frameworks like NextJS and NuxtJS are fetching new contents using JavaScript. Cutting away the middle man (the browser), new contents then needs to rendered into the page using JavaScript as well. This is known as Client-side Rendering, typically happening with Single Page Applications. Such page navigation is called a soft navigation.

Soft navigations are in origin trial at time of writing.

Goals of this API

The WICG is describing the goals of a soft navigation API as following:

  • Enable measurement of Single-Page app performance in the wild for today's apps.
  • Enable such measurement at scale - allowing the team that owns the measurement to be decoupled from the team that owns the app's logic.
  • Not rely on developers annotating soft navigations themselves.

Core Web Vitals and soft navigations

As explained in the Single Page Application article, Core Web Vitals won't be tracked during soft navigations. The soft navigations API was introduced to fix this.

Although it isn't sure if it will land in Google Chrome's tracking of Core Web Vitals, soft navs is already available in the web-vitals JavaScript library as a branch of that library.

Continue reading about soft navigations

A technical page can be found over at github, web.dev wrote about experimenting with soft navigations. A list of changes to Soft Navigation Heuristics can be found here.