Indonesia Data

Any company in the world needs to have an online presence to convey the value of their 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, 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 did to improve React.js website performance significantly.

Before diving deeper into it, let make sure we are on the same self employed data page. We will first discuss the basic data flow of how your front-end code gets served to users.

CTA banner
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.

basic data flow
The basic architecture of how frontend code is served
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.