How I made my React app 4 times faster.
Techniques you can implement to make your React app blazing fast
Almost 60% of users leave if the page doesn’t load within 3 seconds. 80% of users don’t come back. So if you want your business/app/website to succeed, you need it to be fast.
Benchmarks
Before I tell you what I did differently, here are the numbers. This is assuming you have a fast 3g connection, but in reality, most users will have a much faster connection these days.
- For all the loading benchmarks, I enabled fast 3g throttling and measured the load time on chrome dev tools > network
- First load = caching disabled
- 2nd load= load after caching enabled
As you can see the difference is pretty large especially on slower networks. Now, time to see how I did it all.
I tested the bundle size using source-map-explorer which also shows you how much each library is taking up. For the performance, Accesibility, Best practices and SEO tests I used Google’s Lighthouse. The load tests are simply Chrome DevTools’ network tab load times with 3g throttling enabled for consistent results.
1. CSS instead of CSS-in-JS
In the old implementation, I used styled-components. The problem? CSS is faster and smaller. Not only modern browsers learnt to fetch your CSS in parallel to your JavaScript bundle, it also doesn’t require another runtime library and overhead of about 43 KB minified, resulting in faster load times and less processing is done when styles are changed.
Why do people use CSS-in-JS?
- Scoped styles, no global styling
- Theming
- Because it’s cool
Scoped Styles
With create-react-app now officially supporting scoped CSS Modules (read more), you can now easily create scoped stylesheets without having to add yet another library.
Theming
With styled-components, if you want to add a theme variable all you need to do is wrap it in a ThemeProvider . Well, what if I told you that as of May 2019, 91% of the browsers support a similar feature, but natively and with CSS?
If you think that 91% isn’t enough, think again. IE is no longer supported by create-react-app by default and unless you really need those IE users, you could just use CSS variables, they’re awesome.
Of course, there are more reasons which I won’t be able to cover further in this article, but Gajus Kuizinas covered it very well in his article.
2. Migrating away from large CSS libraries
I’m personally a big fan of material design. React has one of the best material libraries called material-ui. Only problem? It’s large. Pretty large. Even though you will probably only use a few of its components, it’s CSS-in-JS framework will always be included, which is about 30KB minified.
Alternative? I decided to build my own components that I built while building the app, just to recap writing CSS as I haven’t done that in quite a while, but there are a lot of much smaller libraries, such as:
Spectre — 9KB gzipped
Bulma — 40KB gzipped
3. Lazy loading pages
So you have a router with plenty of pages that you’re importing. This might not be a problem when you only have 1–2 pages, but the more pages you have, the higher the initial paint time. Here is what your imports probably look like:
How would you improve this? Luckily react can lazy load them and break down the other components into other small chunks and only load them when they’re needed.
4. Progressive Web App
A service worker alongside a progressive web app will not only allow the user to install the app to their home screen, but also highly improve caching and make the app load much faster after the 1st time.
5. Removing seemingly cool bloatware
On my original website, I added plenty of mount animations that animated items as the page was loaded. Well, not only did it slow down the page but it made it seem MUCH slower. Of course me being a developer and thinking oh it makes the site look cool I didn’t notice it until I looked more into performance. I also had other features like button to scroll to top or items animating one by one on load, which I thought looked pretty cool but it turned out it was really laggy on older devices and I didn’t know that since I didn’t bother testing it on devices other than my laptop.
I also had a slider component that I just pulled off google and then npm without even thinking about the cost of it. I turned out later that the slider in and of itself was about 30KB minified. FOR A SLIDESHOW COMPONENT. I decided to build my own one using react-spring, which did end up being 25KB minified, but that already included a rich animation library and gesture system that can be reused within the app. And it looks much better.
NPM Package
My custom slideshow
You can find the slideshow on my portfolio.
Finding why your bundle size is so big
If you are using CRA, you’re in luck. All you need to do is run npm run build , followed by running a source map explorer npx source-map-explorer "build/static/js/*.js" . This will open a HTML page that looks somewhat like this:
Demo
Although I did make some small visual changes, both sites have very similar layouts (and actually there is an extra font on the improved version, which does increase the load times a little but it’s still so much faster).
Before — Link
After — Link
If you’d like to see more of this type of content, give this article a clap, or two, or 50👏. I have plenty of react tutorials coming up🎉.
