Do you want to Improve React JS website performance? The best way to decide what performs better is to conduct experiments, compare them, and finally conclude.
Any company in the world needs to have an online presence to convey the value of its products or services. Websites, apps, and web apps are the mediums through which one can showcase their products in front of potential customers (collectively termed as front-end). Hence, a well-performing front end is the most important thing for modern businesses.
At Kommunicate, we use React JS with some plugins such as Webpack and Redux. A good and experienced NodeJS developer has a strong foundation of knowledge of various tools and libraries. Today, we will share the knowledge/experiments that we conducted to improve React JS website performance significantly.
Before diving deeper into it, let’s make sure we are on the same page. First, we will discuss the basic data flow of how your front-end code gets served to users.
Whenever anyone opens up any website, the basic flow is:
In the browser, the user enters the website’s URL and opens it.
Browser interacts with the specified website’s server with some standard protocols.
The server returns browser-understandable responses (In this case, it is all the code required to show web pages, i.e., HTML + CSS + JS files).
The browser takes that response, processes it, and shows that in the dedicated window/tab.
The below diagram illustrates the same.
One must target multiple phases/levels individually to improve the website’s performance. In the above workflow, when the user navigates to the website, there are two phases:
The browser gets the code from the server — code download time.
The browser executes that code and generates UI elements — code execution time.
Improving phase 1 is easier than the 2nd one because it does not change with the programming language used for developing the front end.
In this blog, we will discuss phase 1, i.e., how to serve your code faster.
To make your code publicly accessible (or to deploy the code), there are multiple solutions:
Use some cloud-hosted machine such as AWS EC2 or any other cloud service and deploy the code there.
Create a Content Delivery Network (CDN) and host there (For example, Cloud front + AWS S3 )
Use some service that handles all the human efforts of maintaining and scaling the system.
Let’s discuss these in detail.Host the Code on Cloud
From the above image, you must have got some idea of how front-end code is served, right? If not, I’ll explain further.
This is more like an old-school concept and a pretty straightforward approach. All you need is a machine to build your project, run a server, and then host the build. Usually, no other complexities are involved in this. With this, you can get your front-end servers up and serve code in the form of UI to customers.
Broadly there are two ways to host the code on a cloud server.Write Your Own Server Code
Write code to run the server and serve your build folder with it. In JavaScript, it might look something like this.
