Zach’s ugly mug (his face)

Zach Leatherman

I added Lighthouse Scores to my Site’s Footer and You Can Too

July 12, 2020 #3 Popular

Speedlify started with a very simple goal: make it easy to continuously check a site’s performance. As my friend Scott Jehl has said, “it can be easier to make a site fast than to keep it that way.” And as a performance advocate, I feel that it’s important to keep myself honest and to have some transparency behind the sites I build.

In that vein, I decided to experiment with publishing Lighthouse scores of some of the pages on my personal web site onto the actual pages themselves. This does have a small performance cost associated with it, but eventually I hope to optimize it away when my personal site has a bit better Jamstack architecture behind it.

Fetching the Lighthouse Score #

If you don’t care how this works and just want to set it up—skip to the next section!

Obviously the costliest and most resource intensive piece of adding this feature to my site would be running the Lighthouse tests. I certainly wouldn’t want to run these on every page visit. Luckily Speedlify handles this for me—it’s already testing a bunch of pages on my site and it’s set up to only run once a day. All I needed to do was to add a static API, which is just a fancy way of saying that I used Eleventy to generate a bunch of static JSON files in an /api/ directory.

There are two API pieces here:

Speedlify tests once a day. I do not deploy my personal site every day (don’t tell my employer but my personal site is not yet on Netlify 😭—I wish it were but haven’t migrated it yet). This is a problem (for multiple reasons), right? If I consume the API data when I deploy my personal web site the results would be stale when Speedlify runs the next day! To workaround this temporary limitation I decided to use the Fetch API to grab the data client-side using JavaScript.

This is marginally okay as the widget is hidden at the very bottom of the page in the footer. But when I migrate my personal site to Netlify, this won’t be necessary. Ideally I would add a webhook in Speedlify to re-build my personal site every time the results change and delete that client-side JavaScript altogether. Yet another shining example of how a Jamstack architecture can improve front-end performance by making a chunk of clientside JavaScript no longer necessary.

Adding this to your Eleventy site! #

