Track Lighthouse Scores To Your Site

By:
Four outlined circles Google Lighthouse scores graphs with number percentages inside of circles

With Google Lighthouse, you can test your websites performance, accessibility, best practices and SEO. These scores have a direct correlation with a websites performance and ability.

It can be easier to make a website perform well, than it is to keep it that way. So continually tracking your websites performance is the best way to keep it optimized.

With Zach Leatherman's open source tool Speedlify we can continually track Lighthouse scores and show them off on our websites. There is a bit of a development process you will have to do to install and maintain Speedlify. See Zack's post for full instructions.

To use my public installment of Speedlify at https://get-speedlify.netlify.app/ and save the time from having to do your own installation, continue with the following steps.

Get Continually Updated Lighthouse Scores For Your Website

Lighthouse results via Speedlify

  1. Login to your Github account and go to https://github.com/jeremyfaucher/speedlify /_data/sites/leaderboard.js

    # If you do not have a Github account you can direct message me on LinkedIn and I will add your URL to the API.

  2. Edit leaderboard.js and add your URL to the url: list and click on Propose changes.

  3. Review your changes and Create pull request.

    Once I Merge pull request your site will be added to the Get Speedlify https://get-speedlify.netlify.app/ page leaderboard and the https://get-speedlify.netlify.app/api/urls.json API.

    # Github will notify you via email once your URL is merged.

  4. Next using the Speedlify Score tool we can add the Lighthouse results to our website. In your website head add the .css and .js. 

    <!-- Async CSS -->
    <link rel="stylesheet" href="https://unpkg.com/speedlify-score@1.0.2/speedlify-score.css" media="print" onload="this.media='all'">
    <!-- Async JS -->
    <script src="https://unpkg.com/speedlify-score@1.0.2/speedlify-score.js" async defer></script>

  5. Finally we can add the HTML snippet to the foot of our site. Replace the URL with your website and get the hash from https://get-speedlify.netlify.app/api/urls.json API under your URL. 

    <!-- Web component -->
    <speedlify-score speedlify-url="https://get-speedlify.netlify.app/" hash="d51b596d" weight rank rank-change score></speedlify-score>

Conclusion

The web is progressively becoming a more transparent place, from open source developments to modern tools that are helping take the guesswork out of web design. For now, this is the only open source way that I know of, to continually track and show Lighthouse scores on your website. As platform and development competition increases, tools like this are going to help set you apart from the underperforming websites of the past.

Resources