I researched a lot on how to measure the page load times in a single page application like React, Vue etc but did not get any proper answer.
In Websites that are built using Single Page Application frameworks/libraries like vue, react etc load the initial page only once and then all the route changes do not fire a page load. To understand it better let us say our landing page is /index. When index route is loaded it is considered a Page Load but when we change the route to let's say /index/products here SPA takes care of it and loads the content using AJAX without loading the page.
But in websites that are built without SPA frameworks the case is different it loads every page on route changes and we can run the below line of code on each page and get the performance metrics.
performance.getEntriesByName(window.location.href)
This line of code simply returns a dataset containing some information about the page load speeds as shown in the image below.
So in SPA it runs only once and not when we change the routes. So what I want to do here is that I need to make this line run on every route change so that I get the above performance metrics that are shown in the image for every page.
Right now it only runs for the main page and when I change the routes inside the website, it does not run for every page. But in the case of reload it works properly because reload is again a new page load.