DEV Community

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

How to Reduce React App Loading Time By 70%

Nilanth
Full Stack Developer | ReactJS | Redux | Laravel | AWS | Follow on Twitter for daily updates | Let’s make the web. Faster 🚀
Originally published at javascript.plainenglish.io ・4 min read

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

build-files

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.

frames

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.

build-splitcoding

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

frames-code

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-frames

Route Based Code Splitting

component-based-frames

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.

Reference

  1. Code Splitting
  2. First Contentful Paint

Conclusion

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.

More Blogs

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

Discussion (15)

Collapse
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)

Collapse
jfbrennan profile image
Jordan Brennan

I’m still baffled every time I see one of these million “improve React load time” posts because they never mention Preact. That’s the first step. May god free these captive souls!

Collapse
zakiazfar profile image
Mohd Ahmad • Edited

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

Collapse
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?

Collapse
nilanth profile image
Nilanth Author

Suspense is ready for production.

Collapse
hyggedev profile image
Chris Hansen

Right on 👌

Collapse
capscode profile image
capscode

Awesome 👍👍👍

Collapse
sejogit28 profile image
Sean Joseph

This was super helpful, Thank you!

Collapse
rammah_n profile image
Rammah

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

Collapse
strdr4605 profile image
Dragoș Străinu

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

Collapse
hurdacitelefonu profile image
Hurdacı Telefonu (İstanbul)

Very nice...

Collapse
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

Collapse
nilanth profile image
Nilanth Author

Thank You

Collapse
vnues profile image
vnues

SSR with Suspense also fast

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