New Launch

Take a deep dive into the fastest Gatsby, yet: Gatsby 5!

ContactSign Up for Free

How Gatsby Cloud Optimizes the Development, Deployment, and Hosting of Gatsby Sites

Joel Smith
February 22nd, 2022

If you’re building your website with Gatsby, you’re probably considering a variety of Jamstack hosting options. To help you out, we wanted to walk you through features you likely need in your build & hosting platform – especially if you’re working on a professional website with high business value – and how we’ve carefully crafted and tuned Gatsby Cloud to give you the best experience possible.

Faster Builds and Deploys

One of the things you do most frequently with your deploy and hosting platform is, well, deploy changes into production. But build and deploy speed of sites can vary a lot between different platforms.PixelPoint CEO and Software Engineer Alex Barashkov (@alex_barashkov) recently conducted independent tests building and deploying a sample Gatsby project across multiple popular web-hosting platforms using each platform’s basic paid plan. Barashkov found that Gatsby Cloud was significantly faster than other solutions. In one test, he tested Gatsby 4 with 1000 pages fetched from WordPress, and experienced a build time of only 20 seconds.

Gatsby Cloud build time

There are three layers to how we’ve achieved this performance. 

First, Gatsby Cloud Builds enables Gatsby Cloud to uniquely leverage its Cloud infrastructure to only build out the pages that changed based on the data. Second, features like Parallel Query Running and Deferred Static Generation (DSG) can be used to parallelize or defer possible work. Third, we’ve thrown on top dozens of optimizations. 

Between builds, we store your npm dependencies on disk, rather than in remote file storage, so builds start quickly rather than waiting 30 seconds for node_modules to be streamed in. Our build caching is highly reliable – it works every time, regardless of how long your previous build took. On content-only changes, we skip unnecessary expensive steps like building JavaScript. 

In short, we handle the necessary work of making Gatsby builds hum along. These efforts, among others, enable for the fastest build experience of any cloud platform..

Faster Build Previews

Every time a developer opens a pull request against your main branch, Gatsby Cloud creates a build preview so your team can review changes. In essence, Gatsby Cloud build previews function as part of your continuous integration (CI) suite, since PR reviewers will likely inspect the build preview before commenting, approving and/or merging. 

Studies have shown, and industry experts agree, that shorter CI times lead to increased developer productivity.  One rule of thumb is that shaving 1 minute off of your CI/CD suite time increases developer productivity by 1%

(And, like page load speed, as builds get faster, performance matters even more; slashing build times from 8 minutes to 5 minutes is even more impactful than slashing them from 18 minutes to 15 minutes).

So faster build times don’t just mean faster deployment – they also mean faster PR reviews, better collaboration, and higher developer productivity. 

Fast CMS Preview

In addition, because we’re quite focused on Gatsby sites using a headless CMS, we built CMS Preview to help content editors and creators preview how draft content will look on the page before pushing it live. 

Rather than a build-it-yourself, manual experience, we streamlined the Gatsby Cloud CMS Preview experience with features like Quick Connect, In-CMS Preview extensions, an automatically provisioned staging environment, and a Preview Status Indicator. 

Finally, because CMS Preview and Builds rely upon the same infrastructure, previews are very fast and accurate – and as we make builds even faster, previews will get faster too.

Global CDN

Gatsby Cloud Hosting is built on Fastly’s content delivery network (CDN), which powers websites like Buzzfeed, Yelp, and the Financial Times, as well as platforms like Github and Pantheon. The underlying CDN infrastructure means that copies of your site are distributed around the globe, reducing latency to visitors; Fastly’s battle-tested infrastructure means that you won’t have to worry about downtime. 

Cloud Quickstart

Gatsby Cloud offers a streamlined publishing and deployment process that empowers new and non-technical users to create projects in minutes with a CMS, sample content, and a connected Gatsby starter. With ten first-class CMS integrations and hundreds of data sources and APIs, Gatsby offers an unrivaled experience for building with the headless CMS of your choice.

Lighthouse Reports at Build-Time

Performance is crucial to the site visitor experience and website conversion, so we help you keep performance top-of-mind. We run Lighthouse tests on every production build and every pull request, allowing you to monitor performance over time and track regressions. 

Serverless Functions

Functions on Gatsby Cloud allows you to add dynamic functionality and call third-party API services without exposing private keys. Teams use Gatsby Cloud Functions to add forms, authentication, email triggers, and more, all with just a few lines of code.

Webhooks and Outgoing Notifications

Users can trigger Gatsby Cloud to build their site by sending incoming requests via webhooks. Gatsby Cloud can also send out notifications to a URL of your choosing when builds are completed, including whether that build has succeeded or failed.  

SSL Certificates

Gatsby Cloud has the ability to generate SSL certificates for your domains, using Let’s Encrypt, letting you get set up easier – and we’ll handle renewals automatically, keeping your certs up to date. Alternatively, if you’ve purchased or generated your own SSL certificates, Gatsby Cloud lets you add them to your Gatsby Hosting domains. 

Structured Errors and Logging

Gatsby Cloud lets you filter build logs and groups by build stage, making it easier to understand any warnings or errors in the build process. Multiple log types are available, including raw, build, structured, verbose, error and warning logs.

Server-Side Rendering (SSR)

Server-Side Rendering is a method of content rendering in which each web page is served to a site visitor at runtime, meaning that a portion of the build process happens on each page request. Because the content is rendered during runtime, visitors will always get the latest version of content directly from the server—though they may have to wait longer for it to display.

Gatsby’s implementation of SSR uses serverless functions. As a result, SSR, like DSG, requires support from the deploy and hosting platform. We have first-class support for SSR in Gatsby Cloud, but this isn’t true for some hosting providers. For more information about SSR, see our blog post on how to choose the best page rendering mode for your Gatsby website.

Painless Redirects

With Gatsby Cloud, as with most Jamstack hosting options, redirects work out of the box without any additional configuration. In contrast, “bare-metal” options, you’ll need to set up a custom configuration of redirects with a routing system every time your site builds.  

In Summary

Gatsby Cloud is simply the best way to run any Gatsby site, making it easy to host, build, and manage all of your Gatsby websites from one management pane. Learn about the latest updates to Gatsby Cloud and hear about what we’re planning for Gatsby Cloud in the coming year in my session at GatsbyConf 2022 entitled Gatsby Cloud: The Platform for Deploying Your Gatsby Sites, which you can watch on Wednesday, March 2, 2022 at 2:35pm MST.

To find out more about Gatsby Cloud, visit the Gatsby Cloud product web page or contact our sales team with questions.  If you have any feedback or questions on this post, please reach out to me on Twitter at @jsumnersmith.

 

Share on TwitterShare on LinkedInShare on FacebookShare via Email

Full-stack developer turned product manager. Loves books, coffee, and the endless possibilities of the internet. Very dadly.

Follow Joel Smith on Twitter

Tagged with Gatsby Cloud, GatsbyConf, Website PerformanceView all Tags

Talk to our team of Gatsby Experts to supercharge your website performance.

Contact Gatsby Now
© 2022 Gatsby, Inc.