The first time I visited Max Böck's website I noticed a little something down in the footer: Lighthouse scores 🟢💯. If you reduce your site's footprint to get four hundos you also receive bragging rights, I guess.

Clicking around I discovered the tool behind it is Speedlify, developed by Zach Leatherman, creator of 11ty.

Sadly, I couldn't get it to work on Uberspace, where this blog is hosted. So I turned to Netlify, which I hadn't touched upon yet.

Setup Speedlify as a service

Here are the steps I took to get an instance of Speedlify up and running:

  • Fork the repo
  • Configure this site to be benchmarked
  • Deploy to Netlify
  • Add a subdomain and register it as a CNAME at my registration service

That was super easy and only took me a couple of minutes, maybe one hour in total, to get comfortable with Netlify 🤯.

I also added a build hook so I could trigger a build remotely, i.e. via CRON from my Uberspace.

Add Lighthouse scores to my site

Benchmarking the site was only the first step. Next up was displaying the data on my site. Conveniently enough, Zach Leatherman also has a solution for that. Enter the <speedlify-score> web component.

I just had to follow the guide outlined in the repository's README:

  • npm install speedlify-score
  • Include assets (speedlify-score.{js,css})
  • Add markup <speedlify-score> providing the required attributes

Using 11ty's <is-land> component I was able to delegate fetching the data and displaying it to only when the component enters the viewport. Save those KBs 💾!

See the result at the bottom of the page.