Latest news about Bitcoin and all cryptocurrencies. Your daily crypto news habit.
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.
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.
Simply switching from styled-components to CSS can shave off about 0.3s from your load times
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 gzippedhttps://picturepan2.github.io/spectre/index.htmlBulma — 40KB gzippedhttps://bulma.io/
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 PackageMy custom slideshowIt’s a lot smoother IRL, I promise (.GIF framerate is bad)
You can find the slideshow on my portfolio.
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 — Linkhttps://domt.surge.shAfter — Linkhttps://dominikt.now.sh/
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🎉.
How I made my React app 4 times faster. was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.
Disclaimer
The views and opinions expressed in this article are solely those of the authors and do not reflect the views of Bitcoin Insider. Every investment and trading move involves risk - this is especially true for cryptocurrencies given their volatility. We strongly advise our readers to conduct their own research when making a decision.