Gatsby - CSS Starters Speed Test
Tags: gatsby, boilerplate, appseed
Published: 2019-07-01 18:37:18

---
title: Gatsby - CSS Starters Speed Test
published: true
description: A basic speed test for Gatsby CSS starters: Bootstrap, SCSS, Bulma, Tailwind and CSS-in-JS.
cover_image: https://raw.githubusercontent.com/app-generator/static/master/gatsby-starter-scss/gatsby-starter-scss-intro.gif
tags: gatsby, boilerplate, appseed
---
Hello coders,

Making fast websites is hard. Personally, for some projects, I was spending a few days to optimize the web app before releasing into the wild. That was OK because I was familiar with the technique of following 30 item performance checklists and getting an 85 Lighthouse Score at the end. 

> *Thanks for reading!* - Content provided by **[App Generator](https://appseed.us/)**.

---

Now, I'm using [Gatsby](https://www.gatsbyjs.org/), mainly for three reasons: 
 
  - Apps built with [Gatsby are fast](https://www.gatsbyjs.org/blog/2017-09-13-why-is-gatsby-so-fast/). If you choose randomly any [Gatsby starter](https://www.gatsbyjs.org/starters/?v=2) and make a speed test, there are big chances to score more than 85 on Lighthouse, without touching the app code. 
  - Gatsby uses [React](https://reactjs.org/) to code the pages. 
  - The [tooling](https://www.gatsbyjs.org/docs/gatsby-core-philosophy/#gatsbys-tooling-philosophy), **Gatsby** concepts and, great [documentation](https://www.gatsbyjs.org/docs/).

In this article, I will present a few [GatsbyJS apps](https://appseed.us/apps/gatsbyjs) that I've played with before choosing my next CSS Framework, looking at the app speed, as a first metric. 

---

## **Gatsby Bootstrap** Starter

[Gatsby Bootstrap Starter](https://gatsby-starter-bootstrap.appseed.us/) is a  simple one-page app built on top of [Bootstrap4](https://getbootstrap.com/). App features && links: 
 - powered by Bootstrap
 - Web font loader (Google and custom font)
 - [Gatsby Bootstrap Starter demo](https://gatsby-starter-bootstrap.appseed.us/)
 - [Gatsby Bootstrap Starter sources](https://github.com/app-generator/gatsby-starter-bootstrap) - published on Github 

> **Gatsby Bootstrap Starter** - Lighthouse score

![Gatsby Bootstrap Starter - Lighthouse score.](https://github.com/app-generator/static/raw/master/gatsbyjs-starters/gatsbyjs-starters-bootstrap-lighthouse-score.jpg?raw=true)

---

## **Gatsby SCSS** Starter

[Gatsby SCSS Starter](https://gatsby-starter-scss.appseed.us/) is a  simple app built on top of minimal SCSS. No jQuery or Bootstrap dependency. App features && links: 
 - Minimal styling via SCSS 
 - Web font loader (Google and custom font)
 - [Gatsby SCSS Starter demo](https://gatsby-starter-scss.appseed.us/)
 - [Gatsby SCSS Starter sources](https://github.com/app-generator/gatsby-starter-scss) - published on Github 

> **Gatsby SCSS Starter** - Lighthouse score

![Gatsby Bootstrap SCSS - Lighthouse score.](https://github.com/app-generator/static/raw/master/gatsbyjs-starters/gatsbyjs-starters-scss-lighthouse-score.jpg?raw=true)

---

## **Gatsby CSS-in-JS** Starter

[Gatsby Css-in-JS Starter](https://gatsby-starter-cssinjs.appseed.us/) is a minimal blog starter, typography driven, with focus on the content & minimal style. Powered by MDX. App features && links: 
 - Articles in MDX (gatsby-mdx)
 - Styled Components
 - Offline Support, SEO
 - The original [Gatsby starter](https://github.com/LekoArts/gatsby-starter-minimal-blog) coded by **LekoArts**
 - [Gatsby CSS-in-JS Starter demo](https://gatsby-starter-cssinjs.appseed.us/)
 - [Gatsby CSS-in-JS Starter sources](https://github.com/app-generator/gatsby-starter-cssinjs) - published on Github 

> **Gatsby CSS-in-JS Starter** - Lighthouse score

![Gatsby CSS-in-JS Starter - Lighthouse score.](https://github.com/app-generator/static/raw/master/gatsbyjs-starters/gatsbyjs-starters-cssinjs-comparision.jpg?raw=true)

---

## **Gatsby Bulma CSS** Starter

[Gatsby Bulma CSS Starter](https://gatsby-starter-bulma-css.appseed.us/) is a simple one-page app styled with [Bulma CSS](https://bulma.io/). App Features and links:
 - Gatsby v2
 - Bulma CSS
 - Google Analytics
 - SEO (via Helmet plugin for Gatsby)
 - [Gatsby Bulma CSS Starter demo](https://gatsby-starter-bulma-css.appseed.us/)
 - [Gatsby Bulma CSS Starter sources](https://github.com/app-generator/gatsby-starter-bulma-css) - published on Github 

> **Gatsby Bulma CSS Starter** - Lighthouse score

![Gatsby Bulma CSS Starter - Lighthouse score.](https://github.com/app-generator/static/raw/master/gatsbyjs-starters/gatsbyjs-starters-bulma-css-lighthouse-score.jpg?raw=true)

---

## **Gatsby Tailwind** Starter

[Gatsby Tailwind Starter](https://gatsby-starter-tailwind.appseed.us/) is a simple web app styled with [Tailwind](https://tailwindcss.com/). App Features and links:
 - Gatsby v2
 - Tailwind CSS
 - Google Analytics
 - SEO (via Helmet plugin for Gatsby)
 - [Gatsby Tailwind Starter demo](https://gatsby-starter-tailwind.appseed.us/)
 - [Gatsby Tailwind Starter sources](https://github.com/app-generator/gatsby-starter-tailwind) - published on Github 

> **Gatsby Tailwind Starter** - Lighthouse score

![Gatsby Tailwind Starter - Lighthouse score.](https://github.com/app-generator/static/raw/master/gatsbyjs-starters/gatsbyjs-starters-tailwind-lighthouse-score.jpg?raw=true)


### Some (of my) conclusions

Based on the numbers, Tailwind gets the maximum score, but .. we must take into account the fact that apps are showing different content. For instance, the SCSS **Gatsby** starter display video content, using the HTML **video** tag, unoptimized (from what I know) by **Gatsby**. 

A real benchmark should use the same page structure with a repetitive load test, using the same server infrastructure (this requirement is met, all apps are running from the same server). My personal choice was [Bulma](https://bulma.io/) and [Tailwind](https://tailwindcss.com/) because they are damn hot compared to the heavier Bootstrap. For me, hot means:

 - modular
 - lightweight 
 - no javascript dependency
 - a growing community around the framework

> Thank you for reading! AMA in the comments. 

Resources: 
 - [Gatsby](https://www.gatsbyjs.org/) - the official website
 - [GatsbyJS Dimension](https://appseed.us/apps/gatsbyjs/html5up-dimension) - open-source app coded in [GatsbyJS](https://www.gatsbyjs.org/)
 - [Gatsby Apps](https://appseed.us/apps/gatsbyjs) - index provided by AppSeed