How to Performance test react js application?

Question

How can i do client side performance testing for ReactJS applications?

is there any similar kind in JMeter like true client protocol as in Load runner to test the ReactJS applications. Or any other approach with which i can test ReactJS applications.

Answer 1

You can use the lighthouse inbuilt functionality by Google Chrome.

Answer 2

JMeter by default doesn't have any TruClient like capabilities. It is when integrated with Selenium, it brings out certain other aspects of performance which are useful.

But in your case, I would highly suggest using React Developer Tools (chrome extension by Facebook) for all performance measurements related to ReactJS Apps. Once that is installed you would notice 2 additional tabs in Chrome's Dev Tools which will help you along for performance optimizations.

I would personally follow a 2 pronged approach for optimizations

1. Measure performance for single users using React Dev tools, sit on them and optimize them
2. Once single user performance is satisfactory, I would push load to backend using load testing tools (could be JMeter) and leverage React Dev tools once again to measure & address any client side performance issues when backend is loaded

Answer 3

As per TruClient documentation:

TruClient is a browser-based tool for creating scripts that can be used in load testing or monitoring web and mobile applications.

So it's not a "protocol", it is basically a headless browser.

If you need to assess client-side performance of your application using JMeter you can achieve the same via WebDriver Sampler which provides JMeter integration with Selenium browser automation framework.

You can install WebDriver Sampler using JMeter Plugins Manager