React.js performance tutorial

by | Nov 25, 2019 | Javascript, Quick help, Recommended sideber, Tutorials

Building applications sometimes can be a bit challenging, especially when we need to build a fast and good-quality application.

These times it can be necessary, especially when search engines can give bonus SEO points for faster working apps, and it can help us to reduce our bouncing rate very strongly.

To help you with that, I’ve created a few hints and tips which you could use to make your app very fast.

1. Use preact

First, what we could do is to use Preact, which is a much smaller alternative to React.

If we will compare size, it’s about 130kb for React and about 16kb for Preact, which gives huge difference, especially when we will gzip our libraries, gzipped React is about 40kb and gzipped Preact is about 4kb (about 10x smaller!).

But we need to care because Preact’s support to few things (like redux-forms or context) is limited, 

2. Use react lazy load

Instead of loading the whole application as one file, we can split our code into smaller chunks, and on the first load, we will download only components that we already need.

To do that we need to import components via 

const componentName = React.lazy(() => import(‚../componentName’)); 

In our case React.lazy gave us huge benefit, and on first view we load only about 100kb file, instead of about 800kb, and our FCP(first content paint) is about 1.8 – 2s.

3. Use CDN

The content delivery network gives us a possibility to load our static files from the closest location to the client(our user), which helps us to avoid latency (sometimes latency between Asia and the USA is even 5 seconds). We can use, for example, Cloudflare (which is relatively easy in configuration and you can use free account). CF will give us CDN, but also features like DDOS protection, proxy (which makes get IP of our server very difficult for a potential attacker), SSL cert, cache, and even can minify our code.

4. Host on S3

Did you know you can easily host your front-end on file hosting service like S3?

It’s very cheap. You can minimize the risk of attack, and if you will combine S3 with CDN sending front-end files to the client(user) is in the lighting speed.

5. Delete unused code (how to check) 

If you use libraries like semantic or bootstrap and load whole, very often, you can load even 300-400kb of unused code, which is not needed and can dramatically make your speed better.

To find first code you can open chrome developer tools, next go-to source tab, and go down to the coverage section, next you need to start recording (like in the network tab), next reload your website, and then you should see which files contain the most significant amount of unused code.

You can delete that code manually or do it via plugins like

babel-plugin-remove-dead-code

or any else.

6. Import only functions from packages which you really need

Importing whole libraries when you need only part of them can be a performance killer.

For example, when we import the whole lodash, it weights 71kb(24kb gzipped), but if we load only get method, it will weight 8kb(2kb gzipped).

To do that we need to import selected function like 

import get from 'lodash/get';

instead of loading whole by

import lodash from 'lodash';

7. Cut your class names

We can reduce a lot of bundle size if we make our classed much smaller.

For example, we don’t always need to name CSS class of our element by className=’red-rounded-purchase-button’, sometimes it is enough to call 

className='red-buy-btn'

or use webpack config which will change it to

className='c73'

. In some cases, it can save us even 60% of our bundle size.

8. Do not overcomplicate your app

If you build a simple application, you don’t need Redux/GraphQL with Apollo or even CSSModules in every case. These can be ultra-helpfull, but all together could make your app bigger for a few hundred kb (in the worst case of bad planning and loading all these in every chunk even much more and make a lot of mess inside your app).

In many cases, you can easily use stocked methods like, for example, context or hooks.

9. Configure webpack properly

You can configure webpack to create chunks, minify your code (CSS and js) and even delete console.log, comments, and dead code, which can be very helpful.

Remember about separating the production and development environment by webpack flags!

10. Minify code

Minification is a process when our code is cleaned from not necessary elements and rewritten in a shorter version.

It can save for us a lot of size, and help with execution time.

We can do it on build level (point 9.) or for example, by CDN.

11. Avoid too many renders

Every render is an additional execution time for our app. In many cases, we render our component many times what is not needed. Its many points which you can consider to ‚not to do’ to avoid re-render, like no index in key or avoiding initial props inside initial state.

12. Use React.Fragment

We can reduce our dom elements (and even bundle size, if we will use <></> instead of div) by using 

<React.Fragment></React.Fragment>

instead of empty divs.

13. Optimize images

Huge images, fonts, and icons sometimes can be a nightmare of a web developer.

But we can reduce even 80% of images by compressing them via compressors, like, for example, compressor.io.

14. Don’t load the whole font with icons

Instead of loading (very often) 200kb icons, we can select these few icons which we need, and create a font with these.

In our case, it helped us reduce from about 250kb to 1.5kb.

15. Use performance monitors

If we would like to monitor our application, we need first to check how fast our components are rendering, and how much time we waste on that, to do this, we can use react-addons-perf.

Very helpful could be as well why-did-update, which will show us which components re-render and where should we investigate to focus on refactoring.

And one of the most helpful for me is the webpack-bundle-analyzer, which helps me to verify how big my chunks are, where I could make them smaller, and how to plan my code structure to avoid double-loads of dependencies.

Conclusion

It’s 15 the most used points by me. They’re very general, and if you would like to work on the optimization of apps, I would recommend going more deep inside all of them, especially points like re-rendering in react or configuring webpack.

I hope you like my content, and these hints will be helpful when you will be building or optimizing your app!

Thanks for reading,

Radek from Duomly

Duomly - programming online courses

Start learning now!

Angular tutorial

Some time ago, I created the first tutorial about React.js where I showed you how to create an easy React.js application using an existing API and Bootstrap for styling. The positive response for this article brought me to the idea of creating a series of simple...

What skills you need to be a good developer?

Every profession has special requirements; for example, to be a doctor, you have to know biology, finish medical university, but besides the hard skills, as a doctor, you have to be emphatic. As a teacher, you need to have qualifications to work with kids, but you...

Angular tutorial

Angular tutorial

Some time ago, I created the first tutorial about React.js where I showed you how to create an easy React.js application using an existing API and Bootstrap for styling. The positive response for this article brought me to the idea of creating a series of simple...

Vue.js tutorial: How to create Vue.js app in 5 minutes?

Vue.js tutorial: How to create Vue.js app in 5 minutes?

Vue.js is getting more and more popular, becoming a meaning competitor to frameworks like Angular or React.js. As a beginner-friendly front-end framework, it successfully conquers the hearts of junior front-end developers and people who just started to learn front-end...

8 CSS image filters with code examples

8 CSS image filters with code examples

Using images, we can create an atmosphere, arouse happiness, smile, sadness, or any different emotion. With images, we can show a lot, and tell a lot as well; that’s why pictures are so widely used in the websites and applications. Designers take care of how users...

CSS Grid tutorial

CSS Grid tutorial

When we build front-end, always we need to create a structure of our page, and very often, we need to create any grid. We can position elements in a few ways. For example, in the previous article I showed you how we could do it via flexbox. So, today, I would like to...

18 websites, where you can find a remote job

18 websites, where you can find a remote job

If you are a mum, who needs lots of flexibility in work to take care of kids, or digital nomad who travels a lot and need a job which can be done from different places in the world, or maybe your health issues don’t let you go to the office easily, or maybe you just...

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!

Share This