Adding Lighthouse scores to my site's footer | Zach Leat

...as a performance advocate, I feel that it’s important to keep myself honest and to have some transparency behind the sites I build.

Using a combination of Speedlify and Google Lighthouse tool, Zach is able to display web performance scores in his footer, bespoke for each page. He seems to be doing so client-side, though I don't fully understand the reasoning. He's using 11ty, so there's a build process involved. Zach points out that the Lighthouse score would be "stale" if pulled in during build time but that doesn't feel right. I'd expect the Lighthouse score of a static page to be constant until that page was updated, which would require another build anyway. I guess if he's doing a lot with client-side JS that may not be the case 🤷‍♂️ I also admit that he is the web perf specialist and I am not, so I am likely missing something.

Either way, it's a cool feature and a neat example of API-driven, Jamstack goodness 👍

Explore Other Notes

Older

Preload page links on hover

Gatsby's page-fetching is a feature I consider a double-edged sword (though I'll admit I also don't fully understand it 😅). On the one hand, I'm all for anything that decreases load time between …

  • <!DOCTYPE html> <html> <head> <title></title> </head> <body> <p>Using a combination of Speedlify and Google Lighthouse tool, Zach is able to display web performance scores in his footer, bespoke for each page. He seems to be doing so client-side, though I don't …</p> </body> </html>
  • Murray Adcock.
Journal permalink