There are plenty of tools to monitor load times, but I noticed a lack of tools around measuring UI performance (maintaining responsiveness, 60 fps, smooth scrolling, etc) and detecting performance regressions.

In an ideal case, I would record/write a test suite (via Testcafe, Puppeteer or similar) and then run it while measuring the fps/responsiveness of the app. If the fps drops below a certain threshold, tests fail. I would also appreciate an export out of a profiler so that I can compare multiple runs side by side. However, I am open to any other methods, frameworks or best practices.

For context, we are building a complex React app and we want to make sure that the interface always feels fast. This would be used in 2 cases:

  - in performance tuning, I'd like to try out different optimizations (e.g. disabling expensive CSS properties, using React memos, etc) and quickly run a test suite to tell me how much the performance improved across the app (essentially to decide whether the optimization was worth it)
  - as we implement more and more features, we need to make sure the interface doesn't gradually slow down