Getting a Perfect 100 Google Lighthouse Score On Your Personal Site (Part I)

Wordpress vs. Static Site Generators – Which is Faster ⚡️for Personal Sites?

Before I wrote a single line of code for the site you are currently visiting, I asked myself:

“What’s the absolute minimum I need to get the job done?”

That question helped me focus everything: from design decisions to tool selection and building.

I explored several diffent avenues when it came to tooling: I looked into Wordpress, the Jamstack and static site generators.

Wordpress

Since I had built my previous blog from scratch for Wordpress, I researched what Wordpress had to offer in regards to page speed.

I found that Sustainable UX’s website was built on Wordpress. Jack Lenox had built Susty WP, a minimalistic Wordpress theme that built explicitly with sustainability and web performance in mind.

Wordpress has a 60% share of the CMS market. So Susty has such potential for making the Web faster and more sustainable.

So then I thought about some of the pros and cons of using Wordpress to build my personal blog:

ProsCons
Great blogging experienceDealing with updates and plugin dependencies
App available for bloggingWriting PHP for functionality and templating
Post new articles without rebuildingUpdates to website styling and functionality still mean rebuilding
A vague feeling of not being in control of the stack

That last downside – a vague feeling of not being in control of the stack – did it for me. I opted against building this site with Wordpress to see how I could get by with less.

The JAMStack

At work, I had been playing around with React and building web prototypes and learning Vue from my colleague, David. And back in 2017, I had seen Mathias Biilmann do a talk on “The New Front-End Stack: JavaScript, APIs and Markup”. So that got me thinking: “Should I build a static blog using something like Vue or React?”

“Should I build my personal site using something like Vue or React?”

In Ming To’s course “React for Designers”, I learned about building sites using Gatsby and React which pulled content from Contentful CMS via GraphQL. I did like how quick and easy it was to work with Gatsby.

Then I downloaded a few starter projects and built a Gatsby site from scratch to see what it was like. Then I weighed the pros and cons of building a personal blog using React + Gatsby:

ProsCons
“trendy”quite a big stack
Nice dev experienceA bunch of moving parts
PerformantStill a lot of front-end JS

I asked myself, “what is React & Co. really good at? What was it built for?” And after finding some good articles (like this one) on what ReactJS is for and who uses it, I realized I wouldn’t need any complex front-end logic for user interactions. And I wanted to keep my use of front-end JavaScript to an absolute minimum. So my search continued.

Static Site Generators

After my foray into Gatsby + React, I stumbled upon this excellent overview of static site generators.

I had been building web prototypes or one-pagers for years using the Pug templating language, which – like CoffeeScript – is whitespace delimited (no extraneous characters), minimalistic and super quick to read and write. So I searched for static site generators that work with pug and found Eleventy, which seemed to tick all the boxes:

  • not a JavaScript framework
  • works with various templating engines
  • lets you write blog posts in Markdown

“That’s perfect!”, I thought, firing up my console and pasting this into it:

npm install -g @11ty/eleventy
echo '# Page header' > README.md
eleventy

Awesome, I’d generated a super-minimal static site minimum viable product that gets the job done.

Then I cloned some starter projects to see how things worked behind the scenes and was happily surprised to see that Eleventy could also:

  • work with Gulp and Sass
  • work with Netlify for build automation (and hosting)
  • work with Netlify CMS
  • be extended with shortcodes

…and much more – optionally. I could determine precisely what minimum development stack I needed and progressively add on a case-by-case basis.

So at the time of writing, my stack for the site you are currently visiting has – aside from Node and 11ty – only four dependencies:

  • gulp
  • gulp-responsive for generating various image formats and sizes
  • clean-css for minifying CSS
  • terser for minifying JS

Of course, as the whole thing is Node-based, so I’ve got a folder full Node modules. But in terms of developer experience, it’s dreamy 🏝.


Read Part II: How I handled CSS, JS, images, compression and caching on my Eleventy-based site


Published: Jul 18, 2019

More from my blog