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.
@stefanjudis
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?
@realglenndixon
Will the official 11ty boards switch to this? Maybe update daily?
@zachleat
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 😅
@nhoizey
Wow, I was hacking my own version of github.com/zachleat/perfo… today, I should have waited a little! 😍
@toddmparker
This is sweet!
@hankchizljaw
This is ridiculously good zach
@nhoizey
This new tool looks amazing, I'm trying it right now! 👍
@zachleat
Thanks Todd!
@zachleat
Awesome, thanks Andy!
@zachleat
one handy trick I use is to delete all the javascript
@RDallaire
Trying to get auto-deploys with netlify had 1 issue with the `npm run zip-results` in build-production
@oxwebdev
Would love to see this for Wordpress
@BayuAngora
I wonder that Next is faster than Hugo.
@jackyalcine
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 >_<
@zachleat
oh nice, I like that idea although the responsive behavior might feel a bit weird if the facepiles don’t reflow?
@jackyalcine
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)
@aaronpk
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.
@m_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… 😂
@nhoizey
Also, there’s something strange on my mobile Safari… 😅
@nhoizey
Indeed! 👍
github.com/zachleat/zachl…
@polarbirke
Woohoo 🙌
@bertrandkeller
Is it inspired by lowtus.fr ? @lowtusdev
@zachleat
I don’t think so but that does look very comprehensive! Nice work!
24 Comments
@papplegate
You had me at pretty colorful graphs aka a dashboard.
@stefanjudis
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?
@realglenndixon
Will the official 11ty boards switch to this? Maybe update daily?
@zachleat
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 😅
@nhoizey
Wow, I was hacking my own version of github.com/zachleat/perfo… today, I should have waited a little! 😍
@toddmparker
This is sweet!
@hankchizljaw
This is ridiculously good zach
@nhoizey
This new tool looks amazing, I'm trying it right now! 👍
@zachleat
Thanks Todd!
@zachleat
Awesome, thanks Andy!
@zachleat
one handy trick I use is to delete all the javascript
@RDallaire
Trying to get auto-deploys with netlify had 1 issue with the `npm run zip-results` in build-production
@oxwebdev
Would love to see this for Wordpress
@BayuAngora
I wonder that Next is faster than Hugo.
@jackyalcine
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 >_<
@zachleat
oh nice, I like that idea although the responsive behavior might feel a bit weird if the facepiles don’t reflow?
@jackyalcine
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)
@aaronpk
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.
@m_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… 😂
@nhoizey
Also, there’s something strange on my mobile Safari… 😅
@nhoizey
Indeed! 👍 github.com/zachleat/zachl…
@polarbirke
Woohoo 🙌
@bertrandkeller
Is it inspired by lowtus.fr ? @lowtusdev
@zachleat
I don’t think so but that does look very comprehensive! Nice work!