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.
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.
You can also see how frequent different types of navigations are for your website.
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.
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.
Finding the navigation type in the browser
You can get a the navigation type for the current page from the PerformanceNavigationTiming object:
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.