This composite action uses the treosh/lighthouse-ci-action to collect Core Web Vitals metrics from frontend projects and then posts a comment on the corresponding Pull Request that ran the workflow, reporting these metrics.
- ✨ All the features by treosh/lighthouse-ci-action
- 🌈 Print beautiful results in workflow summary
- 🏆 Comment results in Pull Request
- 🚀 Aggregate metrics output
- 🎉 Collect and compare metrics across previously listed branches or URLs
Before using this action, please ensure the following:
- Your frontend project is set up and running, with an accessible URL that you can use to run Lighthouse-CI.
- If you want to use a self-hosted runner (using dind), you need to set up Chrome browser and set
--headless --disable-storage-reset --disable-dev-shm-usageparameters.
- name: Run Lighthouse
id: lhci-action
uses: olxbr/lighthouse-ci-action@v0
with:
urls: |
http://localhost/
runs: 3
temporaryPublicStorage: true # upload lighthouse report to the temporary storage
configPath: ./.lighthouserc.yml
gh_token: ${{ secrets.GITHUB_TOKEN }}- Collect the metrics at least 3 times for each URL using the
runs: 3option in order to have a better precision in the result, since it will be an average of the executions. - Create a customized lhci configuration file according to the project and use the
configPath: ./.lighthouserc.ymloption to indicate its location for the action, more details in the official lighthouse-ci/configuration docs. - Use the
temporaryPublicStorage: trueoption which will generate a url with the detailed result of the metrics collection. - If you want to know the difference between the metrics in relation to the current code, in the CI pipeline run the action with the current version, which can be a
tagor themainbranch and then with the modified version in the Pull Request.
Provide the list of URLs separated by a new line. Each URL is audited using the latest version of Lighthouse and Chrome preinstalled on the environment.
urls: |
https://example.com/
https://example.com/blog
https://example.com/pricingList of URLs separed by new line to be compared. For each url in the list, compare the values found for the purpose of comparing improving or worsening.
Very useful for comparing a production URL with the development URL.
urls_to_compare: |
https://example.prod.com/
https://example.stg.com/blog
https://example.qa.com/pricing
Set a branch to compare the new results with specific version/branch
branch_to_compare: ${{ github.repository.default_branch }}Post a comment on PR with the results when CI was triggered
For this feature work, you need to add
pull_requestevent on workflowname: Lighthouse CI on: - pull_request . . .
Set the collect preset: perf, experimental or desktop.
collect_preset: desktopUpload Lighthouse results as action artifacts to persist results. Equivalent to using actions/upload-artifact to save the artifacts with additional action steps.
uploadArtifacts: trueUpload reports to the temporary public storage.
Note: As the name implies, this is temporary and public storage. If you're uncomfortable with the idea of your Lighthouse reports being stored on a public URL on Google Cloud, use a private LHCI server. Reports are automatically deleted 7 days after upload.
temporaryPublicStorage: trueUse a performance budget to keep your page size in check. Lighthouse CI Action will fail the build if one of the URLs exceeds the budget.
Learn more about the budget.json spec and practical use of performance budgets.
budgetPath: ./budget.jsonSpecify the number of runs to do on each URL.
Note: Asserting against a single run can lead to flaky performance assertions. Use
1only to ensure static audits like Lighthouse scores, page size, or performance budgets.
runs: 3Set a path to a custom lighthouserc file for full control of the Lighthouse environment and assertions.
Use lighthouserc to configure the collection of data (via Lighthouse config and Chrome Flags), and CI assertions (via LHCI assertions).
configPath: ./lighthouserc.jsonIf some configurations aren't set using action parameters, the settings are fetched from the config file provided here.
Chrome flags are a way to activate browser features that are not available by default.
chrome_flags: "--no-sandbox --disable-gpu --disable-dev-shm-usage"Name of the artifact group if using uploadArtifacts. default: lighthouse-results.
artifactName: lighthouse-resultsGithub token for commenting results in Pull Request. It's possible to use the token secrets.GITHUB_TOKEN available in the secrets of workflow, or generate a Personal Access Token (PAT).
gh_token: ${{ secrets.GITHUB_TOKEN }}Boolean to define if will comment on PR or not.
comment_on_pr: falseUpload Lighthouse results to a private LHCI server by specifying both serverBaseUrl and serverToken.
This will replace uploading to temporary-public-storage.
serverBaseUrl: ${{ secrets.LHCI_SERVER_BASE_URL }}
serverToken: ${{ secrets.LHCI_SERVER_TOKEN }}Note: Use Github secrets to keep your token hidden!
Lighthouse servers can be protected with basic authentication LHCI server basic authentication by specifying both basicAuthUsername and basicAuthPassword will authenticate the upload.
basicAuthUsername: ${{ secrets.LHCI_SERVER_BASIC_AUTH_USERNAME }}
basicAuthPassword: ${{ secrets.LHCI_SERVER_BASIC_AUTH_PASSWORD }}Note: Use Github secrets to keep your username and password hidden!
Use outputs to compose results of the LHCI Action with other Github Actions, like webhooks, notifications, or custom assertions.
Json containing all aggregate summary and metrics from runs:
[
{
"url": "http://localhost/",
"link": "https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1677856612943-31825.report.html",
"summary": {
"performance": 100,
"accessibility": 86,
"bestPractices": 100,
"seo": 58,
"pwa": 0
},
"metrics": {
"firstContentfulPaint": 854,
"largestContentfulPaint": 854,
"interactive": 976,
"speedIndex": 854,
"totalBlockingTime": 10,
"totalCumulativeLayoutShift": 0
}
}
]When urls_to_compare has been used, a new metrics will appear (prefix diff_) with the difference
[
{
"url": "http://localhost/",
"numericUnit": "ms",
"link": "https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1683225917291-99845.report.html",
"summary": {
"performance": 45,
"accessibility": 86,
"bestPractices": 100,
"seo": 58,
"pwa": 0,
"diff_accessibility": 0,
"diff_bestPractices": 0,
"diff_performance": 0,
"diff_pwa": 0,
"diff_seo": 0
},
"metrics": {
"firstContentfulPaint": 20908,
"largestContentfulPaint": 20908,
"interactive": 20908,
"speedIndex": 41731,
"totalBlockingTime": 0,
"totalCumulativeLayoutShift": 0,
"diff_firstContentfulPaint": 217,
"diff_interactive": 217,
"diff_largestContentfulPaint": 217,
"diff_speedIndex": 374,
"diff_totalBlockingTime": 0,
"diff_totalCumulativeLayoutShift": 0
}
}
]A path to .lighthouseci results folder:
/Users/lighthouse-ci-action/.lighthouseci
A JSON string with a links to uploaded results:
{
'http://localhost/': 'https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1677856612943-31825.report.html'
...
}A JSON string with assertion results:
[
{
name: 'maxNumericValue',
expected: 61440,
actual: 508455,
values: [508455],
operator: '<=',
passed: false,
auditProperty: 'total.size',
auditId: 'resource-summary',
level: 'error',
url: 'http://localhost/',
auditTitle: 'Keep request counts low and transfer sizes small',
auditDocumentationLink: 'https://developers.google.com/web/tools/lighthouse/audits/budgets',
},
...
]A JSON string with report results (LHCI docs reference):
[
{
"url": "http://localhost/",
"isRepresentativeRun": true,
"htmlPath": "/Users/lighthouse-ci-action/.lighthouseci/localhost-_-2023_02_14_13_49_30.report.html",
"jsonPath": "/Users/lighthouse-ci-action/.lighthouseci/localhost-_-2023_02_14_13_49_30.report.json",
"summary": {"performance":1, "accessibility":0.71, "best-practices":0.92, "seo":0.6, "pwa":0}
}
]