DEV Community

Cover image for How to Reduce React App Loading Time By 70%

Posted on • Updated on • Originally published at

How to Reduce React App Loading Time By 70%

Steps to decrease your React app initial loading time using code splitting.

We build large-scale apps using React. When building these apps, the major issue we face is app performance. When the app grows larger and larger, the performance might deteriorate. Particularly the initial loading time of the app will be affected more. Initial app loading needs to be fast without showing a blank screen for few seconds to the user. As taking more time to load will create a bad impression for the user.

The major cause for this issue is adding too many components into a single bundle file, so the loading of that bundle file might take more time. To avoid this kind of issue, we need to structure our components in an optimized way. To solve this react itself has a native solution, which is code-splitting and lazy loading. Which allows splitting bundle files into a smaller size.

The best place to introduce code splitting is in routes. Route-based code splitting solve half of the issues. But most of the apps are utilizing only 50% of the advantages of code splitting.

Are we structuring the components properly when using code splitting? We can see why and how to fix it using some code samples. For that, we are going to use a sample React app with some UI components.

In the below screenshot, we can see a dashboard component, which has multiple tabs. Each tab has multiple components.

dashboard component

The Dashboard component uses route-based code splitting as the below code.

The Dashboard component contains some sub-components like Sales, Profit, Chart, Tiles and Trends like the below code

We have split the code into routes. so when the app is bundled, we get a separate build file for each route as below


From the above image, the file with a size 405.1 KB is the dashboard component and other files are for the Header, sidebar, other components and CSS.

I have hosted the app in Netlify to test the performance. As if we test the app locally we cannot find the difference. When I tested the hosted app with GTmetrix, the dashboard screen took 2.9 seconds to load, Check the below image for frame by frame loading.


The dashboard component is the initial page for this app, so when we hit the App URL 405.1KB file will be loaded along with the header and sidebar.

Initially, the User will view only the Sales tab, But our sample app dashboard component has multiple tabs. So the browser is downloading other tabs code also, it is delaying the first paint for the user. To decrease the initial load time, we need to make some changes to the dashboard component as below

Here I have imported each tab component with lazy loading and wrapped the component with suspense.

Here I have added multiple suspense for better understanding, but you can use single suspense for all the components.

I have not done any changes to route level code-splitting. When we build the app, some extra files are added as we have lazy-loaded each tab in the dashboard component. Check the below image for build file separation.


Now let's test the app with GTmetrix again with the above changes. See the App performance in the below image


As you can see, Now our dashboard component is loaded in 1 second, as Sales tab code only loaded now. We have reduced almost 2 seconds by making some changes. Let see the comparison of route-based and route, component-based code-splitting in the below images.


Route Based Code Splitting


Route and Component Based Code Splitting

As you see, this is a huge improvement in the app initial load. Now we have reduced the React app initial load time by 70% with a few tweaks by using code splitting effectively in the dashboard component.


  1. Code Splitting
  2. First Contentful Paint


Structuring components in an optimized way and using React APIs effectively will increase the performance of large-scale apps.

Thank you for reading.

Get more updates on Twitter.

You can support me by buying me a coffee ☕


Debugging ReactJS Issues with ChatGPT: 50 Essential Tips and Examples

ReactJS Optimization Techniques and Development Resources

More Blogs

  1. Twitter Followers Tracker using Next.js, NextAuth and TailwindCSS
  2. Don't Optimize Your React App, Use Preact Instead
  3. Build a Portfolio Using Next.js, Tailwind, and Vercel with Dark Mode Support
  4. No More ../../../ Import in React
  5. 10 React Packages with 1K UI Components
  6. Redux Toolkit - The Standard Way to Write Redux
  7. 5 Packages to Optimize and Speed Up Your React App During Development
  8. How To Use Axios in an Optimized and Scalable Way With React
  9. 15 Custom Hooks to Make your React Component Lightweight
  10. 10 Ways to Host Your React App For Free
  11. How to Secure JWT in a Single-Page Application

Top comments (16)

bennypowers profile image
Benny Powers 🇮🇱🇨🇦

best way to optimize a react app is to not use react

use preact if you like the api

use any number of web components libraries if you only want components and templates - lit (oop), haunted (hooks), fast (hybrid), atomico (hooks), hybrids (hybrid)

rubywilson1 profile image
Info Comment hidden by post author - thread only accessible via permalink

Using React by itself will not result in a highly performant application. If you’re not careful, the application can pick up bloat easily. It’s good practice to conduct audits periodically. best tantrik in Kalyan

hyggedev profile image
Chris Hansen

Thank you for this! 👏 Extremely educational. Will implement suspense immediately. But it's still experimental right? Or not ready for production?

nilanth profile image

Suspense is ready for production.

hyggedev profile image
Chris Hansen

Right on 👌

mohdahmad1 profile image
Mohd Ahmad • Edited

switch to preact,It is 3kb alternative to react. use preact/compact to achieve 100% compitability with react apps

capscode profile image

Awesome 👍👍👍

strdr4605 profile image
Dragoș Străinu

Hey, sorry for writing here, but could you add RSS feed to your blog?!

rammah_n profile image

Great explanation! My understanding of lazy loading was a bit hazy but the way you explained it made it much more clearer.

xchavez94x profile image
xchavez94x • Edited

Recently i’ve read about the code splitting and lazy loading and i was thinking ok but how and why, this post put me back on the right track thanks a lot for the effort

nilanth profile image

Thank You

anshulnegitc profile image
Anshul Negi

Insightful content.
Thanks for sharing
Keep writing

sejogit28 profile image
Sean Joseph

This was super helpful, Thank you!

hurdacitelefonu profile image
Hurdacı Telefonu (İstanbul)

Very nice...

vnues profile image

SSR with Suspense also fast

reacthunter0324 profile image
React Hunter

Looks good example!
It would be great if you can explain about the image optimization.
Thank you

Some comments have been hidden by the post's author - find out more