I’ve hopefully streamlined the setup here enough that you can use this up for your own site too (if you’re already using Eleventy). Three steps here:

  1. Run your own Speedlify instance. You can learn more at the GitHub repository or just click this button
    • Modify the files in Speedlify’s _data/sites/*.js folder with your own URLs!
  2. Consume the Speedlify API data files—they are generated automatically with your Speedlify instance.
    • Use Eleventy’s Cache Assets plugin
      npm install @11ty/eleventy-cache-assets --save-dev
    • Copy and paste the small speedlify.js Eleventy global data file to your global data directory. This tells us which URLs are speed tested in Speedlify. Change the URL in speedlify.js to point to your /api/urls.json file. Mine is https://www.speedlify.dev/api/urls.json.
  3. Use the <speedlify-score> Web Component. (These instructions were updated July 17, 2020)
    • npm install speedlify-score
    • Add the speedlify-score.js JavaScript and the speedlify-score.css CSS to your page.
    • Add the <speedlify-score> markup to your page where you want the score to show up. I’d recommend putting it in the footer of your page.
    • Use the speedlify.js Eleventy global data file we added earlier to set the hash attribute. Have a look at my footer.html to see how I did it using Liquid templates (only lines 16 through 19).
    • Also set the speedlify-url attribute to point to your Speedlify instance. Mine is
      speedlify-url="https://www.speedlify.dev"

Go forth and speed test! #

Hope you were able to stumble through those instructions okay—I would love to see examples of this in the wild if you do get it working. Please send them my way!

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
The Lighthouse Scores Will Continue Until Morale Improves
Next
Use Speedlify to Continuously Measure Site Performance

32 Retweets

Josh #BlackLivesMatterRafael MorenoJaydn Edwards 🏳️‍🌈Scott DavisGeorge MerloccoMuhammad Rehan SaeedWellington Torrejais da Silva (em 🏡) 🏳️‍🌈🇧🇷Зарема ХалиловаYagnesh ModhPatrick GreyJoe SnellHelen BaikGaz ShawPaul Irishlaurence hammondAvakumov EgorKyle HallyokselBaldur BjarnasonGeorge Salib®MarcelloPAndre 🦄NanoYassJess but 6 feet awayDani de la CruzEleventyMatt HobbsJosua ZurbrüggWolfram ⪡JS-- HTML++ CSS++⪢ KriesingHazim Sami / حازم ساميAndy BellMatthias Ott
201 Likes
Dylan VannMauricio DinarteCarey Evans 🇳🇿rong-sen🧉Ariel DeschapellKevin C. TofelJosh #BlackLivesMatterLouisBoldBeakNicholas AlmeidaNiko HalinkIago BarreiroAndrea MagnaboscoJacob WeimerMaximo CozettiJamie BeechWarren BuckleyBlack Lives MatterMikaelaRafael MorenoJohn MeyerhoferEric WallaceTom Hermans🤘Muhammad Rehan SaeedRus @ tetretalk.comShane ExterkampOle H SmylingsåsJeremy KatrasAndy | #BLMPhil KeysDavid TaborHans BurbanoDavid MerrileesAlejandro M. AlbertoWim HaubenMatt BuscheGeorge MerloccoGonzalo GuevaraWellington Torrejais da Silva (em 🏡) 🏳️‍🌈🇧🇷Steve™Anand PrabhuCindyDion AlmaerLauraBfabian a. wohlgemuthmarkus staabBernhard HofmannShaun Bent 🇸🇪kcMGquadro Web AgencyNir AraziJaydn Edwards 🏳️‍🌈Parthasarathi G KStephen CunliffeMarc Filleul 🇫🇷Bryan E.Alexei AccioLiliumJohn MichelJose GonzalezOleg KusovКирилл БелобеевArtur PaikinYagnesh ModhGiridhar ShuklaRaulAnthony McLinroyciferMartin Ager AdamsJiabinNi-ni-co-co-la-lásTony StenbergChirag JainPaul GrenierJohn F Croston IIIRalf BachЗарема ХалиловаPatrick HulceAl GrahamArmasherPatrick GreyRafael - International SEO Consultant 🔍 Hire me!Erik EriksonJelmer de MaatFitzy_LonghornJon C. JungerMarcoDanCasey RobinsonParkerBond usePrivilege(stopRacism)Mark GohoHelen BaikYakimHajiChenchelopKhaled GarbayaKarel PersoonsJeff HobbsPerfReviews ⚡️eszterDan DenneySøren Birkemeyer 🦊Gaurang PatelGaël 👨🏻‍💻TundeArthur AnstAnthony SappChuck GrimmettIván GonzálezAvakumov EgorZach AttackManaia Junior ⚡️AlexeyDavid Dal BuscoLeon BrocardMilan MAnushree Subramani 👑Kyle HallAlex ClappertonThea 👩🏻‍💻🐱Nikhil PatilArtuto~Brandon McConnellGanapati V S 🇮🇳yokselToussaint JérémyMarcus RelacionLauraRitik PatniRachele DiTullio, CPWA 🐱Travis MaynardZanderAppSeedMikie EtlingerDr. Adrian D. AlvarezAndre 🦄Nicolas RollierBobby DuffMohamed AzazyffadilaputraArijit BhattacharyaVishal & ViniDarpan KakadiaChrisAdrian ThomasMarcelloPtanangularThamires HelaysaMichael GichiaᴅᴇʀᴇᴋPabloWBKBaldur BjarnasonJose Luis HernandoLaurieMatt FinucaneUli TroyoStephanie EcklesRob 👨‍🎨Robin RendleMarcoDMFie 🐼Sara SoueidanErik Vorhesmubaris.eth 🚀StackroleAmit Kumar SinghDani de la CruzSailor SaturnBradley AllenErik Kroes 🏔Claude AyiteyDusanAndrea VaghiHoussein DjirdehJake DohmPrince WilsonMaxime Richardвкαя∂εℓℓVlad and stones§daire™Matthias OttLéa TortayBrantley HarrisJouni KantolaJoelSouhail KAOUSSIEleventyMatt StrömMax BöckJody DonettiRory James𝐆𝐨𝐤𝐮𝐥 | கோகுல்Matt HobbsHazim Sami / حازم ساميPeter AntoniusPelle WessmanJosua ZurbrüggDave RupertCarles MuiñosWolfram ⪡JS-- HTML++ CSS++⪢ Kriesing
25 Replies
  1. Zach Leatherman

    Zach Leatherman @zachleat #

    this one is on the cusp and fluctuates back and forth 😅

  2. Mark Goho

    Mark Goho @markgoho #

    A lesser person would have bumped that 99 to 100. Thanks for keeping it 99 with us Zach. 😂🤣

  3. Zach Leatherman

    Zach Leatherman @zachleat #

    probably that lighthouse widget I’m loading 😭

  4. eszter

    eszter @c0derabbit #

    what's the remaining 1%? :)

  5. Zach Leatherman

    Zach Leatherman @zachleat #

    I probably won’t implement that but the code is open source!

  6. Mikie Etlinger

    Mikie Etlinger @Elkingtonne #

    Cool. I’m going to give it a whirl. It would be cool if you could set thresholds for metrics and get a notification if the metric diffs fell outside of it.

  7. Zach Leatherman

    Zach Leatherman @zachleat #

    Yay!

  8. Zach Leatherman

    Zach Leatherman @zachleat #

    Yes it can monitor any URL! No it does not need to be hosted on Netlify! (Disclosure I work for Netify)

  9. Mikie Etlinger

    Mikie Etlinger @Elkingtonne #

    @zachleat this is awesome. I’m curious to know if Speedlify can monitor sites outside of Netlify. Does it have to be hosted and monitor sites on Netlify?

  10. Zach Leatherman

    Zach Leatherman @zachleat #

    Yes I talk about this in the post 😅

  11. Chris

    Chris @underscoresdev #

    lol 😆

  12. Erik Vorhes

    Erik Vorhes @erikvorhes #

    Did adding Lighthouse Scores affect your Lighthouse Scores

  13. Sara Soueidan

    Sara Soueidan @SaraSoueidan #

    One more todo for my Web site 😁 thanks for writing this up 😍

  14. Sara Soueidan

    Sara Soueidan @SaraSoueidan #

    Yessss thank you, Zach!

  15. Mike Sherov - Black Lives Matter

    Mike Sherov - Black Lives Matter @mikesherov #

    Please no. I'll stop

  16. Andy Bell

    Andy Bell @hankchizljaw #

    this is v cool zach

  17. Zach Leatherman

    Zach Leatherman @zachleat #

    ahahaha I’m drunk with power

  18. Mike Sherov - Black Lives Matter

    Mike Sherov - Black Lives Matter @mikesherov #

    [ 🔨 🚧 under construction 🔨 🚧 ]

  19. Mike Sherov - Black Lives Matter

    Mike Sherov - Black Lives Matter @mikesherov #

    [verisign secure website ✅]

  20. Mike Sherov - Black Lives Matter

    Mike Sherov - Black Lives Matter @mikesherov #

    [valid xhtml 1.0]

  21. Zach Leatherman

    Zach Leatherman @zachleat #

    Y’ALL ARE kiLlinG Me rn

  22. Mattia Astorino

    Mattia Astorino @equinusocio #

    😘

  23. Mattia Astorino

    Mattia Astorino @equinusocio #

    ALSO The CUrrenT VIsiToRs CoUnTER is misSIng.

  24. Zach Leatherman

    Zach Leatherman @zachleat #

    harsh but fair

  25. Mike Sherov - Black Lives Matter

    Mike Sherov - Black Lives Matter @mikesherov #

    Now just add the css3 and html5 logos to your footer too.

    6 Mentions
    1. Henri Helvetica ✨👩🏾‍🚀✨ 🚀

      Henri Helvetica ✨👩🏾‍🚀✨ 🚀 @HenriHelvetica #

      I love the idea of Speedifly. Yrs ago, I remember tweeting that WP theme authors should sell their themes w/ Perf scores. You then had an idea of what you were getting into ~ like a restaurant’s posted grade at the front door. @zachleat did the same! 👏🏾 zachleat.com/web/lighth… Truncated

    2. Веб-стандарты

      Веб-стандарты @webstandards_ru #

      Оценка Lighthouse в футере сайта. Зак Лезерман показывает, как подключить компонент для отображения оценок из Lighthouse, чтобы быть честным с пользователями и реагировать на ухудшения производительности — zachleat.com/web/lighthouse…

    3. Pinboard Popular

      Pinboard Popular @pinboard_pop #

      I added Lighthouse Scores to my Site’s Footer and You Can Too—zachleat.com zachleat.com/web/lighthouse…

    4. popurls.com #

    5. Fernando Montoya

      Fernando Montoya @montogeek #

      No, you don’t more Google in your life

    6. Dion Almaer

      Dion Almaer @dalmaer #

      Fun!