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.


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:

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:

“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' >

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