5 Things you can do to make your (React based) website load super fast
React is one of the most popular libraries to create comprehensive single page applications.
Single page applications have a lot of advantages but also a few disadvantages, which are especially detrimental to the performance of websites.
To improve the user experience of your website and especially the loading time of your website, you can use the following 5 techniques:
1. Use Server Side Rendering (SSR)
For single page applications in general, the content of a web page is usually rendered only on the client. With server side rendering, the first rendering is already done on the server which leads to a faster loading time for the user.
You should use server-side rendering not only for performance, but mainly to give search engines a change to crawl and index your page.
Either you can implement SSR yourself (https://reactjs.org/docs/react-dom-server.html), or use a frameworks like Razzle (https://razzlejs.org/) or Next.js (https://nextjs.org/) that offers SSR out of the box.
2. Use Code Splitting
A big problem that you have with React or generally with javascript based single page applications, is that the javascript code of the whole webpage is normally packed into one huge javascript file with packers like webpacker, rollup or browserify.
This has the consequence that when you call the first page of a website, you have to download all the code that is actually not used on that first page.
To optimize this, there are several ways to split the javascript code and also the stylesheets into several parts, so that code gets only loaded if needed.
React itself offers the function React.lazy for that (see https://reactjs.org/docs/code-splitting.html), but in connection with SSR this does not work properly. Therefore I recommend the project Loadable Components (https://github.com/gregberge/loadable-components).
When you use next.js as a framework, you don’t have to worry about splitting code because it supports it out of the box.
3. Lazy load Images
Images need a lot of bandwidth and are loaded even if the user doesn’t see them yet and has to scroll down to see them. Especially when the user navigates away from the first page without scrolling down, the browser may have downloaded images that the user has never seen.
The image component of next.js does this by default, it loads the images only when they are about to be displayed.
If you don’t use next.js, there is of course an npm package for that: https://github.com/Aljullu/react-lazy-load-image-component
4. Lazy load Components
The same applies to React components or parts of your website. For example, if you have a contact form at the bottom of your page that requires large libraries like Google Captcha and is irrelevant to the search engine index, you can also lazy load these components and their dependencies when the user scrolls close to them.
A library that simplifies that for you: https://github.com/gregberge/loadable-components
5. Optimize all images and convert them to webp format
WebP is an image file format that Google has developed as a replacement for JPEG, PNG, and GIF file formats. (Wikipedia)
Now this is nothing react specific, but of course applies to any kind of website.
To prevent long loading times, you should always make sure that images on the web are as small as possible.
According to https://caniuse.com/webp webp is supported by all major browsers.
The only browser that doesn’t, is of course Microsoft Internet Explorer. But from my point of view you should intentionally not support it anymore, so that it finally disappears completely and forever 😝.
This is a small shell script, with which you can easily convert all images in a directory to the webp format:
