Wow—this entire thing has been a journey. The idea for the Eleventy Leaderboards was originally borne out of some lighthearted fun poking at the AMP Carousel in Google Search results.
And now we have a fully fledged independent, self-hosted performance dashboard, monitoring solution. Let’s have a look at the final result, ranking the Lighthouse and Axe scores of the nearly 400 web sites in the Built With Eleventy showcase. Every site has historical results complete with a data visualization chart of that data over time.
It’s using Speedlify! That means full historical Lighthouse results and full Axe scans (some Axe violations don’t show in Lighthouse).
You can add <speedlify-score> to your web site to show your latest Eleventy Leaderboard rank and score! Here’s a live example of the leaderboard entry for zachleat.com:
The Eleventy Leaderboards also provide the <speedlify-score> markup you need to integrate the component on your site. Just copy and paste: Add or remove the score, weight, rank, rank-change, and requests attributes to your needs.
Eleventy Author pages now show screenshots and Speedlify scores from the Leaderboard. e.g. the zachleat Eleventy Author page. A quick shout out to Sam Smith, who at time of writing had perfect scores on every one of the six sites listed on their Eleventy Author page.
As a bonus feature to Speedlify, we now show a warning on the results when redirects are impacting site performance. If someone forgot a trailing slash on their URL or a www., I’ll usually fix those manually but sometimes they are legitimate parts of the experience (e.g. a redirect from / to /en/ for internationalization).
“The Algorithm” and Tiebreaker Changes
In the current version of the Eleventy Leaderboards (via Speedlify), ranking order is determined as follows:
Sort by largest sum of all four Lighthouse categories
In contrast, previous versions were limited to Performance and Accessibility scores only.
If equal, sort by fewest Axe violations
If equal, sort by lowest ratio of Speed Index to Page Weight. If Speed Index is equal the larger site wins. If Page Weight is equal the lower Speed Index wins.
In contrast, previous versions used lowest Speed Index as a final tiebreaker (smaller sites usually won here) and highest number of Axe passes (larger sites usually won here).
Those interested in the history of the thing might want to read about a few of the steps along the way:
Some early iterations iteration of the Built with Eleventy showcase didn’t have any ranking—they were a simple list of sites built using Eleventy. You can check out the versions for old docs: v0.7.0 with 49 sites, v0.8.0 with 69 sites (nice), v0.9.0 with 110 sites, and v0.10.0 with 141 sites.
Then Eleventy author pages to show all of the sites an author has built listed on the showcase.
The biggest leap forward here was to decouple the whole thing to create Speedlify, a self-hosted isolated solution to continuously measure your site’s Lighthouse and Axe scores (Blog post).
cdn1k
13 versions in 4.0.5
