Use Speedlify to Continuously Measure Site Performance
June 29, 2020#1226k10636425
When launching a brand new web site, it’s fairly common to run testing tools to ensure that the site is fast and follows best practices. One popular tool to accomplish these goals is Google’s Lighthouse. It works great and is pretty comprehensive.
Here are some of the ways I’ve used Lighthouse to help test my sites:
Chrome Developer Tools (this is where people usually start)
Eleventy Leaderboards allow the Eleventy community to compete on site performance and accessibility (also using performance-leaderboard).
Lighthouse Viewer can diff two different Lighthouse logs to see how the performance changed.
Instantaneous measurement is a good first step. But how do we ensure that the site maintains good performance and best practices when deploys are happening every day? How do we keep the web site fast? The second step is continuous measurement. This is where Speedlify comes in. It’s an Eleventy-generated web site published as an open source repository to help automate continuous performance measurements.
DIY: Run it manually, locally on your computer and check in the data to your repo.
Automated: If you want to automate it, Speedlify can run entirely self-contained on Netlify. Be aware that there’s a maximum of 15 minutes per build (if you do 3 runs each, I’d guess this will let you test a maximum of around 20 pages). Netlify’s free tier gives you 300 build minutes per month.
Next Steps
Speedlify is intended as a stepping stone to more robust performance monitoring solutions like:
You had me at pretty colorful graphs aka a dashboard.
Stefan Judis
That is very cool! Thanks for sharing that Zach!
Quick question about the netlify build cache, if you don't mind. 🙈 The history won't persist if I rebuild with "clear cache" or?
The Realest
Will the official 11ty boards switch to this? Maybe update daily?
Zach Leatherman
It is very possible, they’re both using performance-leaderboard. Though it will require more work to orchestrate 348 sites and stay under that 15m build limit 😅
Nicolas Hoizey
Wow, I was hacking my own version of github.com/zachleat/perfo… today, I should have waited a little! 😍
Todd Parker
This is sweet!
Andy Bell
This is ridiculously good zach
Nicolas Hoizey
This new tool looks amazing, I'm trying it right now! 👍
Zach Leatherman
Thanks Todd!
Zach Leatherman
Awesome, thanks Andy!
Zach Leatherman
one handy trick I use is to delete all the javascript
ross
Trying to get auto-deploys with netlify had 1 issue with the `npm run zip-results` in build-production
OX Web Development
Would love to see this for Wordpress
Bayu Angora
I wonder that Next is faster than Hugo.
am I jacky? or am I jacky's dog? lol 📟🇭🇹✊🏾
Ah, I have a fix for this (it requires pre-stitching an image with a cap) but I'm like three months out on it >_<
Zach Leatherman
oh nice, I like that idea although the responsive behavior might feel a bit weird if the facepiles don’t reflow?
am I jacky? or am I jacky's dog? lol 📟🇭🇹✊🏾
It depends! I only have this in my notes but I was going to wrap it in a custom element that took up a max width and did the math before hand (I also was going to run something that did the sizing of images beforehand)
Aaron Parecki
lol I have this problem too! At least you collapse your “likes” and “reposts” sections by default! I’m thinking about adding a “show more comments” button that you have to click in order to show more than the last 20 or so comments.
Matthias Ott
Haha, same here! Especially for the personal website article, page size grew dramatically. Used to download the avatars manually (😇) and run them through a Photoshop action and ImageOptim… 😂
Nicolas Hoizey
Also, there’s something strange on my mobile Safari… 😅
Nicolas Hoizey
Indeed! 👍
github.com/zachleat/zachl…
Søren Birkemeyer 🦊
Woohoo 🙌
bertrandkeller
Is it inspired by lowtus.fr ? @lowtusdev
Zach Leatherman
I don’t think so but that does look very comprehensive! Nice work!
24 Comments
Paul Applegate
You had me at pretty colorful graphs aka a dashboard.
Stefan Judis
That is very cool! Thanks for sharing that Zach! Quick question about the netlify build cache, if you don't mind. 🙈 The history won't persist if I rebuild with "clear cache" or?
The Realest
Will the official 11ty boards switch to this? Maybe update daily?
Zach Leatherman
It is very possible, they’re both using performance-leaderboard. Though it will require more work to orchestrate 348 sites and stay under that 15m build limit 😅
Nicolas Hoizey
Wow, I was hacking my own version of github.com/zachleat/perfo… today, I should have waited a little! 😍
Todd Parker
This is sweet!
Andy Bell
This is ridiculously good zach
Nicolas Hoizey
This new tool looks amazing, I'm trying it right now! 👍
Zach Leatherman
Thanks Todd!
Zach Leatherman
Awesome, thanks Andy!
Zach Leatherman
one handy trick I use is to delete all the javascript
ross
Trying to get auto-deploys with netlify had 1 issue with the `npm run zip-results` in build-production
OX Web Development
Would love to see this for Wordpress
Bayu Angora
I wonder that Next is faster than Hugo.
am I jacky? or am I jacky's dog? lol 📟🇭🇹✊🏾
Ah, I have a fix for this (it requires pre-stitching an image with a cap) but I'm like three months out on it >_<
Zach Leatherman
oh nice, I like that idea although the responsive behavior might feel a bit weird if the facepiles don’t reflow?
am I jacky? or am I jacky's dog? lol 📟🇭🇹✊🏾
It depends! I only have this in my notes but I was going to wrap it in a custom element that took up a max width and did the math before hand (I also was going to run something that did the sizing of images beforehand)
Aaron Parecki
lol I have this problem too! At least you collapse your “likes” and “reposts” sections by default! I’m thinking about adding a “show more comments” button that you have to click in order to show more than the last 20 or so comments.
Matthias Ott
Haha, same here! Especially for the personal website article, page size grew dramatically. Used to download the avatars manually (😇) and run them through a Photoshop action and ImageOptim… 😂
Nicolas Hoizey
Also, there’s something strange on my mobile Safari… 😅
Nicolas Hoizey
Indeed! 👍 github.com/zachleat/zachl…
Søren Birkemeyer 🦊
Woohoo 🙌
bertrandkeller
Is it inspired by lowtus.fr ? @lowtusdev
Zach Leatherman
I don’t think so but that does look very comprehensive! Nice work!