React.js Performance Tutorial

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 benefits, and on the 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 callclassName=‘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 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