How Gatsby Can Solve Your Website Performance Issues

I designed Gatsby with the goal that when using it, it’d be really hard to build a slow site

– Kyle Matthews, GatsbyJS creator

Gatsby In a Nutshell

You probably haven’t heard about GatsbyJS yet, because it’s an entirely fresh approach to building apps. Today, interest in it is rapidly growing. Just take a look at the brands that have already utilized this technology: Airbnb, Nike, Braun, Figma, even the official React website has been completely rebuilt with Gatsby.  

So, what is Gatsby? Some will name it a Static Site Generator or Progressive Web App Generator, or even Content Mesh System Creator. Doubtlessly, all of these statements are true. But to fully understand the advantages of Gatsby’s framework, we need to go in-depth and explain the differences between the conventional approach of building websites (using CMS), static sites, PWA, and Gatsby.

The Problem of the CMS Speed

How Static Site Generators Solve This Problem 

This approach is about building static HTML files and placing them on fast CDN servers. In this case, when you make changes to the admin panel, pages are automatically generated.

The intermediate processes between navigating to a page and displaying content on the screen are greatly reduced. It speeds up page loading significantly.

• The browser requests a server to get the entire page
• The server processes the request
• The server makes many requests to the database for data
• The server prepares this data, draws it based on HTML
• The server returns the entire page’s HTML. 

Gatsby – From Fast to Instant

Gatsby goes even further toward improving performance and creates extra workflows committed to this purpose. It helps users to navigate your site instantly without any delays. Sounds like magic? No, it’s just about the new way of how everything works inside. There’s no more need in additional requests to the server, which results in the increase of speed and consequently, a better user experience. Here’s how it goes:

Link Prefetching

User interaction with any website occurs in 2 stages:

• The first download of a page 
• Further site navigation

The First Downloading

When you first load a page, Gatsby works similarly to the Static site generator – it fetches static HTML pages on the server, making the first-page load as fast as possible. Placing static pages on CDN servers minimizes the loss of speed associated with the geographical distance between the user and the server.

Further Navigation

Further site navigation is Gatsby’s main killer feature that allows you not just to load pages quickly, but to do it instantly without even requesting a server when navigating pages within the site.

As a result, the user loads the page for the first time and then uses the site as if it were a regular desktop or mobile application, without any, even minimal, delays when navigating between pages.

How Instant Loading Works

This behavior is ensured with the help of Prefetching data. 

• When the user visits a website, Gatsby collects hyperlink information to other pages that are on the user’s screen.
• The script then asynchronously running in the background, downloads the data from the pages that follow these links. This data is also available on a static server, so it takes minimum time to receive it. 
• When a user navigates to any of the links, the data for that page is already uploaded to the user’s computer and is inserted into the HTML code using Javascript. This happens instantly, without any visible transition.
• Links that are outside the screen’s visible area are not downloaded. But if the user scrolls down the page as new links appear, the data from those pages will also load.

PWA and Offline

Progressive Web Apps is a universal solution that can effectively operate on any device and enable websites to provide their users with maximum mobile and handy experience.

If you are using a PWA version of your site, the Instant Page Navigation method will enable your users to get the most out of it. It’ll be fast, working even in a poor connectivity environment and allow users to save the website right on their home screens. The page transitions will be similar to transitions between the application slides, without any delays.
If necessary, Gatsby allows you to set up offline support with Service workers, which can also be very useful for PWA versions.

Browser Optimization

In addition to data prefetching, Gatsby uses other methods of maximizing performance.

Static page generation and data prefetching allow you to maximize the speed of data extraction from the server. But for maximum optimization, it is also essential to ensure the fast rendering of the HTML received from the server. 

To do this, Gatsby uses:

• Photo optimization
• Lazy loading pics
• Javascript code splitting
• Critical CSS

It allows the browser to work only with the resources that are needed to display the information that the user is currently seeing and to load additional resources when necessary. Along with image size optimization, it dramatically speeds up page rendering in the browser.

Automatic Image Optimization

All images added through the admin panel undergo an optimization phase. It includes:

• Creating responsive images. That is, for mobile devices, smaller photos will be uploaded instead of full-size ones.
• Optimize image weight without compromising quality

You can add photos of any size and weight through the admin panel, and Gatsby optimizes everything itself.

Native Lazy-loading  

All photos on a page are only uploaded when they are within the user’s visibility. Other images only appear when the user approaches them as the page scrolls.

Javascript Code Splitting

The browser only receives these scripts, which are needed by the user at this time. This leads to the smaller volumes of data downloaded from the server, boosting faster data transfer from the server. 

The faster the scripts are executed by the browser, the faster the page is restored in the browser.

Inline Critical CSS

Only the stylesheets required to display the page are loaded on the page. In this case, styles are automatically inserted inside the HTML file, which allows no CSS file to be downloaded from the server at all.

Conclusion

Gatsby allows you to create blazing-fast websites. The following methods are used for that: 

• Static page generation with CDN servers for the blazing-fast first-page load;
• Images optimization, native lazy-loading, Javascript code splitting, and inline critical CSS for enhancing browser rendering performance. 
• Link prefetching for instant navigation between pages.

The official website of our company softblues.io  fully demonstrates the efficiency of the techniques listed above. Previously, our website was built with WordPress.To experience the benefits of the new technology,  we applied Gatsby to build a brand new high-performance frontend and left WordPress on the backend for content managing. The admin panel hasn’t been changed and the content stayed the same as well. Just check the results we achieved with our redesign in the table below!

Website version	Old site based on Simple WordPress CMS	New site, based on Gatsby with Headless WordPress
First Contentful Paint Marks the time at which the first text or image is painted	1.5 s	0.5 s
Speed Index shows how quickly the contents of a page are visibly populated	4,3 s	0.8 s
Time to Interactive amount of time it takes for the page to become fully interactive	2,6 s	0.5 s
First Meaningful Paint measures when the primary content of a page is visible	3.6 s	0.5 s
First CPU Idle marks the first time at which the page’s main thread is quiet enough to handle input	3.6 s	0.5 s
Max Potential First Input Delay The maximum potential First Input Delay that your users could experience is the duration, in milliseconds, of the longest task	150 ms	40 ms