This is Tony's Blog

Performance by Default: Why I Rebuilt My Website with GatsbyJS

January 28, 2019

Photo by Goh Rhy Yan on Unsplash

I’ve recently rebuilt my Jekyll website using GatsbyJS. In this post, I’ll share some of the great features of Gatsby that I’ve learned about in the process.

Background

As I found out while chasing a 100 performance score in Lighthouse for my Jekyll website, performance optimisation takes effort. It involves a number of tasks, many of which are non-trivial to implement.

Many Jekyll users have found it beneficial to bring in JavaScript tools to help with building their sites.

Relying on Jekyll and friends to do jobs more suited for a task runner like Gulp was slowing the build. Armed with this knowledge I started stripping down Jekyll to one of its core purposes - converting Markdown files into HTML.

… Decoupling the asset pipeline from Jekyll and Gulp-ifying it made the biggest splash in terms of build time.

How I’m using Jekyll in 2017

People have come up with ways to … have a full asset pipeline inside Jekyll and perform other post-processing tasks. I would argue that while it’s nice to have one tool do everything, they sit outside the scope of what Jekyll should be trying to do. Grunt and Gulp will perform much faster for these tasks and already have a huge library of scripts you can use.

Speed up your Jekyll builds

I wondered, instead of using JavaScript tooling to build a Jekyll site, why not find a JavaScript static site generator and use JavaScript for everything?

With my Twitter feed full of people talking about GatsbyJS, I decided to take a look and see what all the fuss was about.

Gatsby

Gatsby is a static site generator for the JavaScript UI library, React.

Build with React

Everything in Gatsby is built using React components. This means everything is written in JavaScript, rather than a template language such as Jekyll’s Liquid, providing a more familiar experience for web developers like myself.

Bring your own data

Gatsby allows you to build sites with data from many sources: headless CMSs, content APIs, or file systems. This is advantageous as it allows a Gatsby website frontend to be decoupled from the content.

Data sources are set up using Gatsby’s data plugins, and data is pulled in using GraphQL queries.

Performance by default

Gatsby takes care of most of the work involved in building a fast website by following an architecture developed by Google called the PRPL pattern:

  • Push critical resources for the initial URL route.
  • Render initial route.
  • Pre-cache remaining routes.
  • Lazy-load and create remaining routes on demand.

Gatsby uses the JavaScript module bundler webpack to build everything. Using server side rendering and webpack’s code optimisation and code splitting capabilities, Gatsby renders React page components into static HTML that includes only critical resources. It also creates a JavaScript runtime that takes over after the initial HTML has loaded.

In other words, Gatsby builds websites that start as static sites but become Single Page Applications. This helps achieve a fast initial load and instantaneous page navigations.

Gatsby also provides several image optimisation techniques, such as responsive images, placeholder images, and lazy loading.

The result is a static site generator that builds blazing fast, highly optimised websites by default.

Building with Gatsby

The above reasons convinced me to rebuild my site using Gatsby.

My existing host, GitHub Pages, does not build sites that use a static site generator other than Jekyll. This means that Gatsby sites must be pre-built and pushed to a GitHub repository.

I wanted my site built on a server instead of locally, and prefer to keep build output out of source control. I had heard a lot of good things about Netlify, so this was an opportunity to try them out.

Deploying a site with Netlify is as easy as their website says: connect your repository, add build settings, and deploy your website.

Lighthouse results

Here are the Lighthouse results for my new website, built with Gatsby and hosted on Netlify.

Lighthouse results: Gatsby

Conclusion

I’m very happy with the move to Gatsby. Building with React and webpack lets me work with a modern tech stack, and Gatsby’s ability to pull data from anywhere using GraphQL gives me the freedom to separate my content source from the website code.

Gatsby’s biggest selling point, however, is its built-in performance optimisations. Using Gatsby saves me creating and managing a build pipeline to optimise my site and assets - it’s all done out of the box. For web performance by default, Gatsby is a game changer.


Tony Ho

Written by Tony Ho, who lives and works in Melbourne, Australia building things. You should follow him on Twitter