Download

Check out our new Headless CMS Implementation Checklist: Download Checklist

Chat

3 Ways Gatsby 4 Will Improve your Website Performance

Gatsby JS, a modern front-end framework organizations use to build custom web products, recently introduced another set of exciting updates that equally empower development and marketing teams. Read more on the updates Gatsby announced in their V4 update.

Oct 19th, 20214 minutes

Eric Izazaga

Marketing Coordinator

3 Ways Gatsby 4 Will Improve your Website Performance - Blog Post

While there are many good javascript-based font-end website frameworks, the leading framework to elevate your website's performance is Gatsby JS.

With new features released in Gatsby V4, companies building headless CMS websites can dramatically increase the effectiveness, usability, and performance of their website.

What is Gatsby JS?

Gatsby is a modern front-end framework that is often paired with decoupled content structures such as headless CMS platforms to build static generated websites.

Gatsby's speed and flexibility are made possible because of the technologies behind static site generators and the JAMstack framework.

What is a Static Site Generator?

A static site generator compiles data, content, and templates at build time so pages can be served to visitors immediately without requiring the visitor's browser to render HTML (i.e. static site generators eliminate client-side rendering).

What happens at build time for static site generators like Gatsby JS?

At build time, data and content are fetched through external APIs, is laid out within a predefined page template, built (i.e. compiled) into static pages, and deployed to a web server, that will display the fully rendered HTML page to a website visitor.

This is the key to static site generators' superior performance metrics: pages are fully rendered ahead of time, and abstract the rendering resources from the client's browser.

The performance improvements afforded by static site generators help organizations improve their Core Web Vitals, a set of page experience metrics Google's algorithm uses to understand how performant and easy-to-use websites are to visitors.

What does JAMstack mean?

JAMstack is a technology stack that includes Javascript, APIs, and Markup (JAM).

JavaScript website frameworks like Gatsby take data and content from APIs and display them within website page templates at build time.

APIs (Application Programming Interfaces) provide Javascript frameworks with the data and content they need to display to users. Third-party APIs such as those used with Headless CMS platforms like Contentful house entities, attributes, data, articles, tags, images, and every piece of content that will be displayed to website visitors.

Markup describes the Javascript website framework's markdown files that are fetched to serve the static HTML files.

Understanding static site generators and the JAMstack framework, let’s explore what's new with Gatsby V4 and how their technology is evolving.

What's the difference between Gatsby V3 and V4?

Gatsby V4 introduces new page rendering methods such as server-side rendering and deferred static generation, reduces the time it takes to build and deploy updates, and offers website operation teams greater flexibility to experiment through A/B testing.

The main improvements offered by Gatsby V3 included improved build and image processing, incremental builds, and a new image plugin for better core web vitals.

3 Ways Gatsby V4 Will Improve your Website

Here are 3 ways that you can use Gatsby V4 to improve your website performance and user experience for development teams, marketing departments, and website visitors.

1. Dramatically Decrease Build and Deploy Times

Gatsby V4 introduced parallel query running which enables servers to run multiple queries at once, speeding up the build process instead of processing one massive query.

As a result, Gatsby V4 reduced deploy times by up to 90% for large sites with 1000s of pages, which previously could take up to 10 minutes to complete.

Now, Gatsby users can hit publish within their headless CMS and not have to worry about waiting multiple minutes for their website updates to be reflected online.

2. Gatsby V4 Supports New Rendering Methods

Gatsby V4 supports two new rendering methods, server-side rendering and deferred static generation, empowering development teams to pick and choose which website pages will be built at build time (static-site generation) and which pages will be served when the client submits a request to the server (server-side rendering).

How is server-side rendering different from client-side rendering?

Server-side rendering renders website pages that are requested by website visitors on the server and then displayed in the browser, which is the opposite of static-site generation. Serve-side rendering abstracts the computing power from the website visitor's browser and handles it on the webserver.

How is deferred static generation different from static site generation?

Deferred static generation is a new method of content generation that allows website developers the ability to choose what pages can be served as static pages, and which can be rendered dynamically on the server.

Deferred static generation will incur a slight decrease in page load speed, but this hybrid functionality affords marketing teams more control over website personalization, tracking, optimizations, and A/B testing (more on this in the next section).

For example, large websites like The New York Times or ESPN could leverage deferred static site generation to choose which pages are static such as blog posts and company pages, and which pages should use server-side rendering such as pages with live news updates or scoring summaries.

Gatsby V4 gives teams the best of both worlds when it comes to rendering methods. All that is needed is a Gatsby-hosted site, a team to define which pages need a rebuild every time, and a developer to implement deferred static generation.

3. Use A/B Testing Tools to Personalize Website Experiences

With deferred static generation, Gatsby V4 enables marketing teams to run A/B tests on specific pages that use server-side rendering while maintaining incredibly fast website loading times. Gatsby-powered websites can also integrate with 3rd-party systems to track website behavior to launch targeted user experiences to all our users.

One such 3rd-party Gatsby website personalization experience we built uses Google Optimize, HubSpot, and Gatsby cloud functions to display the names of contacts in our HubSpot CRM when they return to our website's home page.

While A/B testing is possible with static site generators, the process is less efficient than it is with pages using server-side rendering because the engine running static sites isn’t aware of the tests that are in place.

Since Most A/B testing tools use server-side rendering to present and track specific website elements that are different between experiments, Gatsby V4's deferred static generation updates are helping companies realize the dual benefits of a high-performance website and website personalization.

Gatsby V4 is the Best Front-end JAMstack Framework

Drag-and-drop website builders are perfect no-code solutions for companies just getting started, but as organizations grow, no-code solutions are unable to scale.

Shopmonkey, an auto shop management software company, experienced this scaling challenge first-hand when they needed to scale their marketing and website operations. Today, Shopmonkey's marketing machine is powered by a user-friendly, high-performance Gatsby website and DatoCMS as their headless CMS solution.

Gatsby V4 brings innovative ideas to market and continues to help high-growth SaaS companies and the teams who support their website operations deliver the best website experiences to visitors and website users.

Marketing-Site

Webstacks Product Teams

Webstacks provides world-class product teams to help high-growth technology companies streamline their web operations, boost revenue, and substentially elevate the their web presence.

Get started