Skip to main content

What Different Navigation Types Mean For Page Speed

· 3 min read

Page navigations in the browser can be categorized into different types, for example an initial navigation or a reload of an already open page.

This article looks at how different navigation types result in page load time differences and how you can detect the type of navigation in the browser.

Browser UI with different navigation types highlighted

What different types of navigations can happen in the browser?

There are four different types of page navigations:

  • navigate: a standard navigation triggered by typing in a URL or clicking on a link
  • reload: the visitor clicked the "Reload this page" button in the browser
  • back_forward: the visitor used the back and forward navigation buttons

There is also a prerender value for the deprecated prerender link tag.

Many real user monitoring tools like DebugBear will show you how page load times differs between different navigation types.

RUM data showing different Largest Contentful Paint metrics by navigation types

You can also see how frequent different types of navigations are for your website.

RUM data showing a how often a given navigation type is observed

Page reloads

When a page is reloaded by the user that means the browser can re-use some resources that have already been downloaded. This is because of browser caching.

Not all resources will be cached – the user likely reloaded the page because they wanted some parts of the page to be updated, for example the contents of the document itself. However, overall you should still see that page reloads are faster than standard navigations.

Back/forward navigations

The back and forward browser navigation buttons are used very frequently:

Chrome usage data shows that 1 in 10 navigations on desktop and 1 in 5 on mobile are either back or forward.

Since these pages have already been loaded previously, this provides an opportunity for performance optimizations. Browsers implement a back/forward cache (or bfcache) to restore previous pages instead of reloading them.

To benefit fom better performance you need to make sure that your pages are eligible for the bfcache, for example by checking Chrome DevTools or the "Page prevented back/forward cache restoration" Lighthouse audit.

Lighthouse bfcache audit

Finding the navigation type in the browser

You can get a the navigation type for the current page from the PerformanceNavigationTiming object:

performance.getEntriesByType("navigation")[0].type
// "reload"

Track navigation types on your website

Page reloads and back/forward navigations provide additional opportunities to optimize page speed and Core Web Vitals compared to standard navigations. (Though keep in mind that even standard navigations benefit from browser caching.)

A real user monitoring (RUM) like DebugBear tool lets you keep track of your performance and identify opportunities for improvement for different visitors. For example, you can find back/forward navigations and check whether the bfcache works on those pages.

User experience in RUM data

Monitor Page Speed & Core Web Vitals

DebugBear monitoring includes:

  • In-depth Page Speed Reports
  • Automated Recommendations
  • Real User Analytics Data

Get a monthly email with page speed tips