PerformanceEntry: navigationId property

Value

An integer that can be matched to a corresponding PerformanceNavigationTiming or PerformanceSoftNavigation entry.

Description

Using PerformanceSoftNavigation entries, you can measure when Soft Navigations happened without hooking into the code that made the soft navigation.

This enables slicing the performance timeline used by the performance APIs to attribute performance measures to the navigation they occurred under. As performance entries are emitted after the fact and may be delayed, they may relate to previous navigations; you cannot assume they relate to the current URL. The navigationId indicates which navigation the entry happened under.

`navigationId` and measuring soft navigation Largest Contentful Paints

During Soft Navigations, paints that happen before the URL is updated will have a navigationId that references the location being navigated from. When measuring the Largest Contentful Paint (LCP) of an in-flight soft navigation, you will likely want to associate it with the location being navigated to. For the LCP case, PerformanceSoftNavigation.getLargestInteractionContentfulPaint() and InteractionContentfulPaint.interactionId are more effective at considering all relevant paints regardless of the navigationId when calculating that metric.

Examples

Logging the `navigationId` of the soft navigation

This example uses a PerformanceObserver to log new soft-navigation performance entries as they are recorded in the browser's performance timeline. The buffered option is used to access entries from before the observer creation.

js

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log("Soft Nav:", entry.startTime, entry.navigationId);
  }
});
observer.observe({ type: "soft-navigation", buffered: true });