1–10 of 24 posts
Is there a way to automatically test performance (maybe in terms of FPS) of React applications regularly in CI pipelines? Any tools for this out there?
- https://firebase.google.com/docs/perf-mon/get-started-web (this is a new feature released by Google. Luckily you don't need Firebase to use this. https://www.youtube.com/watch?v=KYYjdWSrRjI&t is a good tutorial on wiring your app up)
- https://reactjs.org/docs/perf.html
- lighthouse by Google
You could just run lighthouse on your app periodically for an in depth audit on your site. That way you wouldn't need to slow down your builds with a test (not sure what's best practice here. Just trying to throw out some basic ideas)
It’s also useful to instrument this in your production environment (called real user metrics) for some % of user sessions and combine it with more synthetic tests.
The backend is of course really easy, just measure request times (min/avg/max) and time to first byte.
Edit: Don’t know why I’m being downvoted for this answer? Lol
https://medium.com/@paularmstrong/twitter-lite-and-high-perf...
https://github.com/markerikson/react-redux-links/blob/master...
Might be worth going through. Hopefully they're useful.
I don't do front end, but I asked my team and they linked me to: https://medium.com/@paularmstrong/twitter-lite-and-high-perf... https://github.com/markerikson/react-redux-links/blob/master... Might be worth going through. Hopefully they're useful.
While it's probably not 100% relevant, you might also want to glance at some of the things I've done trying to benchmark performance for the React-Redux library itself, including running benchmarks in Puppeteer and capturing metrics like render times and FPS [0].
Now, my experience has been that I have to deliberately crank up the number of components on screen and dispatch absurd numbers of Redux actions a second just to get the FPS to drop below 60FPS, so I'm not sure how much that would be applicable to real-world apps, but at least you can see how I've tried to capture the values.
As a general observation, I'd highly encourage folks to use the Profiler that's built into the React DevTools to view render behavior and find components that may be re-rendering when it wasn't necessary [1] [2].
Also, Brian Vaughn has been working on a major rewrite of the React DevTools to both improve internal speed and add new features, and you can play around with it now [3].
Finally, if you _really_ want to get fine-grained, there's a little-known profiling/tracing API that can be used to capture render times in parts of your app [4] [5] [6].
[0] https://github.com/reduxjs/react-redux-benchmarks
[1] https://reactjs.org/blog/2018/09/10/introducing-the-react-pr...
[2] https://www.netlify.com/blog/2018/08/29/using-the-react-devt...
[3] https://github.com/bvaughn/react-devtools-experimental
[4] https://github.com/bvaughn/rfcs/blob/profiler/text/0000-prof...
[5] https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcd...
[6] https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a...
- lighthouse (https://github.com/GoogleChrome/lighthouse). You can implement this with their Node CLI to automate in your pipeline and output the results somewhere.
- calibre (https://calibreapp.com/). Gives you nice graphs and snapshots over time.
At Asana, we actually test performance in production with a A/B test split. We use Interana (but any data aggregator would work) to analyze the results. Trying to measure the regressions in a sandbox did not match our Real User Metrics (RUM). In order for this to work though, you need to develop a strong mental model of React performance so you can optimize it further.