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é JaenischmarlsKit 🦄the water methodRaphaël AméaumePetrov IgorJens GeilingH | Diógenes 〉= E | Diógenes 〉Zack SeuberlingDecent ReliveDimitris GrammatikoJeanChristophe WiartSjoerd KoelewijnⒸⓐⓡⓛⓞⓢ Ⓡⓞⓓⓡⓘⓖⓤⓔⓢr.villasJimeshFlorian LammelBrian RidgePavel HůzaNiklas StåhleMichael McMillanMichael HalunenDario De BastianiKyle Gachge ricciAlex PagedovydenMax ZhukovRichard PasquiouFrançois LeproustRyan GoreeVu NguyenRoel Nieskensbudparr Physically Distancing in Social SolidarityAnthony SappJesse Heady@kkrieger@social.saarlandGinanjar WidyaNaomi See 🎡Carlos MenesesJosh #BlackLivesMatterBatbayar B.Björn GanslandtCharlie RobbinsSteve LeeLee FisherNikita VoloboevGary ByrneThe Bearded ProgrammerJason MerrimanHazim Sami / حازم ساميBen BakerSumonJohan BleuzenppolDaniel FreytagNiko HalinkamurichManaia Junior ⚡️Patrick DahmsIan JenkinsValik VSJose Luis HernandoKatja LutzDawid GawełJordan ArentsenKL-G/ORDON 🐙Lewis WalshMarco HengstenbergLorienPro-UnlocksAlexei AccioBrendonMaxime RichardAndy PorterDenis Peroni海總理Martin B.-M.BorisKAllisonAlexander HeimbuchSteve™Shtev - #BLMGreg StensonJuan JavierChristian FuchsPatrick GreyKristoffer ForsgrenAshPedroCRoelf-Jan de VriesdcAaron Gustafson🎩💋Morten Ellegaard🙏🥂Wim SymonsGunnar Bittersmann 🏠Jabran RafiqueSébastien EletChris KnaussBibiMattia CompagnucciAndrew CarrKristóf Poduszló 🍩RamonaKanitkorn Sujautra (Kid)Jens GrochtdreisPatrick FaramazJuha LiikalaLorenz SahlmannKiran SonleySmashing MagazineOpen IncubatorDiego BettoMGquadro Web AgencypoldotzDeep BagcheeBrowserNativeChris CoyierEric McCormickDaví Machado BatistamkalinaKarim ArdalanDavid ⓜLadislav SuchanekHanane 🌸chris wills flanneryEduardo UribeGonzalo GuevarazackSahil ParikhEric Ziegersilent pleaseJuan Manuel ElizaldeWitch Hat AlcinaKyle HallemanPRSH 🇳🇬Tomas PustelnikRahmanda WibowoDerek GatessharkmandanJason Miller 🦊⚛Ryan KilleenSigitScottStackroleElton PintoEmi! 🌻✨ (Matchu, MDR)MikeJoe McGillIan Larsonthe-simianPraveen Pal ⚡ #WebDevLiveIndiaMohit RathiBrett JankordSarah PengellyThanh TrầnRicardo Blanch PMSven JungnickelSean KernerMicah Ernstl taylorMatthew ShieldsTim Krautaaron hansʀǟʍɨȶ ʍɨȶʀǟMatthew PhillipsYosuke FurukawaYoav WeissBruno CarvalhoBig EthanRemy BernsteinMark HarwoodNinh K. NguyễnMaya BenariJonathan SurmaczSibelius SeraphiniErick MerchantChris LamotheMartin RaagDion AlmaerVitor Hugo RIván Olivares RojasJohn Resig #BlackLivesMatterJoao Garintommy georgeJaypeeOnlineMalte UblTodd MoreyTereza KubátováChad Thoreson ᵌ ⍨ ᵌPelle WessmanrossMax ChadwickKevin OuyangbradleyallenMartin BerglundOgunRoberto ModicaCaleb QueernNicholas C. ZakasMarc AgbanchenouFred MyerscoughJohn MeyerhoferJeremy CaudleDivlabJoão FigueiredoGarrett CoakleyKieran KlaassenRené StalderZeh FernandesForestry.ioJames ForanJack HowellsSun 🇲🇺JakeAndreas BovensKevin McMahonCorey MegownNick CiskeTom Hermans🤘Eric HoweyThibaut SabotBrian MuenzenmeyerAlex RussellJonathan Eckmier✊🏼 defund the police + wear a maskDr. Adrian D. AlvarezPaul CampbellTom BonnikeFelipe Cruz MartínezMarius BleuerJonathon SettleIbeАндрей ШевцовDaniel MartínezroyciferDavo GalavottiPaweł LesieckiMax BöckJeremy ThompsonGareth ClubbGeorge Salib®Eliot HillJuan FernandesBillyJoel GarplindKoen MaesAhmed NuamanMarc StalfoortStefaney RobertsDave RupertIago BarreiroAbbas ArezooLuis MirandaMatthias Ott☯Evil Jim O'DonnellWonkyTracey Berg-FultonScott JehlCody Peterson #BLMTodd ParkerAllan WhiteNicolas HoizeyJordan MooreLauri LännenmäkiMarcy Sutton𝘈𝘭𝘦𝘹 𝘊𝘩𝘪𝘶☔thefutureis.appOlivier FredonSameeraAndy BellGeraldRalf HorttStéphane RichinRussell VeaBryan E.Brian RinaldiMatt BiilmannMihkel EidastLuca FabbriJelmer de MaatGrégory HoullierBryan RobinsonKanishk KunalStefan BurnickiRyan SwaneyJayson HarshbargerMike 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 EschMario SommerJasonZoSimon HearneJens TangermannStephanie EcklesolivMWriters Of The WorldTara VancilArpit BatraJonathan TroyerM PoKaran GanesanPeter AntoniusMarkus SchorkScott McCrackenBrent Larsonconst { Shankar } = Gangadhar;Cristian OcampoMir M. Murtaza AliTyler WilliamsTyler Sticka, ☁️4Sergey GornostaevNate Steinerカーーズ🏎️cthosEleventyAlex CarpenterSathish PaulEugeneVance LucasGianmarco 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.

    102 Mentions
    1. thebrandingstore.net #

    2. thebrandingstore.net #

    3. thebrandingstore.net #

    4. thebrandingstore.net #

    5. thebrandingstore.net #

    6. thebrandingstore.net #

    7. thebrandingstore.net #

    8. thebrandingstore.net #

    9. thebrandingstore.net #

    10. thebrandingstore.net #

    11. thebrandingstore.net #

    12. thebrandingstore.net #

    13. thebrandingstore.net #

    14. thebrandingstore.net #

    15. thebrandingstore.net #

    16. miden.info #

    17. thebrandingstore.net #

    18. thebrandingstore.net #

    19. thebrandingstore.net #

    20. thebrandingstore.net #

    21. thebrandingstore.net #

    22. admin http://affise.affpaypaid.xyz/?author=1 #

      Bringing You The Best Of SmashingBringing You The Best Of Smashing Iris Lješnjanin 2020-07-17T11:00:00+00:00 2020-07-28T10:37:44+00:00 Well, I guess we can all agree that this year has been quite something. We’ve all been challenged in one way… Truncated

    23. thebrandingstore.net #

    24. thebrandingstore.net #

    25. thebrandingstore.net #

    26. www.sacramentowebdesigngroup.com #

    27. thebrandingstore.net #

    28. thebrandingstore.net #

    29. thebrandingstore.net #

    30. thebrandingstore.net #

    31. thebrandingstore.net #

    32. thebrandingstore.net #

    33. thebrandingstore.net #

    34. thebrandingstore.net #

    35. thebrandingstore.net #

    36. thebrandingstore.net #

    37. thebrandingstore.net #

    38. thebrandingstore.net #

    39. thebrandingstore.net #

    40. thebrandingstore.net #

    41. thebrandingstore.net #

    42. sweeptake.affpaypaid.xyz #

    43. admin https://oligarchsincharge.com/author/admin/ #

      Bringing You The Best Of Smashing Bringing You The Best Of Smashing Iris Lješnjanin 2020-07-17T11:00:00+00:002020-07-21T11:26:45+00:00Well, I guess we can all agree that this year has been quite something. We’ve all been challenged in one way or the ot… Truncated

    44. supersweeptake.affpaypaid.xyz #

      Show original post Bringing You The Best Of SmashingBringing You The Best Of Smashing Iris Lješnjanin 2020-07-17T11:00:00+00:00 2020-07-21T10:05:18+00:00 Well, I guess we can all agree that this year has been quite something. We’ve all been challenged in one way… Truncated

    45. thebrandingstore.net #

    46. thebrandingstore.net #

    47. thebrandingstore.net #

    48. thebrandingstore.net #

    49. thebrandingstore.net #

    50. thebrandingstore.net #

    51. www.webmastersgallery.com #

    52. www.fvwebsite.design #

    53. thebrandingstore.net #

    54. cornerwire.com #

    55. thebrandingstore.net #

    56. admin https://www.hawkart.us/author/admin/ #

      Bringing You The Best Of SmashingBringing You The Best Of Smashing Iris Lješnjanin 2020-07-17T11:00:00+00:002020-07-19T18:35:17+00:00Well, I guess we can all agree that this year has been quite something. We’ve all been challenged in one way or the other, and th… Truncated

    57. thebrandingstore.net #

    58. thebrandingstore.net #

    59. allprowebdesigns.com #

    60. Admin https://dcmarketinginc.com/author/admin/ #

      Show original post Bringing You The Best Of SmashingBringing You The Best Of Smashing Iris Lješnjanin 2020-07-17T11:00:00+00:00 2020-07-18T07:35:33+00:00Well, I guess we can all agree that this year has been quite something. We’ve all been challenged in one way or the other, and the new normal is … Truncated

    61. thebrandingstore.net #

    62. www.new.pixel-forge.ca #

    63. thebrandingstore.net #

    64. Admin https://tsdigital.ca/author/admin/ #

      Show original post Bringing You The Best Of SmashingBringing You The Best Of Smashing Iris Lješnjanin 2020-07-17T11:00:00+00:00 2020-07-18T00:07:10+00:00Well, I guess we can all agree that this year has been quite something. We’ve all been challenged in one way or the other, and the new normal is … Truncated

    65. wp-dd.com #

    66. adharidshop.live #

    67. min.affpaypaid.xyz #

      Show original post Bringing You The Best Of SmashingBringing You The Best Of Smashing Iris Lješnjanin 2020-07-17T11:00:00+00:00 2020-07-17T22:05:24+00:00 Well, I guess we can all agree that this year has been quite something. We’ve all been challenged in one way… Truncated

    68. thebrandingstore.net #

    69. freddy https://freddyyam.com/author/freddy/ #

      Show original post Bringing You The Best Of SmashingBringing You The Best Of Smashing Iris Lješnjanin 2020-07-17T11:00:00+00:002020-07-17T18:34:21+00:00Well, I guess we can all agree that this year has been quite something. We’ve all been challenged in one way or the other, and th… Truncated

    70. development-tools.net #

    71. riichardwilson.wordpress.com #

    72. scpie1.wordpress.com #

    73. thebrandingstore.net #

    74. www.smashingmagazine.com #

    75. pikopong.com #

    76. www.websystemer.no #

    77. 1dmx.org #

    78. thedigitalmarketingauthority.com #

      Show original post About The Author Juggling between three languages on a daily basis, Iris is known for her love of linguistics, arts, web design and typography, as well as her goldmine of … More about Iris … What’s new at Smashing? When’s the next event? Did you miss out on anything? Don’t wo… Truncated

    79. www.cunninghamwebsolutions.com #

    80. blog.arcoptimizer.com #

    81. Steve Lee

      Steve Lee @SteveALee #

      Use Speedlify to Continuously Measure Site Performance [incl. #a11y] @zachleat - open source, freely hosted on @netlify - zachleat.com/web/speedlify/

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

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

    84. Refresh Detroit

      Refresh Detroit @refreshdetroit #

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

    85. jake

      jake @jasperketone #

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

    86. Metro Detroit WP

      Metro Detroit WP @MetroDetroitWP #

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

    87. PerfReviews ⚡️

      PerfReviews ⚡️ @PerfReviews_ #

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

    88. Zach Leatherman

      Zach Leatherman @zachleat #

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

    89. 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… 😁

    90. Séverin bruhat

      Séverin bruhat @severin_bruhat #

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

    91. Ema Suriano

      Ema Suriano @emasuriano #

      @neomaxzero you may find this interesting 😉

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

    93. 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/

    94. narirou

      narirou @narirow #

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

    95. Juha Liikala

      Juha Liikala @juhaliikala #

      Very nice! 😊👍

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

    97. 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 😊

    98. 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/

    99. Russell Heimlich

      Russell Heimlich @kingkool68 #

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

    100. const { Shankar } = Gangadhar;

      const { Shankar } = Gangadhar; @_sgangadhar #

      @zachleat 🙏 zachleat.com/web/speedlify/

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

    102. Markus Schork

      Markus Schork @atelierschork #

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