The navigation timing API includes the type of the current navigation (#tilPost)

Paul Calvano wrote an excellent article diving into back/forward caches in which he goes into RUM metrics gathered with mPulse.
I learned that it is possible to access user navigation behavior info in JavaScript. You can see if your…


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis

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

I learned that it is possible to 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 particularly the included Navigation Type hold this information in performance.navigation.type. performance.navigation.type returns an enum value.

Navigation Event Enum value Info
navigate 0 lick click, entering of a URL, form submission, ...
reload 1 reload click or location.reload()
back_forward 2 back/forward click or calling history.back()/history.forward()
prerender 3 navigation initiated by a prerender hint

You can use performance.navigation.type to analyze how your site and its reasources load depending on different user behavior. For example, if you want to learn how many people hit the reload button on your pages and want to do 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! ?


Reply to Stefan


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis


Print Share Comment Cite Upload Translate
APA
Stefan Judis | Sciencx (2022-12-08T15:37:02+00:00) » The navigation timing API includes the type of the current navigation (#tilPost). Retrieved from https://www.scien.cx/2020/08/20/the-navigation-timing-api-includes-the-type-of-the-current-navigation-tilpost/.
MLA
" » The navigation timing API includes the type of the current navigation (#tilPost)." Stefan Judis | Sciencx - Thursday August 20, 2020, https://www.scien.cx/2020/08/20/the-navigation-timing-api-includes-the-type-of-the-current-navigation-tilpost/
HARVARD
Stefan Judis | Sciencx Thursday August 20, 2020 » The navigation timing API includes the type of the current navigation (#tilPost)., viewed 2022-12-08T15:37:02+00:00,<https://www.scien.cx/2020/08/20/the-navigation-timing-api-includes-the-type-of-the-current-navigation-tilpost/>
VANCOUVER
Stefan Judis | Sciencx - » The navigation timing API includes the type of the current navigation (#tilPost). [Internet]. [Accessed 2022-12-08T15:37:02+00:00]. Available from: https://www.scien.cx/2020/08/20/the-navigation-timing-api-includes-the-type-of-the-current-navigation-tilpost/
CHICAGO
" » The navigation timing API includes the type of the current navigation (#tilPost)." Stefan Judis | Sciencx - Accessed 2022-12-08T15:37:02+00:00. https://www.scien.cx/2020/08/20/the-navigation-timing-api-includes-the-type-of-the-current-navigation-tilpost/
IEEE
" » The navigation timing API includes the type of the current navigation (#tilPost)." Stefan Judis | Sciencx [Online]. Available: https://www.scien.cx/2020/08/20/the-navigation-timing-api-includes-the-type-of-the-current-navigation-tilpost/. [Accessed: 2022-12-08T15:37:02+00:00]
rf:citation
» The navigation timing API includes the type of the current navigation (#tilPost) | Stefan Judis | Sciencx | https://www.scien.cx/2020/08/20/the-navigation-timing-api-includes-the-type-of-the-current-navigation-tilpost/ | 2022-12-08T15:37:02+00:00
https://github.com/addpipe/simple-recorderjs-demo