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

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:

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:

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