Eleventy’s New Performance Leaderboard

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!