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).
Super nice article Zach, just love how eleventy keeps pushing out these amazing tools to make the web better
@zachleat
Thanks Chris!
@NickColley
You considered doing a pattern like this:
<a href="dashboard" as="speedlify-score>link to dashboard</a>
Or having the anchor nested inside the tags?
Would mean if it fails you've got a regular link to the page... 👀
@zachleat
do you mean `is`? I do like that pattern but no Safari support. Maybe <a href><speedlify-score>Link to Dashboard</…></a>?
@eleven_ty
You can read about the tiebreakers here: zachleat.com/web/eleventy-l…
Larger sites are rewarded in the ranking algorithm.
Simon Cox :SEO:
@zachleat
Ta! Good to see more sites in the list but I think there are a few less Perfects?
Zach Leatherman
@simoncox accurate! better in perf, best practices, seo—worse in a11y, 4 hundos26:Performance ????
343 / 859
Accessibility ????
538 / 859
Best Practices ????
695 / 859
SEO ????
570 / 859
Perfect 4×????
219 / 85927:Performance ????
356 / 907
Accessibility ?… Truncated
Simon Cox :SEO:
@zachleat Well I sorted my single Axe issue out, had two aside tags (tut Simon), have you done yours yet?
Barry Pollard
I mean there's already an element of comparison even in field metrics, and the limits (e.g. 2.5 secs for LCP) may not be the right limits for your site (every site is different!), but at least it's based on YOUR users. Which I argue is more important than this being a lik… Truncated
Barry Pollard
And it comes back to whether you're wanting to use metrics to measure your site's user experience? Or to compare against possibly unrelated site types?
Barry Pollard
Ideally you'd test every page and ever interaction on every page, and then weigh them compared to how they're actually used in real life but that's impossible and so it's easier just to ACTUALLY measure them in real life!
Barry Pollard
It's impossible for a tool to ever fully simulate a site's actual usage cause users are weird (and wonderful!) and use a site in oh so many ways, and from so many different conditions (device, network, how many other tabs are open, extensions...etc.)
Zach Leatherman
To be clear I’m not arguing against field data, I’m arguing in favor of it being one piece of the story alongside lab data. AND I agree that we need better lab data!
Pier
Sorry to chime in with nothing valuable to add but... all this stuff from @tunetheweb.com is fascinating.
15 Comments
@DailyDevTips1
Super nice article Zach, just love how eleventy keeps pushing out these amazing tools to make the web better
@zachleat
Thanks Chris!
@NickColley
You considered doing a pattern like this: <a href="dashboard" as="speedlify-score>link to dashboard</a> Or having the anchor nested inside the tags? Would mean if it fails you've got a regular link to the page... 👀
@zachleat
do you mean `is`? I do like that pattern but no Safari support. Maybe <a href><speedlify-score>Link to Dashboard</…></a>?
@eleven_ty
You can read about the tiebreakers here: zachleat.com/web/eleventy-l… Larger sites are rewarded in the ranking algorithm.
Simon Cox :SEO:
@zachleat Ta! Good to see more sites in the list but I think there are a few less Perfects?
Zach Leatherman
@simoncox accurate! better in perf, best practices, seo—worse in a11y, 4 hundos26:Performance ???? 343 / 859 Accessibility ???? 538 / 859 Best Practices ???? 695 / 859 SEO ???? 570 / 859 Perfect 4×???? 219 / 85927:Performance ???? 356 / 907 Accessibility ?… Truncated
Simon Cox :SEO:
@zachleat Well I sorted my single Axe issue out, had two aside tags (tut Simon), have you done yours yet?
Barry Pollard
I mean there's already an element of comparison even in field metrics, and the limits (e.g. 2.5 secs for LCP) may not be the right limits for your site (every site is different!), but at least it's based on YOUR users. Which I argue is more important than this being a lik… Truncated
Barry Pollard
And it comes back to whether you're wanting to use metrics to measure your site's user experience? Or to compare against possibly unrelated site types?
Barry Pollard
Ideally you'd test every page and ever interaction on every page, and then weigh them compared to how they're actually used in real life but that's impossible and so it's easier just to ACTUALLY measure them in real life!
Barry Pollard
It's impossible for a tool to ever fully simulate a site's actual usage cause users are weird (and wonderful!) and use a site in oh so many ways, and from so many different conditions (device, network, how many other tabs are open, extensions...etc.)
Zach Leatherman
To be clear I’m not arguing against field data, I’m arguing in favor of it being one piece of the story alongside lab data. AND I agree that we need better lab data!
Pier
Sorry to chime in with nothing valuable to add but... all this stuff from @tunetheweb.com is fascinating.
Barry Pollard
You do realise that only encourages me?