Made in Builder

Made in Builder

×

Developers

Product

Use Cases

Pricing

Developers

Resources

Company

Get StartedLogin

Product

Features

Integrations

Talk to an Expert

Pricing

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

‹ Back to blog

How to Boost the Performance of Your Gatsby Website

May 19, 2022

Written By Steve Sewell

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.

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.

Share

Twitter
LinkedIn
Facebook

Continue Reading
1 MIN
The Personalization Paradox (and how to solve it)
WRITTEN BYSteve Sewell
June 8, 2022
1 MIN
5 best no-code tools for developers
WRITTEN BYSteve Sewell
June 7, 2022
headless cms7 MIN
How Builder accelerates and unlocks headless content management
WRITTEN BYBrent Locks
June 2, 2022

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.

Sign up

Log in

DEVELOPERS

Builder for Developers

Developer Docs

Github

JSX Lite

Qwik

INTEGRATIONS

React

Angular

Next.js

Gatsby

PRODUCT

Product features

Pricing

RESOURCES

User Guides

Blog

Forum

Templates

COMPANY

About

Careers 🚀

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.
Get Started
Log in

DEVELOPERS

Builder for Developers

Developer Docs

Open Source Projects

Performance Insights

INTEGRATIONS

All Integrations

Shopify

React

Angular

Next.js

Gatsby

RESOURCES

User Guides

Blog

Community Forum

Templates

Partners

Submit an Idea

PRODUCT

Features

Pricing

© 2022 Builder.io, Inc.

Security

Privacy Policy

Terms of Service