Don't optimize your Javascript! Do this instead

Welcome to the React Performance Optimization series on systemseed.com. It’s a practical guide to improving performance of mature or even legacy React websites without significant refactoring. Follow us on Twitter to read the next parts as they get published.

The React ecosystem is often criticized for an unnecessarily large amount of client-side Javascript. React maintainers work hard to optimize performance in every new release. Developers hunt for the smallest third-party libraries available in npm. Forks like Preact offer a significant performance boost and an easy migration path.

Yet the issue persists. Every performance audit, manual or automated, will recommend removing half of the Javascript code from your React site.

The truth is that optimizing Javascript won't solve all your performance issues. It may even be useless if you haven't optimized other aspects of the site first.

The good news is that there are plenty of low-cost optimization opportunities that may speed up your site without any further steps. Do them to optimize your site without even touching React.

Leverage CDN usage

Modern CDN services like Cloudflare or Fastly allow you to significantly improve site performance by serving cached versions of images, CSS & JS files, and even entire web pages. They can also offer some extra features like HTTP2, compression, image optimization, etc.

If you can't use the CDN cache, make sure the Time To First Byte (TTFB) is as small as possible by placing your servers closer to your users.

Lazy load images

All popular browsers actively adopt image lazy loading via the loading="lazy" property. Implement this easy fix now to significantly reduce total page size, especially on mobile!

Of course, image optimization doesn't stop there. Responsive images and WebP should be next in the optimization list for media-rich sites.

Avoid heavy analytics scripts

As stated in the third-party-web report by Patrick Hulce: Across top ~4 million sites, ~2700 origins account for ~57% of all script execution time with the top 50 entities already accounting for ~47%. Third-party script execution is the majority chunk of the web today, and it's important to make informed choices.

When marketing people get too excited, they can easily add 200kb of blocking analytics scripts in Google Tag Manager.

In reality, not every website needs heavy external analytics. Do you really need to know about every mouse move on the site to monitor its key KPIs? Do you really need to load all tracking pixels on all pages? Do you need to send the same data in three different services? These questions can help you make analytics fast, useful and ethical.

As a first step, make sure all analytics scripts have async attribute.

Preload web fonts and hero images

Another quick improvement is resource preloading with <link rel="preload">. It's most useful for web fonts and above-the-fold hero images. In addition to that, you can use resource hints to warm up the connection to other domains that host your site resources.

Final note

The key take away from the first part of this React Performance Optimization series is that you shouldn’t start your optimization efforts from Javascript. Apply web industry best practices first to gain initial acceleration. 

In the next part, we will dive deeper into web performance audit tools. If you are interested in Javascript-specific optimizations, they will be discussed in part 3 of the series. Follow us on Twitter to read the next parts as they get published.