Zach’s ugly mug (his face)

Zach Leatherman

Use Speedlify to Continuously Measure Site Performance

June 29, 2020 #1 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 😅

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
I added Lighthouse Scores to my Site’s Footer and You Can Too
Next
Résumé/CV on the Jamstack

62 Retweets

am I jacky? or am I jacky's dog? lol 📟🇭🇹✊🏾Gary ByrneRattleknife DesignSELFHTMLArnaud Ligny 👨‍💻 💡 🚀amurichnajdouKamen NaydenovSami KeijonenSerkan Bektaş 🚀Andrey Savchenkoabdrozaq.trtnKristóf Poduszló 🍩Patrick Grey🎩💋Morten Ellegaard🙏🥂Santiago Morales 🎙Smashing MagazineOpen IncubatorPatrick FaramazAlexandra CauleaRyan KilleenWitch Hat AlcinaSara SoueidanBrett JankordScottDion AlmaerSibelius SeraphiniKen FranqueirodSotoMark HarwoodTodd Moreyʀǟʍɨȶ ʍɨȶʀǟMartin BerglundJon MillerYoav WeissSun 🇲🇺Florian WeilRiccardo ErraFelipe Cruz MartínezScott JehlMichael GeersAlex RussellMax BöckIbeRussell VeaAndy BelljeremiePNicolas HoizeyVincent Le BadezetMike AparicioMatt BiilmannSebastien LorberNicolas GoutayAurélien MANCAMichael BishopJasonJens TangermannAndré Jaenisch𝚐𝚎𝚘𝚛𝚐𝚎𝚜_𝚐𝚘𝚖𝚎𝚜Mir M. Murtaza AliNate SteinerEleventy
361 Likes
Max BöckRyan BarrettSøren Birkemeyer 🦊devJason PamentalLincoln MongilloGode vinkjøpMaëligEric PortisPelle WessmanAndré Jaenischmarlsthe water methodKit 🦄Raphaël AméaumePetrov IgorH | Diógenes 〉= E | Diógenes 〉Jens GeilingZack SeuberlingDecent ReliveDimitris GrammatikoJeanChristophe WiartSjoerd KoelewijnⒸⓐⓡⓛⓞⓢ Ⓡⓞⓓⓡⓘⓖⓤⓔⓢr.villasJimeshFlorian LammelBrian RidgePavel HůzaMichael McMillanNiklas StåhleMichael HalunenKyle GachDario De Bastianige ricciAlex PagedovydenMax ZhukovRichard PasquiouFrançois LeproustRyan GoreeRoel NieskensVu NguyenAnthony Sappbudparr Physically Distancing in Social SolidarityJesse Heady@kkrieger@social.saarlandGinanjar WidyaNaomi See 🎡Carlos MenesesJosh #BlackLivesMatterBatbayar B.Björn GanslandtCharlie RobbinsSteve LeeLee FisherNikita VoloboevThe Bearded ProgrammerGary ByrneJason MerrimanHazim Sami / حازم ساميBen BakerSumonppolJohan BleuzenDaniel FreytagNiko HalinkamurichManaia Junior ⚡️Patrick DahmsIan JenkinsValik VSKatja LutzJose Luis HernandoDawid GawełJordan ArentsenKL-G/ORDON 🐙Lewis WalshMarco HengstenbergLorienPro-UnlocksAlexei AccioBrendonMaxime RichardAndy PorterDenis Peroni海總理Martin B.-M.BorisKAllisonAlexander HeimbuchSteve™Shtev - #BLMGreg StensonJuan JavierChristian FuchsPatrick GreyKristoffer ForsgrenAshRoelf-Jan de VriesPedroCdc🎩💋Morten Ellegaard🙏🥂Aaron GustafsonWim SymonsGunnar Bittersmann 🏠Sébastien EletJabran RafiqueChris KnaussBibiMattia CompagnucciAndrew CarrKristóf Poduszló 🍩RamonaKanitkorn Sujautra (Kid)Jens GrochtdreisPatrick FaramazJuha LiikalaLorenz SahlmannKiran SonleySmashing MagazineOpen IncubatorDiego BettoMGquadro Web AgencypoldotzDeep BagcheeBrowserNativeChris CoyierEric McCormickDaví Machado BatistaKarim ArdalanmkalinaDavid ⓜLadislav SuchanekHanane 🌸chris wills flanneryEduardo UribeGonzalo GuevarazackSahil ParikhEric Ziegersilent pleaseJuan Manuel ElizaldeWitch Hat AlcinaKyle HallemanTomas PustelnikPRSH 🇳🇬Rahmanda WibowoDerek GatessharkmandanJason Miller 🦊⚛Ryan KilleenScottSigitStackroleEmi! 🌻✨ (Matchu, MDR)Elton PintoJoe McGillMikeIan 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 LamotheMartin RaagDion AlmaerIván Olivares RojasVitor Hugo RJohn Resig #BlackLivesMatterJoao Garintommy georgeJaypeeOnlineMalte UblTodd MoreyTereza KubátováChad Thoreson ᵌ ⍨ ᵌPelle WessmanrossMax ChadwickKevin OuyangbradleyallenOgunMartin BerglundRoberto ModicaCaleb QueernNicholas C. ZakasFred MyerscoughMarc AgbanchenouJohn MeyerhoferJeremy CaudleDivlabJoão FigueiredoGarrett CoakleyKieran KlaassenRené StalderZeh FernandesForestry.ioJames ForanJack HowellsJakeSun 🇲🇺Andreas BovensKevin McMahonNick CiskeCorey MegownTom Hermans🤘Eric HoweyThibaut SabotAlex RussellBrian MuenzenmeyerJonathan Eckmier✊🏼 defund the police + wear a maskDr. Adrian D. AlvarezPaul CampbellTom BonnikeFelipe Cruz MartínezJonathon SettleMarius BleuerIbeАндрей ШевцовroyciferDaniel MartínezPaweł LesieckiDavo GalavottiMax BöckGareth ClubbJeremy ThompsonGeorge Salib®Eliot HillJuan FernandesBillyJoel GarplindKoen MaesAhmed NuamanMarc StalfoortStefaney RobertsDave RupertIago BarreiroAbbas ArezooLuis MirandaMatthias Ott☯Evil Jim O'DonnellTracey Berg-FultonWonkyCody Peterson #BLMScott JehlTodd ParkerAllan WhiteJordan MooreNicolas HoizeyLauri Lännenmäki𝘈𝘭𝘦𝘹 𝘊𝘩𝘪𝘶☔Marcy Suttonthefutureis.appOlivier FredonSameeraAndy BellGeraldRalf HorttStéphane RichinRussell VeaBryan E.Brian RinaldiMatt BiilmannLuca FabbriMihkel EidastJelmer de MaatGrégory HoullierBryan RobinsonKanishk 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 leavestevesunderlandJared White 🤓Kÿle MacqüarrieAndrew ChouMarcus 🥦 🚴‍♀️Prakash Kumar💫 prakashio@hey.com✨JoëljonathanRhian van EschJasonMario SommerZoSimon HearneStephanie EcklesJens TangermannolivMWriters Of The WorldTara VancilArpit BatraJonathan TroyerM PoPeter AntoniusKaran GanesanMarkus SchorkScott McCrackenBrent Larsonconst { Shankar } = Gangadhar;Cristian OcampoMir M. Murtaza AliTyler WilliamsTyler Sticka, ☁️4Sergey GornostaevNate Steinercthosカーーズ🏎️Alex CarpenterEleventySathish PaulVance LucasEugeneGianmarco Simone 🦖1.11.3.14Régis Philibert
1 Bookmark
  1. Zach Leatherman

    Zach Leatherman #

    Zach Leatherman ( @zachleat) wrote https://www.zachleat.com/web/speedlify/ If you don't have any budget for Dareboost (or competitors) yet, Speedlify can help you monitor your site's performance for free, and build your performance strategy to justify using even better tools:how… Truncated

