HACKER Q&A
📣 hysan

How do you test performance of navigations between pages?


I’ve been reading up on how to measure and analyze website performance. Every tool and article I’ve come across is focused on performance of single page loads. However, my understanding of various SSR frameworks is that loading a website for the first time can be very different from navigating to another page on the website. For example, Next.js’s page router will only request the JSON of an SSRed route when navigating. That can change the perceived experience for the end user. Why is there so little focus on testing page navigation speed? (articles and tooling) Am I looking in the wrong places or has SEO made information like this impossible to find? Any suggestions on articles or tools to look at?

  👤 oops Accepted Answer ✓
All the most popular e2e testing frameworks and synthetic testing services will allow you to script interactions like page transitions.

For example here is a WebPageTest article on measuring performance of page transitions:

https://www.catchpoint.com/blog/how-fast-is-your-web-app-how...

👤 solardev
I just manually look at it in the inspector's network tab. The "template" is already loaded and you can see how big the JSON is and optimize that if necessary. You can also turn on redraw debugging with the React debugger if necessary, but that's not usually a bottleneck.

The fresh page load is usually the worst case scenario, so inter page navigation once the framework is already cached is generally much faster. Combined with preloading of the JSONs on hover, it can be nearly instantaneous for the user.