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.
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.
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.
Reduce the impact of A/B testing and other third-party scripts
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.
Not sure if your website needs a performance boost? Plug your URL in our Performance Insights tool to find out.