It’s hard to overemphasize the importance of a fast-loading, high-performance website, especially in the world of ecommerce. With built-in performance, scalability, and security, Gatsby makes building performant websites much easier for developers. But to maximize the impact of Gatsby, it’s important to leverage all the features it comes with and also implement a few more essential optimizations.
Tip: Visit our Gatsby CMS Hub for more related content.
Improving the performance of your Gatsby site
Gatsby is a free, open-source framework that is built on top of React, GraphQL, and Webpack. It allows for such lightning-fast websites right out of the box that Figma, Nike, National Geographic, and even the official ReactJS websites are all built on Gatsby. Developers love Gatsby because it is an effective static site generator with great documentation and several plugins to boost performance. Some of Gatsby’s top features include Static Site Generation page rendering, progressive rendering, prefetching internal links, inlining critical CSS in HTML, and progressive image support.
Here are some best practices that web developers who use Gatsby stand by.
Optimize images
We’ve covered image optimization in detail before. Gatsby handles build-time image optimization by default. Apart from that, the Gatsby Image plugin also allows you to add responsive images while also maintaining high performance. It takes most, if not all, of the hard work of creating images in multiple sizes and formats off your plate. This plugin automatically lazy loads images and delivers them in the WebP format.
Optimize JavaScript
We’ve explained in detail how you can optimize JavaScript to improve performance. Although images and JavaScript can both impact page speed, 1 MB of images are not as harmful to your website’s performance as 1 MB of JavaScript. With Gatsby, much of the JavaScript minification happens within the framework. Gatsby also breaks your application up into smaller Javascript chunks and only pulls them into the page when needed. Gatsby has several plugins that help you monitor page weight and identify the heaviest chunks of JavaScript (like third-party scripts that impede your page’s performance). Using Gatsby in combination with tools like Partytown, Qwik, or a CMS like Builder.io will help you achieve maximum speed.
Gatsby also enables inlining and code-splitting, allowing you to delay non-critical and third-party JavaScript from loading before the main page has loaded.
Minimize custom fonts
Custom fonts might look beautiful on the screen, but they take long to load and heavily impact your website’s load speed. There are several standard, browser-supported fonts that could help you maintain your performance. If you use the gatsby-plugin-web-font-loader, you can asynchronously load render-blocking fonts.
By default, until the critical CSS components have been requested, webfonts are delayed. This may lead to delayed text rendering, which brings down the user experience, especially if it’s text that the user urgently needs to see. The plugin gatsby-plugin-preload-fonts will automatically preload all the necessary web fonts.
Switch to Preact
Gatsby comes with gatsby-plugin-preact which supports Preact, a smaller (3kb), faster alternative to React. Depending on the kind of website you’re building, switching to Preact might be the easiest way to significantly improve performance. Not only the size of Preact, but its fast virtual DOM contributes to the increased speed.
Embrace progressive web app standards
A progressive web app (PWA) is a mobile website that acts like an app, giving users a native-app-like experience. These optimizations are essentially what Lighthouse scores measure. Lighthouse’s PWA metrics require service workers. Gatsby’s gatsby-plugin-offline automatically generates service workers and helps you maintain your full interactive site offline.
Optimize CSS
Optimizing CSS has been elaborately discussed in another blog post. As mentioned before, Gatsby lets you inline critical CSS directly in your HTML. Gatsby also supports CSS-in-JavaScript libraries.
Reduce the impact of A/B testing and other third-party scripts
It’s clear that the more JavaScript you add to your code, the more it increases the page weight and impacts your performance. However, most businesses need analytics, heatmaps, A/B testing, etc., so they can measure user engagement and other key metrics. These third-party scripts block the main thread and make your pages load slowly.
If you prioritize performance and avoid third-party scripts entirely, you’ll lose these functionalities and business teams will increasingly rely on developers to pull this data for them. On the other hand, if you prioritize these capabilities that are crucial to your business performance, it will make your pages slow and affect user experience. At Builder, we call this the conversion paradox.
This gap can be bridged with an API-driven solution like Builder.io. Instead of blocking your first-party JavaScript, Builder generates each variation of the content server-side. All it takes is one small inline script to split and send each variation to the appropriate users. You can also use Partytown to relocate resource-intensive scripts into a web worker and off of the main thread to improve performance.
Conclusion
Right out of the box, Gatsby lets you build super fast websites. That doesn’t mean you shouldn’t take additional measures to improve your site’s load speed. Some steps include prioritizing above-the-fold content and deferring content that your user doesn’t need right away, lazy loading images and JavaScript, and so on.
Not sure if your website needs a performance boost? Plug your URL in our Performance Insights tool to find out.
