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
Top comments (0)