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
- Get the preview url for the PR (from Vercel).
- Run a Lighthouse audit on the preview url with this plugin.
- Format the score to a table (+throw in a few emojis).
- 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).
Top comments (9)
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 onurl1
andurl2
? Thank youHi Allessandro, you can check out github.com/treosh/lighthouse-ci-ac... - seems to be possible to pass in multiple urls:
Thank you!
This is so cool!
That' an amzing idea. Thanks for sharing
This is great! brilliant!
Thanks for the super cool technique, your article was featured on the latest Next.js News: twitter.com/vvoyer/status/13182876...
That's awesome, thank you so much Vincent
Thanks! 😄
Some comments have been hidden by the post's author - find out more