Zach’s ugly mug (his face)

Zach Leatherman

Eleventy Leaderboards v2 via Speedlify

August 30, 2020 #15 Popular

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.

Follow speedlify’s Avatarspeedlify on Twitter or check out speedlify.dev.

What’s New #

  • 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: Example of how to copy speedlify-score markup on the Eleventy Leaderboards 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. thezachleat’s Avatarzachleat Eleventy Author page. A quick shout out to smthdotuk’s AvatarSam 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:

  1. Sort by largest sum of all four Lighthouse categories
    • In contrast, previous versions were limited to Performance and Accessibility scores only.
  2. If equal, sort by fewest Axe violations
  3. 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).

View the code for the ranking algorithm in performance-leaderboard.

The Journey #

Those interested in the history of the thing might want to read about a few of the steps along the way:

Zach’s ugly mug (his face)

Zach is a builder for the web with Netlify. He’s currently fixated on web fonts and static site generators. His public speaking résumé includes talks in eight different countries at events like Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. He is an emeritus of Filament Group, NEJS CONF, and still helps out with NebraskaJS. Read more about Zach »

Previous
Eleventy and Vue, a match made to power Netlify.com
Next
Cloudflare’s Creative Corner with the Netlify team

10 Retweets

J0k3rNeil is looking for workNicolas HoizeySam SmithJean Pierre KolbLouise FindlayTanner DolbyCarles MuiñosspeedlifyEleventy
36 Likes
The Bearded ProgrammerAdebiyi AdedotunLee FisherErik Kroes 🏔Eric WallaceBobby DuffMo𝚖𝚊𝚛𝚌𝚢J0k3rNeil is looking for workShane RobinsonMatt BiilmannGonzalo GuevaraSteve StedmanMarkus SchorkJakeAlex RussellMaxime RichardGreg IvesPhil HawksworthJuha LiikalaJason DilworthEleventyLouise FindlayJean Pierre KolbSpeakingSoftwareMike AparicioChris Bongers 🤓💻⚡️Eric ☕️ 🐟 💻speedlifyTatiana Mac 🚁Søren Birkemeyer 🦊Stephanie EcklesTanner DolbyCarles MuiñosJeroen van Beek
4 Replies
  1. Zach Leatherman

    Zach Leatherman @zachleat #

    do you mean `is`? I do like that pattern but no Safari support. Maybe Link to Dashboard?

  2. Nick

    Nick @NickColley #

    You considered doing a pattern like this:

  3. Zach Leatherman

    Zach Leatherman @zachleat #

    Thanks Chris!

  4. Chris Bongers 🤓💻⚡️

    Chris Bongers 🤓💻⚡️ @DailyDevTips1 #

    Super nice article Zach, just love how eleventy keeps pushing out these amazing tools to make the web better

    5 Mentions
    1. Baldur Bjarnason

      Baldur Bjarnason @fakebaldur #

      “Eleventy Leaderboards v2 via Speedlify—zachleat.com” Automatic, self-hosted performance monitoring is starting to look fairly straightforward for Eleventy users zachleat.com/web/eleventy-l…

    2. Peter Wilson 🏳️‍🌈

      Peter Wilson 🏳️‍🌈 @pwcc #

      I'm loving the focus on performance and a11y that @ZachLeat is putting in to 11ty. Using Lighthouse scores and Axe violations to rank sites and starters is perfect. zachleat.com/web/eleventy-l…

    3. Yesh Yendamuri

      Yesh Yendamuri @yesh #

      My photography portfolio website is at #108, but I think the most incredible thing about @eleven_ty community is having the resources to actually learn more and build a more inclusive and performant website. yeshyendamuri.netlify.app

    4. Max Böck

      Max Böck @mxbck #

      is the "valid HTML5" footer badge of 2020. Get yours while they're still hot! 🔥🔥🔥🔥

    5. Max Böck

      Max Böck @mxbck #

      is the "valid HTML5" footer badge of 2020. Get yours while they're still hot! 🔥🔥🔥🔥