Gatsby - CSS Starters Speed Test

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.

---

Now, I'm using Gatsby, mainly for three reasons:

• Apps built with Gatsby are fast. If you choose randomly any Gatsby starter and make a speed test, there are big chances to score more than 85 on Lighthouse, without touching the app code.
• Gatsby uses React to code the pages.
• The tooling, Gatsby concepts and, great documentation.

In this article, I will present a few GatsbyJS apps 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 is a simple one-page app built on top of Bootstrap4. App features && links:

• powered by Bootstrap
• Web font loader (Google and custom font)
• Gatsby Bootstrap Starter demo
• Gatsby Bootstrap Starter sources - published on Github

Gatsby Bootstrap Starter - Lighthouse score

---

Gatsby SCSS Starter

Gatsby SCSS Starter 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
• Gatsby SCSS Starter sources - published on Github

Gatsby SCSS Starter - Lighthouse score

---

Gatsby CSS-in-JS Starter

Gatsby Css-in-JS Starter 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 coded by LekoArts
• Gatsby CSS-in-JS Starter demo
• Gatsby CSS-in-JS Starter sources - published on Github

Gatsby CSS-in-JS Starter - Lighthouse score

---

Gatsby Bulma CSS Starter

Gatsby Bulma CSS Starter is a simple one-page app styled with Bulma CSS. App Features and links:

• Gatsby v2
• Bulma CSS
• Google Analytics
• SEO (via Helmet plugin for Gatsby)
• Gatsby Bulma CSS Starter demo
• Gatsby Bulma CSS Starter sources - published on Github

Gatsby Bulma CSS Starter - Lighthouse score

---

Gatsby Tailwind Starter

Gatsby Tailwind Starter is a simple web app styled with Tailwind. App Features and links:

• Gatsby v2
• Tailwind CSS
• Google Analytics
• SEO (via Helmet plugin for Gatsby)
• Gatsby Tailwind Starter demo
• Gatsby Tailwind Starter sources - published on Github

Gatsby Tailwind Starter - Lighthouse score

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 and Tailwind 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 - the official website
• GatsbyJS Dimension - open-source app coded in GatsbyJS
• Gatsby Apps - index provided by AppSeed