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.

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.

Need more GatsbyJS apps? Check out this Github page for more GatsbyJS starters. Thank you!

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:

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: