8 Ways to Optimize React App Load Speed for Better Performance

Making your React application fast is crucial. You need to optimize your React app to score higher on Google and other search engines, but more importantly, to provide a much better user experience.

Google’s PageSpeed lets you analyze the performance of your React application, find areas that need improvement, and verify if the fix is working as expected.

It primarily covers the load times, so you need to focus on optimizing the downloading of resources, processing them, and rendering the DOM in your React project to optimize React app performance.

1. Set the Cache-Control Headers

The Cache-Control header instructs the browser and proxies on how to cache your resource, avoiding multiple requests to your server. While it doesn’t affect the first load time, having cached resources will drastically reduce subsequential loads.

They won’t be fetched from a network but read from a fast local cache instead. CDNs also respect this header, meaning resources would be stored on edge locations and served to the users much more quickly.

When using a webpack with a decent configuration, it’s usually safe to set high expiration times for images, CSS, and even JavaScript files. Webpack will add hashes to the names, so the updated asset will have a new name, meaning it’s an entirely different resource from a browser’s perspective, and everything would be fine.

2. Serve Everything From a CDN

You should be using a Content Delivery Network (CDN). It serves your assets from a geographic location closer to the user, which means higher bandwidth with lower latencies. They are optimized for speed and usually don’t cost that much.

CDNs can also proxy and cache your API calls if you need that and usually respect the Cache-Control headers allowing varying expiration times for every resource. You can even configure modern ones to ignore specific query parameters or cache based on cookies. Some of them can enrich your requests with custom headers like the original IP address or IP geolocation.

3. Optimize SVGs

SVG images are pretty widespread nowadays. They are scalable and look good in any dimension, and their file size is often tiny compared to the same raster image.

However, SVGs may contain lots of junk that aren’t used for rendering while still downloaded by the client. Some tools let you optimize react apps, that away automatically.

4. Use Img for SVGs

Things are a bit more complicated with server-side rendering, though. If you have duplicates on the same page, they will be inlined multiple times, increasing the HTML size. The server has to render them, and they will cost some bandwidth. And they can’t be cached or reused and will be duplicated in the JavaScript bundle for client-side rendering.

You’ll have to make them regular image tags to solve that issue. Yes, you will lose the ability to style or animate them, which might be critical in some cases. However, you can still change the color of monochrome icons using CSS filters. There’s even a tool to help with that.

5. Lazy Load Images

You can save some bandwidth on page load by making your images lazy-loaded. Those would be loaded when they are in the viewport or near the scroll position.

Modern browsers support that by simply adding loading=lazy to the image. The browser support isn’t perfect, but other browsers will ignore this attribute and treat it as a typical image.

You can implement lazy-loading for all browsers using IntersectionObserver, but we don’t see the absolute need to do that at this time. You can read more about the techniques in this article.

6. Optimize Other Assets

CSS should be minified and clean. You can use tools to automatically remove unused CSS with tools like purify CSS, but that’s only hiding the problem, in our opinion. Much better to clean it manually and keep it clean. You can’t do that with third-party frameworks, though, and purifying them is sometimes the only option.

Video files are enormous and worth optimizing, especially if you play them in the background. People expect videos to take some time to load, so it’s not a big deal when the user has play controls. For autoplay videos, consider using a nice poster that provides some information to the users while the video is still loading.

7. Leverage Code-Splitting

Code splitting is the best way to fight it. You’ll have to lazy load parts of your code asynchronously and use them only after they’re ready. React has Suspense and React.lazy to help you with that, and react-router also supports lazy routes.

Lazy loading is quite simple with pure client-side apps, but things get tricky when it comes to server-side rendering. You only have one shot to render the page, so asynchronous code won’t work. Everything that’s lazy-loaded on the client has to be ready for rendering ahead of time on the server. Both React.lazy and Suspense are not yet available for server-side rendering.

Imported Component is also an exciting library that promises more features than the other two, works with Suspense, and uses React.lazy under the hood. We haven’t used it in production, and it has much fewer weekly downloads than the mainstream ones, so it’s up to you to decide if you would rely on it in your application. Still, it’s worth playing around in our opinion.

8. Self-Host Your Fonts

Using Google Fonts API or any other similar solutions enabling importing fonts into the project with just one simple line of code:

@import url("https://ewzduhvhjkj.exactdn.com/easyio-fonts/css?family=font-name");

That’s it! Now you can use the font in your CSS, and it would work perfectly.

However, this approach has some performance drawbacks. Let’s consider what happens when a browser loads your page. First, it fetches the HTML page, sees a link to the CSS file, and downloads it too. It would find imports from the other domain in CSS, so it has to establish the connection, fetch the font’s CSS, and finally load the font files.

When multiple websites use the same fonts with the same configuration, there’s a high chance that the user already has the font in the browser cache. In this case, it won’t be downloaded and would save some time instead.

You better make critical architectural decisions, like server-side rendering, code-splitting, and CSS-in-JS, at the beginning of the project. Changing it later introduces too many code changes and regressions. Choose your npm dependencies carefully, as swapping those later won’t be that easy.