Zach’s ugly mug (his face) Zach Leatherman

Eleventy’s New Performance Leaderboard

March 17, 2020

Last week, the AMP project and Eleventy crossed paths when AMP released an official AMP plugin for Eleventy.

Much has already been said about the AMP project and how they exert influence over technology choices by setting up bad-for-the-web incentives via their power over search results. The higher search ranking via AMP carousel placement and the special lightning icon for sites using AMP has led many to feel like they’re required to use AMP to compete in the search results space and it’s hard to argue with that line of thinking.

Related: I’ve also created an AMP topic page on my twitter archive and avoid sharing AMP urls.

In light of all of this, last week I decided to poke a little fun at the AMP project. On the Eleventy site we allow developers to submit their site to be listed on our Built With Eleventy showcase. I created a special carousel for AMP sites buried at the very bottom of our showcase. If AMP sites can be ranked higher on search results, they can be ranked lower in my little corner of the web. This is fun right? 😅 I’m having fun.

As the week progressed, I thought more about AMP’s special treatment in search and how it could be applied to any sufficiently speedy site. But hey, I could practice what I preach here too! I don’t have a search engine but I do have a list of sites that are kind of like search results! (Have a look at what the showcase looked like before.)

I set to work. I used the lighthouse CLI plugin to run performance tests on all sites listed on the showcase. Initially I did a single Lighthouse run (mobile, network and CPU throttled) which proved fairly reliable in terms of repeatability for the Performance score specifically. This is the primary rank. The tiebreaker is the SpeedIndex score. However, SpeedIndex scores were a little more variable than I would have liked. So, I switched to three runs for each site and picked the median of the three. The code for these tests is all here. It’d probably be worth moving into its own plugin, if others want to use it too.

The top 11 sites are given a bit more prominent design treatment and screenshots are shown. But the real surprise here to me were the aggregate performance results across all of the sites. At time of writing:

  • 200 Sites Tested
  • 98 Median Lighthouse Performance Score
  • 93.7 Mean Lighthouse Performance Score
  • 2,082 Median Speed Index
  • 2,515 Mean Speed Index
  • 1,577 Median First Contentful Paint
  • 1,727 Mean First Contentful Paint

Wow. A MEDIAN 98 LIGHTHOUSE PERFORMANCE SCORE. Staggering. I knew y’all were good—but wow. 161 of the 200 sites tested 90 or higher on Lighthouse performance tests. Incredible.

After launch I’ve already received multiple reports of people updating their sites to be even faster to try and break into the Top Eleven results. I’ve also received a request to do Accessibility rankings too, which I think is a lovely idea.

Eleventy doesn’t do any special optimizations out of the box to make your sites fast. It doesn’t protect you from making a slow site. But importantly it also doesn’t add anything extra either. This sort of developer empowerment over the final product has seemed to attract an amazing group of performance oriented developers using the project and I am so grateful to every one of you.

Keep it speedy, y’all. 🏆🏆🏆


Update: I’ve pulled the leaderboard code out from the 11ty website and created the performance-leaderboard npm package. Try it out! Build your own performance leaderboard!


< Newer
CSS Naked Day
Older >
My Favorite Typinator Macros

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://cloudcannon.com/CloudCannon. He is the creator and maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 79 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

16 Reposts

Dave 🧱John ArthurAndy BellEleventyrossRaymond Camden 🥑Nicolas HoizeyMatt Biilmannxnoɹǝʃ uɐıɹqPaul IrishDimitris GrammatikoMatt DerocherIndieWeb Avatar for http://www.ledeveloppeur.spaceIndieWeb Avatar for http://codingnova.comIndieWeb Avatar for https://nicolas-hoizey.comIndieWeb Avatar for http://virusno.tk

32 Likes

Pelle WessmanAllan FerenczToddMohit KarekarTodd ParkerMatthew BennettTajinder Birdipaul shinnStephen GreigRodrigo FernandezFxmtoMax BöckDAVID-19 PowersCedric Poilly 🇲🇺Matija GrcicつるすけmrbuscheDimitris GrammatikoEleventyFotis PapadogeorgopoulosGareth LocktonToddrossFlorian GeierstangerR. Mark VolkmannNicolas HoizeyMatt BiilmannJohn ArthurBryce WrayAshur CabreraDave 🧱Jeremias Menichelli
6 Comments
  1. вкαя∂εℓℓ

    @briankardell

    "Eleventy doesn’t do any special optimizations out of the box to make your sites fast. " I mean... it kinda does by encouraging specific architecture, right? The ripple effects of that are actually pretty huge in my experience

  2. Zach Leatherman

    @zachleat

    Fair point!

  3. Matthew Phillips

    @matthewcp

    The key is that the HTML is hand-authored, not generated by a tool based on presumptions. Having to hand-author HTML means every choice you make is intentional and specific to your site's needs.

  4. Matthew Phillips

    @matthewcp

    It's amazing to me to think back to HTML5 Boilerplate days and the reason for that was that authoring HTML was hard, and it was easy to mess things up, and today messing up HTML is the least of your worries.

  5. Zach Leatherman

    @zachleat

    Wow—huh. Not sure I agree with this all-in but appreciate the perspective!

  6. Tyler Williams

    @tylerwilliamsct

    The "pit of success" as they say.

Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)