Introduction

Users always expect a great experience when visiting any website. One of the most important criteria that distinguishes an excellent user experience from a bad one is the website's loading time, allowing the user to start browsing.

An important piece of information every developer should know is that JavaScript is a single-threaded language. This means it executes operations sequentially using event loops.

The most important tasks performed by the main thread are rendering the user interface and executing JavaScript code. To achieve higher performance, the main thread should not be occupied with executing tasks for extended periods.

This leads us to the most important factors in improving website performance:

1- Reduce the Bundle Size

To reduce the bundle size, first avoid excessive use of third-party libraries. Here, I recommend using bundlephobia, which determines the package size and loading speed.

2- Code Splitting

The benefit of splitting code into small chunks is that it allows you to execute the required code first and delays the execution of the unnecessary code. It also reduces the Initial Load Time (IPL), which is very important, especially in Single Page Applications (SPAs). The steps for splitting code are:

1-

Copyts
1// instead of:
2
3import Home from "./pages/Home";
4
5functionApp(){
6return <Home/>
7}

2- Use Dynamic Import

Copyts
1// Use:
2import { Suspense, lazy } from "react";
3import { Routes, Route } from "react-router-dom";
4const Home = lazy(() => import("./pages/Home"));
5
6functionApp(){
7return( 
8<Suspense fallback={<Loading/>} 
9<Routes> 
10<Route index element={<Home />} /> 
11</Routes> 
12</Suspense> 
13);
14}
15

Before using Dynamic Import & Code Splitting:

After using Dynamic Import & Code Splitting:

Summary

1. JavaScript is a single-threaded language that executes operations sequentially, one after another.
2. The main functions of the main thread are displaying the user interface (UI) and executing JavaScript code.
3. The less busy the main thread is, the higher its performance.
4. To ensure lower main thread load times, reduce the bundle size and use lazy loading.

Sources

1- Main Thread

2- How Browser Work