Published at
Updated at
Reading time
This post is part of my Today I learned series in which I share all my web development learnings.

Paul Calvano has written an excellent article diving into back/forward caches in which he goes into RUM metrics gathered with mPulse.

I've learned that you can access user navigation behavior info in JavaScript. You can see if your users navigated, reloaded or traversed the browser history. The Navigation Timing spec and the included Navigation Type hold this information in performance.navigation.type. performance.navigation.type returns an enum value.

Navigation EventEnum valueInfo
navigate0lick click, entering of a URL, form submission, ...
reload1reload click or location.reload()
back_forward2back/forward click or calling history.back()/history.forward()
prerender3navigation initiated by a prerender hint

Use performance.navigation.type to analyze how your site and its resources load depending on different user behavior. For example, if you want to learn how many people hit the reload button on your pages to perform some analysis, a few lines of JavaScript can help here:

if (performance.navigation.type === 1) {
  // gather metrics after a reload and
  // tell your monitoring service about it!

If you want to see the Navigation Timing API in action, I published a CodeSandbox to play around with it.

Example page showing performance.navigation.type

Have fun! 👋

Was this TIL post helpful?
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 8 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles