DEV Community

Cover image for Gatsby - CSS Starters Speed Test

Posted on • Updated on

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:

Gatsby Bootstrap Starter - Lighthouse score

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:

Gatsby SCSS Starter - Lighthouse score

Gatsby Bootstrap SCSS - 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 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 Bulma CSS Starter - Lighthouse score

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 Tailwind Starter - Lighthouse score

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.


Discussion (0)