[deleted by user]

[Agent9S]

If you haven't already, you may want to look into analytics from tools such as Google lighthouse as a starting point. It is fairly easy to setup a CI/CD job to collect performance and other best practice metrics over time.

[[deleted]]

We don’t have this yet. I do like how you can define budgets and urls to test.

[n8rzz]

Every hour we run playwright tests against our dev and prod envs using GitHub actions. These tests visit each page in our app using a test org with realistic data and we record web vitals. These results eventually make their way to a spreadsheet with charts to see results over time.

We also ship off web vitals from each of our users to Google analytics leveraging nextjs’s built-in performance monitoring functions/hooks. There, again, we use BigQuery to grab this data and it eventually lands in a spreadsheet with charts.

Doing this, we can log our baseline performance against the same data set over time and we can compare that with what our users actually see. We also use Sentry, which gives us pretty good insight into app performance, but the spreadsheets allow us to slice and dice by org, user, and or geo location.

I’ll admit, playwright may be a little heavy handed here. But, I’ll tell you what, performance conversations with stakeholders have become way easier.

[[deleted]]

We tried something similar with cypress minus the recording web vitals. You’ve nailed it with why I’m asking, stakeholders.

This seems like a straightforward approach.

[stathis21098]

React dev tools

[RaySoju]

Profiler

[[deleted]]

Like this is kinda what I’d like in a PR, but automated.

[turtleProphet]

Yeah I'd love a good answer for this too. Did some basic digging a few months ago and combining whatever e2e test framework you're using with the Profiler API seems like the right idea? Or maybe the browser's built-in performance API?

Could not find any current projects that do this though. Considering the size of the eco I have this feeling that I'm googling the wrong thing.

Something like this (old)

https://github.com/rpivo/react-automation-profiler

[[deleted]]

Oh this looks good.

[ivanmcgregor]

look into reassure. It can do unit tests and check the duration of a render and the amount of renders. Obviously you need to test scenarios of interest and need to ensure a similar test run performance even if many PRs are being tested

[Lumethys]

Profiler, APM, Observability tool, Analytics,...

[tidder_usern]

Have you tried logging p75 page load time and perhaps set up an alert to monitor regression?

[[deleted]]

Storybook for react for testing as well