24 Replies
  1. Zach Leatherman

    Zach Leatherman @zachleat #

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

  2. bertrandkeller

    bertrandkeller @bertrandkeller #

    Is it inspired by lowtus.fr ? @lowtusdev

  3. Søren Birkemeyer 🦊

    Søren Birkemeyer 🦊 @polarbirke #

    Woohoo 🙌

  4. Nicolas Hoizey

    Nicolas Hoizey @nhoizey #

    Indeed! 👍 github.com/zachleat/zachl…

  5. Nicolas Hoizey

    Nicolas Hoizey @nhoizey #

    aLso, tHErE’S sOmEThiNG STRANgE On My MObiLE safARI… 😅

  6. Matthias Ott

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

  7. Aaron Parecki

    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.

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

    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)

  9. Zach Leatherman

    Zach Leatherman @zachleat #

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

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

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

  11. Bayu Angora

    Bayu Angora @BayuAngora #

    I wonder that Next is faster than Hugo.

  12. OX Web Development

    OX Web Development @oxwebdev #

    Would love to see this for Wordpress

  13. ross

    ross @RDallaire #

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

  14. Zach Leatherman

    Zach Leatherman @zachleat #

    one handy trick I use is to delete all the javascript

  15. Zach Leatherman

    Zach Leatherman @zachleat #

    Awesome, thanks Andy!

  16. Zach Leatherman

    Zach Leatherman @zachleat #

    Thanks Todd!

  17. Nicolas Hoizey

    Nicolas Hoizey @nhoizey #

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

  18. Andy Bell

    Andy Bell @hankchizljaw #

    This is ridiculously good zach

  19. Todd Parker

    Todd Parker @toddmparker #

    This is sweet!

  20. Nicolas Hoizey

    Nicolas Hoizey @nhoizey #

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

  21. Zach Leatherman

    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 😅

  22. The Realest

    The Realest @realglenndixon #

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

  23. Stefan Judis

    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?

  24. Paul Applegate

    Paul Applegate @papplegate #

    You had me at pretty colorful graphs aka a dashboard.

    21 Mentions
    1. Maxime Richard

      Maxime Richard @choukmax #

      Speedlify tools to continuously measure site performance Demo: speedlify.netlify.app/ssg/ Github: github.com/zachleat/speed… Blog post: zachleat.com/web/speedlify/ If you already have budget, use more robust solution like Calibre #werbperf https://t.co/mBSD5D66Ih

    2. Maxime Richard

      Maxime Richard @choukmax #

      Speedlify tools to continuously measure site performance Demo: speedlify.netlify.app/ssg/ Github: github.com/zachleat/speed… Blog post: zachleat.com/web/speedlify/ If you already have budget, use more robust solution like Calibre #werbperf https://t.co/mBSD5D66Ih

    3. Refresh Detroit

      Refresh Detroit @refreshdetroit #

      Use Speedlify to Continuously Measure Site Performance zachleat.com/web/speedlify/

    4. jake

      jake @jasperketone #

      Use Speedlify to Continuously Measure Site Performance—zachleat.com zachleat.com/web/speedlify/ performance, speed, browser, perf, test, webperf, web

    5. Metro Detroit WP

      Metro Detroit WP @MetroDetroitWP #

      Use Speedlify to Continuously Measure Site Performance zachleat.com/web/speedlify/ via @zachleat

    6. PerfReviews ⚡️

      PerfReviews ⚡️ @PerfReviews_ #

      Use Speedlify to continuously measure site performance ⚡️ zachleat.com/web/speedlify/ #webperf #perfmatters #performance

    7. Zach Leatherman

      Zach Leatherman @zachleat #

      Looking for an easy, low barrier way to continuously test the performance of your web sites? Check out Speedlify:

    8. nicolas-hoizey.com #

      Show original post Using speedlify with #Netlify is great, because enhancing the sites performance will reduce the build times, hence the monthly cost… 😁

    9. Séverin bruhat

      Séverin bruhat @severin_bruhat #

      Use Speedlify to Continuously Measure Site Performance—zachleat.com zachleat.com/web/speedlify/

    10. Ema Suriano

      Ema Suriano @emasuriano #

      @neomaxzero you may find this interesting 😉

    11. nicolas-hoizey.com #

      Show original post This new monitoring tool based on #Eleventy, built by @zachleat, is awesome! 😍 Zach Leatherman @zachleat New project: Speedlify 🐇 A self-hosted dashboard to continuously measure and publish web site performance statistics using Lighthouse and Axe. Demo:speedlify.netlify.… Truncated

    12. Nicolas Hoizey

      Nicolas Hoizey @nhoizey #

      This new monitoring tool based on @eleven_ty, built by @zachleat, is awesome! 😍 https://t.co/oIMSD7Yclc It took me just a few minutes to built my dashboard for multiple sites: webperf-monitoring.netlify.app nho.io/n/2020/07/01/1/

    13. narirou

      narirou @narirow #

      web-vitalsの計測値の観測サーバー 調査値が絞られていて見やすそう Use Speedlify to Continuously Measure Site Performance—zachleat.com zachleat.com/web/speedlify/

    14. Juha Liikala

      Juha Liikala @juhaliikala #

      Very nice! 😊👍

    15. Stackrole

      Stackrole @stackrole #

      Check out Speedlify by @zachleat, a self-hosted dashboard to measure performance #reactjs #vuejs #nuxt #nextjs #100DaysOfCode #netlify #womenwhocode #womenintech #javascript #SSG

    16. Forestry.io

      Forestry.io @forestryio #

      👏Zachify. If you're missing a responsive UI to edit your shiny blazing-fast static site, while storing your content in Git: import it in Forestry, we support all those great static site generators. And you'll get instant previews for free 😊

    17. Brian Rinaldi

      Brian Rinaldi @remotesynth #

      Speedlify is a new open source tool built by @zachleat using 11ty that can continuously measure your site performance. It can be run locally or even deployed to Netlify. zachleat.com/web/speedlify/

    18. Russell Heimlich

      Russell Heimlich @kingkool68 #

      Cool! Like a modern day Speedtracker github.com/speedtracker/s…

    19. const { Shankar } = Gangadhar;

      const { Shankar } = Gangadhar; @_sgangadhar #

      @zachleat 🙏 zachleat.com/web/speedlify/

    20. Nate Steiner

      Nate Steiner @nsteiner #

      👇🏼 this is out-of-the-box useful. List out the sites you’re working on and get valuable score info to work against.

    21. Markus Schork

      Markus Schork @atelierschork #

      Love this: Let the games begin! https://t.co/ERZj5vetCo