Zach’s ugly mug (his face) Zach Leatherman

Use speedlify’s AvatarSpeedlify to Continuously Measure Site Performance

June 29, 2020 #12 Popular

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:

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 eleven_ty’s AvatarEleventy-generated web site published as an open source repository to help automate continuous performance measurements.

Source Code

  • Speedlify on GitHub

  • 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.

A very zoomed out screenshot of Speedlify

Next Steps

Speedlify is intended as a stepping stone to more robust performance monitoring solutions like:

Use it to sell ’em on the benefits and if you have budget, pay for something better 😅


< Newer
I added Lighthouse Scores to my Site’s Footer and You Can Too
Older >
Resume/CV on the Jamstack

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web and the creator/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 81 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

106 Reposts

EleventyMarkus SchorkNate SteinerMir M. Murtaza Ali𝚐𝚎𝚘𝚛𝚐𝚎𝚜_𝚐𝚘𝚖𝚎𝚜André JaenischNate Steinerconst { Shankar } = Gangadhar;Jens TangermannJasonRussell HeimlichMichael BishopAurélien MANCANicolas GoutaySebastien LorberMatt BiilmannMike AparicioBrian RinaldiVincent Le BadezetNicolas HoizeyjeremiePAndy BellRussell VeaIbeMax BöckAlex RussellMichael GeersScott JehlFelipe Cruz MartínezRiccardo ErraFlorian WeilSun 🇲🇺Forestry.ioYoav WeissJon MillerMartin Berglundʀǟʍɨȶ ʍɨȶʀǟTodd MoreyMark HarwooddSotoKen FranqueiroSibelius SeraphiniDion AlmaerScottStackroleBrett JankordSara SoueidanWitch Hat AlcinaRyan KilleenAlexandra CauleaJuha LiikalaPatrick FaramazOpen IncubatorSmashing MagazineSantiago Morales 🎙🎩💋Morten Ellegaard🙏🥂Patrick GreyKristóf Poduszló 🍩abdrozaq.trtnAndrey SavchenkonarirouSerkan Bektaş 🚀Sami KeijonenKamen NaydenovnajdouamurichNicolas HoizeyArnaud Ligny 👨‍💻 💡 🚀SELFHTMLRattleknife DesignEma SurianoGary ByrneSéverin bruhatam I jacky? or am I jacky's dog? lol 📟🇭🇹✊🏾Zach LeathermanPerfReviews ⚡️Metro Detroit WPjakeRefresh DetroitMaxime RichardSteve LeeIndieWeb Avatar for https://www.hawkart.usIndieWeb Avatar for https://www.webmastersgallery.comIndieWeb Avatar for https://www.fvwebsite.designIndieWeb Avatar for https://tsdigital.caIndieWeb Avatar for https://riichardwilson.wordpress.comIndieWeb Avatar for https://thedigitalmarketingauthority.comIndieWeb Avatar for https://oligarchsincharge.comIndieWeb Avatar for https://miden.infoIndieWeb Avatar for https://dcmarketinginc.comIndieWeb Avatar for http://adharidshop.liveIndieWeb Avatar for https://www.smashingmagazine.comIndieWeb Avatar for https://blog.arcoptimizer.comAlexis J. VillegasYves Van GoethemIndieWeb Avatar for https://cornerwire.comIndieWeb Avatar for https://allprowebdesigns.comIndieWeb Avatar for https://www.new.pixel-forge.caIndieWeb Avatar for https://wp-dd.comIndieWeb Avatar for https://freddyyam.comIndieWeb Avatar for https://scpie1.wordpress.comIndieWeb Avatar for https://www.websystemer.noIndieWeb Avatar for https://www.cunninghamwebsolutions.comIndieWeb Avatar for https://nicolas-hoizey.comIndieWeb Avatar for https://nicolas-hoizey.comChristian Engel

364 Likes

