Automated lighthouse score to your PR (with Vercel and Github Actions)

TLDR give me the code now!

Imagine a friendly Github Action bot that adds this to all the PRs (per commit) to your repo:

Green Lighthouse metrics

Web pages with Google Lighthouse metrics that are green (>= 90) tend to be faster, more accessible, and come with a better user experience. If you, as a developer, can help your company improve on these metrics it will directly impact your companies bottom line (+ help with your paid marketing efforts and SEO).

The first step to green Lighthouse metrics is to measure the metrics. Make it easy for you, and your fellow developers, to see how your code changes impact the Lighthouse metrics by including the metrics as a part of your PRs.

Github Action workflow

1. Get the preview url for the PR (from Vercel).
2. Run a Lighthouse audit on the preview url with this plugin.
3. Format the score to a table (+throw in a few emojis).
4. Post a comment on the PR with the formatted score.

The comment on the PR will be a sticky comment - e.g. if the comment exists update it else add a new comment.

The complete action can be found here here. Feel free to copy paste this action to your repo.

Integrations used:

• treosh/lighthouse-ci-action
• sticky-pull-request-comment
• vercel-preview-url-action

Not using Vercel?

• Update step 1 of the action (and get the preview url from e.g. Netlify or from your own deployment setup)

Limitations:

• Always runs the Lighthouse audit on the root page.

Further improvements:

• Combine the action with a budget to prevent PRs that bring the metrics below a set treshhold.
• Run the audit only on the pages affected by the PR.
• Compare the collected metrics with the actual metrics of your production site.

Did this help you out? Like and share the article and follow me on Twitter (i'm building Glitterly - a web based video editor).

Comments

[Alessandro]

Amazing article thank you! If I want to run multiple urls adding sth like ${{ steps.vercel_preview_url.outputs.vercel_preview_url }}/blog how can I change the script to say that Lighthouse has run on url1 and url2 ? Thank you

[Oskar Ahlroth]

Hi Allessandro, you can check out github.com/treosh/lighthouse-ci-ac... - seems to be possible to pass in multiple urls:

urls: |
  https://example.com/
  https://example.com/blog
  https://example.com/pricing

[Alessandro]

Thank you!

[Chris Bongers]

This is so cool!

[Christine Pinto]

That' an amzing idea. Thanks for sharing

[Waren Gonzaga]

This is great! brilliant!

[Vincent Voyer]

Thanks for the super cool technique, your article was featured on the latest Next.js News: twitter.com/vvoyer/status/13182876...

[Oskar Ahlroth]

That's awesome, thank you so much Vincent

[Oskar Ahlroth]

Thanks! 😄