DEV Community

loading...
Cover image for Automated lighthouse score to your PR (with Vercel and Github Actions)

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

Oskar Ahlroth
Maker of Glitterly
・2 min read

TLDR give me the code now!

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

Alt Text

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:

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

Discussion (11)

Collapse
asweb85 profile image
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

Collapse
oskarahl profile image
Oskar Ahlroth Author • Edited

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
Enter fullscreen mode Exit fullscreen mode
Collapse
asweb85 profile image
Alessandro

Thank you!

Collapse
chriszie profile image
Christine Zierold

That' an amzing idea. Thanks for sharing

Collapse
warengonzaga profile image
Waren Gonzaga

This is great! brilliant!

Collapse
dailydevtips1 profile image
Chris Bongers

This is so cool!

Collapse
stevenselcuk profile image
Collapse
oskarahl profile image
Collapse
vvo profile image
Vincent Voyer

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

Collapse
oskarahl profile image
Oskar Ahlroth Author

That's awesome, thank you so much Vincent

Some comments have been hidden by the post's author - find out more

Forem Open with the Forem app