
Ask HN: How to performance test React webapps for rendering speed regressions? - janci5243
As React webapps get large and start to contain a lot of complex components, they often do not perform well and manifest low FPS in browser. As a result, engineers add strategies such as memoization (React.memo, shouldComponentUpdate) to avoid unnecessary computation, however they logic is fragile to code changes.<p>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?
======
iamleppert
For frontend performance: record the frame rate (via requestAnimationFrame,
look at simple frame rate counters), memory, count of DOM nodes on the page
during each of your integration tests as a good start. You can get a lot of
this via window.performance and memory info you need to pass an extra flag
into chrome headless.

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

~~~
vnchr
Thanks a lot, this is something I was specifically looking for!

------
ejwessel
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://medium.com/@paularmstrong/twitter-lite-and-high-performance-
react-progressive-web-apps-at-scale-d28a00e780a3)

[https://github.com/markerikson/react-redux-
links/blob/master...](https://github.com/markerikson/react-redux-
links/blob/master/react-performance.md)

Might be worth going through. Hopefully they're useful.

~~~
acemarke
Hey, that's my links list! :) Hope that's helpful!

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](https://github.com/reduxjs/react-redux-benchmarks)

[1] [https://reactjs.org/blog/2018/09/10/introducing-the-react-
pr...](https://reactjs.org/blog/2018/09/10/introducing-the-react-
profiler.html)

[2] [https://www.netlify.com/blog/2018/08/29/using-the-react-
devt...](https://www.netlify.com/blog/2018/08/29/using-the-react-devtools-
profiler-to-diagnose-react-app-performance-issues/)

[3] [https://github.com/bvaughn/react-devtools-
experimental](https://github.com/bvaughn/react-devtools-experimental)

[4]
[https://github.com/bvaughn/rfcs/blob/profiler/text/0000-prof...](https://github.com/bvaughn/rfcs/blob/profiler/text/0000-profiler.md)

[5]
[https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcd...](https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcdda16)

[6]
[https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a...](https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977)

~~~
vnchr
Amazing list! Thanks! Just pinged you on Twitter too. I'll add a note here for
anyone interested that I've been looking at performance testing as part of our
functional/regression testing strategy. Haven't used it yet, but this Jest
library with puppeteer looks promising: [https://github.com/jj4th/jest-
puppeteer-performance](https://github.com/jj4th/jest-puppeteer-performance)

------
jbaudanza
Before you spend time profiling a performance issue, make sure you're using
the production build of React. The development build is significantly slower.
It sounds obvious, but I've made the mistake of trying to optimize performance
issues that simply didn't exist in production.

------
pspeter3
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.

~~~
StreamBright
Do you have a blog post or something like that about React performance or the
mental model you got? It would be an interesting read.

~~~
pspeter3
This is probably the best one we have in public
[https://blog.asana.com/2017/08/performance-asana-app-
rewrite...](https://blog.asana.com/2017/08/performance-asana-app-rewrite/). If
you have specific questions, we would be happy to write a follow up one! A lot
of the work we've done has been measuring time from request to finished
render.

------
CallidaVorhis
A few ideas:

\- [https://firebase.google.com/docs/perf-mon/get-started-
web](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](https://www.youtube.com/watch?v=KYYjdWSrRjI&t)
is a good tutorial on wiring your app up)

\- [https://reactjs.org/docs/perf.html](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)

------
mmckelvy
> As React webapps get large and start to contain a lot of complex components,
> they often do not perform well and manifest low FPS in browser.

Is this something you have actually experienced? Can you cite an example of
running into this issue? I've built fairly complex UIs with React (tables with
nested dropdowns, financial statements with a lot of data points, dynamic
charts / graphs, elements with animations, etc. and haven't run into this
issue.

The only time I've seen people have trouble w/ performance is when they use
something like Redux or Apollo on top of React. The problem in those cases of
course is Redux or Apollo, not React itself.

~~~
badestrand
I'm not OP but at work we have a actually not-so-complex website that takes a
full second to render a new page when switching, on my MacBook. On production
and without loading anything via the network.

I blame it on create-react-app, which feels very very bloated to me. Whenever
I write React from scratch it feels super performant, even with Redux and much
more complex layouts than the page I mentioned.

~~~
petetnt
Hi,

as a Create React App maintainer I'd love if you could share some scenarios
where CRA itself would cause performance issues. CRA itself is mostly just
developer tooling and every other feature is opt-in. The team and many
contributors (including people on WebPack team) have spent quite a lot of time
on optimizing the production builds CRA produces; building an React only app
won't have much else than React and React-DOM itself, while we also
automatically do more advanced things like bundle spitting too.

------
mychael
Many of the answers on this post are confusing web performance for rendering
speed.

------
Equiet
Looking for the same. Ideally something that integrates well with Storybook or
Testcafe.

------
catkinson19
WebdriverIO recently got support for Lighthouse, but also the devTools plungin
has support for page load.

If I were to set this up I'd use devtools to throttle the network down to 3g,
and I would actually render the browser in the test.

[https://github.com/webdriverio/webdriverio/tree/master/packa...](https://github.com/webdriverio/webdriverio/tree/master/packages/wdio-
devtools-service/src)

------
econnors
A few resources I've found useful:

\- lighthouse
([https://github.com/GoogleChrome/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/](https://calibreapp.com/)). Gives you
nice graphs and snapshots over time.