JanYves Van GoethemIngo RadatzMax BöckRyan BarrettSøren Birkemeyer 🦊devJason PamentalLincoln MongilloMaëligGode vinkjøpEric PortisPelle WessmanAndré Jaenischmarlsthe water methodKit 🦄Raphaël AméaumePetrov IgorJens GeilingH | Diógenes 〉= E | Diógenes 〉Zack SeuberlingDecent ReliveDimitris GrammatikoJeanChristophe WiartSjoerd KoelewijnⒸⓐⓡⓛⓞⓢ ⓇⓞⓓⓡⓘⓖⓤⓔⓢJimeshr.villasFlorian LammelBrian RidgePavel HůzaNiklas StåhleMichael McMillanMichael HalunenDario De BastianiKyle Gachge riccidovydenAlex PageMax ZhukovRichard PasquiouFrançois LeproustRyan GoreeVu NguyenRoel Nieskensbudparr Physically Distancing in Social SolidarityAnthony SappJesse Heady@kkrieger@social.saarlandGinanjar WidyaNaomi See 🎡Josh #BlackLivesMatterCarlos MenesesBatbayar B.Björn GanslandtCharlie RobbinsLee FisherSteve LeeNikita VoloboevGary ByrneThe Bearded ProgrammerJason MerrimanHazim Sami / حازم ساميBen BakerSumonppolJohan BleuzenDaniel FreytagNiko HalinkamurichPatrick DahmsManaia Junior ⚡️Ian JenkinsValik VSJose Luis HernandoKatja LutzDawid GawełJordan ArentsenKL-G/ORDON 🐙Marco HengstenbergLewis WalshLorienPro-UnlocksAlexei AccioBrendonMaxime RichardDenis PeroniAndy Porter海總理BorisKMartin B.-M.AllisonAlexander HeimbuchSteve™Shtev - #BLMGreg StensonJuan JavierChristian FuchsPatrick GreyKristoffer ForsgrenAshRoelf-Jan de VriesPedroCdcAaron Gustafson🎩💋Morten Ellegaard🙏🥂Wim SymonsGunnar Bittersmann 🏠Sébastien EletJabran RafiqueChris KnaussBibiMattia CompagnucciAndrew CarrKristóf Poduszló 🍩RamonaKanitkorn Sujautra (Kid)Jens GrochtdreisPatrick FaramazJuha LiikalaKiran SonleyLorenz SahlmannSmashing MagazineOpen IncubatorDiego BettoMGquadro Web AgencypoldotzDeep BagcheeBrowserNativeEric McCormickChris CoyierDaví Machado BatistaKarim ArdalanmkalinaDavid ⓜLadislav SuchanekHanane 🌸chris wills flanneryGonzalo GuevaraEduardo UribezackSahil ParikhEric ZiegerJuan Manuel Elizaldesilent pleaseWitch Hat AlcinaKyle HallemanTomas PustelnikPRSH 🇳🇬Rahmanda WibowoDerek GatessharkmandanJason Miller 🦊⚛Ryan KilleenScottSigitStackroleEmi! 🌻✨ (Matchu, MDR)Elton PintoMikeJoe McGillIan Larsonthe-simianPraveen Pal ⚡ #WebDevLiveIndiaMohit RathiBrett JankordSarah PengellyThanh TrầnRicardo Blanch PMSven JungnickelSean KernerMicah Ernstl taylorMatthew ShieldsTim Krautaaron hansMatthew Phillipsʀǟʍɨȶ ʍɨȶʀǟYosuke FurukawaYoav WeissBruno CarvalhoBig EthanRemy BernsteinMark HarwoodNinh K. NguyễnMaya BenariJonathan SurmaczSibelius SeraphiniErick MerchantChris LamotheDion AlmaerMartin RaagVitor Hugo RIván Olivares RojasJohn Resig #BlackLivesMatterJoao Garintommy georgeMalte UblJaypeeOnlineTodd MoreyTereza KubátováChad Thoreson ᵌ ⍨ ᵌPelle WessmanMax ChadwickrossKevin OuyangbradleyallenMartin BerglundOgunRoberto ModicaCaleb QueernNicholas C. ZakasMarc AgbanchenouFred MyerscoughJeremy CaudleJohn MeyerhoferDivlabJoão FigueiredoGarrett CoakleyKieran KlaassenRené StalderZeh FernandesForestry.ioJames ForanJack HowellsJakeSun 🇲🇺Andreas BovensKevin McMahonCorey MegownNick CiskeEric HoweyTom Hermans🤘Thibaut SabotBrian MuenzenmeyerAlex RussellJonathan Eckmier✊🏼 defund the police + wear a maskDr. Adrian D. AlvarezPaul CampbellTom BonnikeFelipe Cruz MartínezMarius BleuerJonathon SettleIbeАндрей ШевцовroyciferDaniel MartínezDavo GalavottiPaweł LesieckiMax BöckGareth ClubbJeremy ThompsonEliot HillGeorge Salib®Juan FernandesBillyJoel GarplindKoen MaesAhmed NuamanMarc StalfoortStefaney RobertsDave RupertIago BarreiroAbbas ArezooMatthias OttLuis Miranda☯Evil Jim O'DonnellTracey Berg-FultonWonkyCody Peterson #BLMScott JehlTodd ParkerAllan WhiteJordan MooreNicolas HoizeyLauri LännenmäkiMarcy Sutton𝘈𝘭𝘦𝘹 𝘊𝘩𝘪𝘶☔thefutureis.appSameeraOlivier FredonAndy BellGeraldRalf HorttRussell VeaStéphane RichinBryan E.Brian RinaldiMatt BiilmannLuca FabbriMihkel EidastJelmer de MaatBryan RobinsonGrégory HoullierKanishk KunalStefan BurnickiJayson HarshbargerRyan SwaneyMike AparicioSebastien LorberTorbenDarren Pinderamie ✨Leslie Cohn-WeinJan HoekEric MikkelsenHendrikMarcus RelacionPatrick HulceStefan JudisJack HoldsworthGiustinoJake Dohm⚡️ Mark Buskbjerg ⚡️Pat RamseyMike Harrison DesignSid VishnoiPaul SmithRadimir Bitsov | Parental leaveJared White 🤓stevesunderlandKÿle MacqüarrieAndrew ChouMarcus 🥦 🚴‍♀️Prakash Kumar💫 prakashio@hey.com✨JoëljonathanRhian van EschMario SommerJasonZoSimon HearneStephanie EcklesJens TangermannolivMWriters Of The WorldTara VancilJonathan TroyerArpit BatraM PoPeter AntoniusKaran GanesanMarkus SchorkBrent LarsonScott McCrackenconst { Shankar } = Gangadhar;Cristian OcampoMir M. Murtaza AliTyler Sticka, ☁️4Tyler WilliamsSergey GornostaevNate Steinerカーーズ🏎️cthosAlex CarpenterEleventySathish PaulVance LucasEugeneGianmarco Simone 🦖1.11.3.14Régis Philibert

