loading...
Cover image for 3 Best Practices for React Performance Tuning

3 Best Practices for React Performance Tuning

hiroki0525 profile image hiroki0525 ・3 min read

I improved the performance of my React site(Sorry, this is Japanese site) and increased Light House Score as below.

Alt Text
(Measured in 2020/08/12)

This article introduces you to my 3 best practices of React performance tuning based on my site.

  1. Use SSG

  2. Change style framework to own stylesheet

  3. Use react-window

※ The numerical data this article shows is just for your reference.

1. Use SSG

You should use Static Site Generator(SSG). In my site, By changing SPA(Single Page Application) to SSG, the performance
score was changed about 30 to 80(List Items 10).

If you adopt SSG, I recommend Next.js. That’s because NextJs has many advantages. The following is a few features.

2. Change style framework to own stylesheet

I found the bottleneck of rendering my site quickly was material-ui. The time to load its script was same as React library. Light House Performance Score was up about 20 points by styling myself.

I also recommend CSS Modules if you will add stylesheet yourself. This is why CSS Modules is better than inline-styles and CSS in JS in terms of React performance tuning. The facts is the following.

By the way, Next.js allows you to use CSS modules simply.
(see Built-In CSS Support)

3. Use react-window

You should adopt react-window if your site has list page rendering many components. The performance score was up about 20 by this approach.

You may think why I recommend not react-virtualized but react-window. Actually, Facebook recommends windowing libraries as react-window and react-virtualized(see Optimizing Performance).
The reason is the react-window developer who also developed react-virtualized recommends to use react-window(see github). In addition, the unpacked size of react-window is 865kB, on the other hand the one of react-virtualized is 2.27MB as below.

Conclusion

This article showed how to improve the performance of React App based on my site as follows.

  1. Use SSG

  2. Change style framework to own stylesheet

  3. Use react-window

Recently, the importance of rendering page quickly has increased like Core Web Vitals. I hope your Web site renders more quickly!

Posted on by:

hiroki0525 profile

hiroki0525

@hiroki0525

I am a cool cat, but coding is poor. I cannot speak English very well because I am a cat, meow. Japanese Web Developer

Discussion

markdown guide
 

Thanks, this is really interesting. I'll try as soon as I can!

 

Thank you for the positive response! Go for it!