Gatsby helps developers build blazing fast websites. But how fast is build time for the actual website itself? And how can one developer advocate help reduce build times for thousands of others?
It all started back in 2018 when the DevRel team at Kentico Kontent started working on a source plugin for Gatsby, the rising star among static site generators. Developers already loved how performant their sites were when they used Gatsby, the community was expanding quickly, and our clients had started asking about bringing their content to Gatsby. We wanted to make it as seamless and simple as possible to do just that!
During the fall of 2018 we used the initial version of our dedicated Gatsby source plugin to rebuild one of our company websites — Kentico Advantage. Since then we have been making steady improvements to support many use cases of our clients. Fast forward to fall 2020 and we find the plugin in use by hundreds of websites, and we are seeing monthly increases of over 10% in the number of projects using Gatsby.
So what was the “problem” we first set out to solve by building this source plugin?
The problem with static builds
If you’ve used Gatsby, or any other static site generator for that matter, you know that as sites get larger site build times tend to increase. Over time, many Jamstack developers find their builds begin taking too long in general. A problem compounded by the fact that automatic builds, triggered by each content and/or code change, mean that there can almost always be a build in progress if a site is busy or constantly updated. Not to mention frequent deployments.
It’s not just devs — content creators were unhappy, too. Their content changes and edits triggered full site rebuilds, each of which took tens of minutes even if only a word or two had changed. Meaning they had to wait a long time before being able to preview changes on the live/staging sites.
These issues were neatly solved when Gatsby Cloud introduced Incremental Builds with instant, real-time previews. It was a great improvement…But it also came with a cost. To allow clients to leverage Incremental Builds, any headless CMS needed to comply with a few hard requirements on what it must provide:
- Source plugin exposing data via Gatsbyʼs GraphQL schema
- Sending prompt webhook notifications whenever thereʼs a content change
- Integrating Gatsby Preview capability into its UI
- Having a robust and easy-to-use documentation
Offering these features is what makes a CMS a first-class integration with Gatsby. You can imagine, though, that providing each of these points requires significant development effort and also some product changes too. In other words, not something that one person could do over the weekend.
New is always better
Kentico is always happy to improve the experience of using Kontent with Gatsby, and so we started implementing improvements on multiple fronts.
Ondrej Chrastina, our developer advocate, used his innovation time to build a completely new Gatsby source plugin focused on one crucial aspect: Performance.
He was very strict with the parameters.
- Avoiding as many dependencies as possible
- Using the simplest data contract when getting data from the CMS to Gatsby
- Using Typescript to ensure type safety
- Defining GraphQL schema to allow lazy loading of calculated fields
- Using yarn workspaces to make it easier to create packages
- Making it future-proof and ready for multi-project sourcing features
Did he succeed?
The test build with 30k Gatsby nodes took a little over 38 minutes with the old plugin. Now it finishes after 7 minutes! Thatʼs just 18% of the original time. (And you know you only get 300 free minutes from Netlify, right?)
On the product side, Gatsby requested to be notified about each content change. This meant that we had to implement webhook notifications in Kontent that would fire every time an editor touches any content item. We bribed the product developers with a few beers to squeeze this feature into their sprint (donʼt tell their product managers). A few weeks later, the preview webhooks were released.
The fastest Gatsby integration in the world
After implementing these improvements, we were proud to get listed on Willit.build. This is the first, and so far only, publicly available static site benchmarking service and displays build times for Gatsby projects using data from various CMSs on Gatsby Cloud. Check out for yourself in the calculator just how fast a headless CMS can be when you innovate:
At Kentico Kontent, we allocate one day each week for “mandatory” innovation time. Sometimes we use it to play with gadgets like VR goggles or Raspberry PIs, but this time Ondrejʼs initiative led us to become the most performant source of data for Gatsby. And we know you can use the saved time.
Of course, we will crack open the champagne only after we migrate all our clients to the new version Kontent’s Gatsby source plugin :-).
If you havenʼt tried Kentico Kontent yet, take a look here or check out the source plugin repository on GitHub. Cheers!