1 Bookmark

IndieWeb Avatar for https://nicolas-hoizey.com
24 Comments
  1. Paul Applegate

    @papplegate

    You had me at pretty colorful graphs aka a dashboard.

  2. Stefan Judis

    @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?

  3. The Realest

    @realglenndixon

    Will the official 11ty boards switch to this? Maybe update daily?

  4. Zach Leatherman

    @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 😅

  5. Nicolas Hoizey

    @nhoizey

    Wow, I was hacking my own version of github.com/zachleat/perfo… today, I should have waited a little! 😍

  6. Todd Parker

    @toddmparker

    This is sweet!

  7. Andy Bell

    @hankchizljaw

    This is ridiculously good zach

  8. Nicolas Hoizey

    @nhoizey

    This new tool looks amazing, I'm trying it right now! 👍

  9. Zach Leatherman

    @zachleat

    Thanks Todd!

  10. Zach Leatherman

    @zachleat

    Awesome, thanks Andy!

  11. Zach Leatherman

    @zachleat

    one handy trick I use is to delete all the javascript

  12. ross

    @RDallaire

    Trying to get auto-deploys with netlify had 1 issue with the `npm run zip-results` in build-production

  13. OX Web Development

    @oxwebdev

    Would love to see this for Wordpress

  14. Bayu Angora

    @BayuAngora

    I wonder that Next is faster than Hugo.

  15. am I jacky? or am I jacky's dog? lol 📟🇭🇹✊🏾

    @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 >_<

  16. Zach Leatherman

    @zachleat

    oh nice, I like that idea although the responsive behavior might feel a bit weird if the facepiles don’t reflow?

  17. am I jacky? or am I jacky's dog? lol 📟🇭🇹✊🏾

    @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)

  18. Aaron Parecki

    @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.

  19. Matthias Ott

    @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… 😂

  20. Nicolas Hoizey

    @nhoizey

    Also, there’s something strange on my mobile Safari… 😅

  21. Nicolas Hoizey

    @nhoizey

    Indeed! 👍 github.com/zachleat/zachl…

  22. Søren Birkemeyer 🦊

    @polarbirke

    Woohoo 🙌

  23. bertrandkeller

    @bertrandkeller

    Is it inspired by lowtus.fr ? @lowtusdev

  24. Zach Leatherman

    @zachleat

    I don’t think so but that does look very comprehensive! Nice work!

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)