Zach’s ugly mug (his face)

Zach Leatherman

Eleventy’s New Performance Leaderboard

March 17, 2020 #7 Popular

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!

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
CSS Naked Day
Next
Eleventy Crash Course with Nick and Zach—NebraskaJS Omaha

11 Retweets

Dimitris GrammatikoPaul Irishxnoɹǝʃ uɐıɹqMatt BiilmannNicolas HoizeyRaymond Camden 🥑rossEleventyAndy BellJohn ArthurDave 🧱

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 Replies
  1. Tyler Williams

    Tyler Williams @tylerwilliamsct #

    The "pit of success" as they say.

  2. Zach Leatherman

    Zach Leatherman @zachleat #

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

  3. Matthew Phillips

    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.

  4. Matthew Phillips

    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.

  5. Zach Leatherman

    Zach Leatherman @zachleat #

    Fair point!

  6. вкαя∂εℓℓ

    вкαя∂εℓℓ @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

    4 Mentions
    1. codingnova http://codingnova.com/index.php/author/robertteah/ #

      In this piece, Eric Meyer argues that performance is more important than ever right now — especially for websites that contain critical information for the public: If you are in charge of a web site that provides even slightly important information, or important services, it’s … Truncated

    2. www.ledeveloppeur.space #

    3. www.webmastersgallery.com #

    4. Matt Derocher

      Matt Derocher @mjamesderocher #

      I love this. There's other ways to make fast websites besides AMP, and it's great to promote those that are working hard to make great experiences. zachleat.com/web/performanc…