Part 1 of our React Performance series
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 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.
When marketing people get too excited, they can easily add 200kb of blocking analytics scripts in Google Tag Manager
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.