“Jamstack is slowwwww.” That’s not something you hear often, right? Especially, when one of the main selling points of Jamstack is performance. But yeah, it’s true that even a Jamstack site can suffer hits to performance just like any other site. 
Don’t think that by choosing Jamstack you no longer have to think about performance. Jamstack can be fast — really fast — but you have to make the right choices. Let’s see if we can spot some of the poor decisions that can lead to a “slow” Jamstack site.
To do that, we’re going to build a really slow Gatsby site. Seems strange right? Why would we intentionally do that!? It’s the sort of thing where, if we make it, then perhaps we can gain a better understanding of what affects Jamstack performance and how to avoid bottlenecks.
We will use continuous performance testing and Google Lighthouse to audit every change. This will highlight the importance of testing every code change. Our site will start with a top Lighthouse performance score of 100. From there, we will make changes until it scores a mere 17. It is easier to do than you might think!
Let’s get started!
Creating our Jamstack site
We are going to use Gatsby for our test site. Let’s start by installing the Gatsby CLI installed:
npm install -g gatsby-cli
We can up a new Gatsby site using this command:
gatsby new slow-jamstack
Let’s cd into the new slow-jamstack project directory and start the development server:
cd slow-jamstack
gatsby develop
To add Lighthouse to the mix, we need a Gatsby production build. We can use Vercel to host the site, giving Lighthouse a way to runs its tests. That requires installing the Vercel command-line tool and logging in:
npm install -g vercel-cli
This will create the site in Vercel and put it on a live server. Here’s the example I’ve already set up that we’ll use for testing.
We’ve gotta use Chrome to access directly from DevTools and run a performance audit. No surprise here, the default Gatsby site is fast:
A score of 100 is the fastest you can get. Let’s see what we can do to slow it down.
Slow CSS
CSS frameworks are great. They can do a lot of heavy lifting for you. When deciding on a CSS framework use one that is modular or employs CSS-in-JS so that the only CSS you need is what’s loaded.
But let’s make the bad decision to reach for an entire framework just to style a button component. In fact, let’s even grab the heaviest framework while we’re at it. These are the sizes of some popular frameworks:
FrameworkCSS Size (gzip)Bootstrap68kb (12kb)Bulma73kb (10kb)Foundation30kb (7kb)Milligram10kb (3kb)Pure17kb (4kb)SemanticUI146kb (20kb)UIKit33kb (6kb)
Alright, SemanticUI it is! The “right” way to load this framework would be to use a Sass or Less package, which would allow us to choose the parts of the framework we need. The wrong way would be to load all the CSS and JavaScript files in the of the HTML. That’s what we’ll do with the full SemanticUI stylesheet. Plus, we’re going to link up jQuery because it’s a SemanticUI dependency.
We want these files to load in the head so let’s jump into the html.js file. This is not available in the src directory until we run a command to copy over the default from the cache:
cp .cache/default-html.js src/html.js
That gives us html.js in the src directory. Open it up and add the required stylesheet and scripts:
Now let’s push the changes straight to our production URL:
vercel –prod
OK, let’s view the audit…
ScreenshotScreenshotZoikes! A 33% reduction!
We have reduced the speed of the site down to a score of 66. Remember that we are not even using this framework at the moment. All we have done is load the files in the head and that reduced the performance score by one-third. Our Time to Interactive (TTI) jumped from a quick 1.9 seconds to a noticeable 4.9 seconds. And look at the possible savings we could get with from Lighthouse’s recommendations.
Slow marketing dependencies
Next, we are going to look at marketing tags and how these third-party scripts can affect performance. Let’s pretend we work with a marketing department and they want to start measuring traffic with Google Analytics. They also have a Facebook campaign and want to track it as well. 
They give us the details of the scripts that we need to add to get everything working. First, for Google Analytics: