Improving web performance with GatsbyJS

So we beat on, boats against the current, borne back ceaselessly into the past.

When F. Scott Fitzgerald penned this gorgeous final phrase of what would become his masterpiece of literature, The Great Gatsby, it's fair to say he wasn't thinking about web technology. But, I often wonder if Kyle Matthews was acting in the spirit of that phrase when he created his own masterpiece, GatsbyJS.

After all, the web is a sturdy boat we've been riding in for a long time. It’s proven itself. It gets us where we need to go. That boat is propelled by the currents of its key furnishing technologies—HTML, CSS, Javascript, and, of course, data – lots and lots of data.

Throughout recent history, trends have shown we get restless and tired with the steady direction of this current, and we try in vain to put the boat on a course it doesn’t want to be on. 

In my memory, the peak of this trend was the unapologetic embrace of Flash as a solution to cross-browser headaches and a cure-all for the blandness of HTML (it didn’t work). Later on, we dowsed our creations with gawdy UI libraries, like jQuery UI, Dojo, Cappuccino, and Javascript MVCs. They hung around for a while, but ultimately, the sustained tenure of lower level libraries like React and Vue have shown us that the old guard of HTML, CSS, and plain Javascript aren’t that bland at all. They’re actually quite good at what they do, and there’s a reason they’ve been around so long. They just happen to need a bit of enhancement around the edges.

This cyclical pattern of progression answered with regression is not unique to the web. Advancements in voice and video communication over IP have fundamentally shifted the way humans interact with one another, but nonetheless, the undisputed champion of modern communication is text messaging—a reprisal of simple, primitive, low-fidelity communication that has been around for centuries.

It seems that, despite our efforts to the contrary, things don’t really change that much. Most great technological advancements are just incremental improvements on something that has already been good for a long time. Some would say we’re borne back ceaselessly into the past.

So, what is GatsbyJS?

Gatsby is a static site generation tool that fetches your data from any number of sources, feeds them into a React app, and renders the app as static HTML for server rendering anywhere.

But, unlike other static site generators, once the app is rendered, Gatsby mounts your React app over the rendered HTML, routing all subsequent navigation through the client, which not only makes your site blazing fast, but also unlocks all the full power of single-page applications to all your pages. It’s the best of both worlds. 

Simply put, Gatsby embraces the idea that the web and its four founding fathers, HTML, CSS, Javascript, and data, are pretty good tools on their own. They just need a bit of an incremental improvement.

Why do we love static site generation?

When we deliver web applications, there are many things we need to get right, but few attributes rank more important than security and performance. 

Secure, performant websites are easier to maintain, more cost-effective to host, and less risky to own. These security and performance concerns rest on the premise that websites serve their pages dynamically. If you remove dynamic requests from the equation, these become exponentially smaller concerns. Gatsby tuns the question of static versus dynamic on its head, and begs the question, “What parts of your site have to be dynamic?”

Why do we love GatsbyJS?

Static is great, but we also want our apps to have a lot of data, and for the last two decades, this need for more and more data has been the driving premise behind dynamic websites. 

Gatsby challenges the assumption that data-rich websites cannot be statically generated. Its robust GraphQL data sourcing layer allows you to bring along all data as you want, from anywhere you like.

What have we done with GatsbyJS at Silverstripe?

Recently we relaunched the Silverstripe CMS Documentation site using Gatsby. We found it very intuitive to use, and perfectly suited for sourcing markdown files. Building the UI in React was quite liberating versus using an HTML templating system.

The results have been positive. Page loads are down 50% and server response time is down more than 70%. Additionally, we have no hosting costs.

GatsbyJS + Silverstripe CMS

For the last few months, we’ve been focused on getting Silverstripe CMS to integrate with Gatsby. The effort has been focused on several critical epics that define an MVP (everything in progress, unless otherwise marked):

• A Silverstripe + Gatsby starter (A “starter” is like a recipe in Gatsby)
• A Gatsby module for Silverstripe CMS
• A Gatsby source plugin for Silverstripe CMS
• A library of helpers for working with a Silverstripe CMS website
• A Silverstripe CMS forms plugin (in progress)
• A content blocks plugin
• The ability to preview draft content (TODO)
• A tool to convert SS templates to React components

For a bird’s eye view of the project and everything we’re working on, have a look at the board.

How to get involved

Have you built a site in Gatsby? Keen to try? Leave a comment below or reach out on our Community Slack workspace in the #general channel. You might also like to get involved on the Silverstripe CMS forum.