Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Lighthouse CI Action #12772

Merged
merged 17 commits into from
May 2, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 105 additions & 0 deletions .github/workflows/lighthouse-ci.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
name: Lighthouse CI

on:
push:
branches:
- master
- staging
- performance/**

jobs:
lighthouse:
runs-on: ubuntu-latest

permissions:
pull-requests: write

steps:
- uses: actions/checkout@v4
- name: Sleep for 60 minutes
run: sleep 3600
- name: Wait for Netlify Deploy
id: netlify_deploy
uses: probablyup/wait-for-netlify-action@3.2.0
with:
site_id: "e8f2e766-888b-4954-8500-1b647d84db99"
max_timeout: 900
env:
NETLIFY_TOKEN: ${{ secrets.NETLIFY_TOKEN }}
- name: Audit URLs using Lighthouse
id: lighthouse_audit
uses: treosh/lighthouse-ci-action@v11
with:
urls: |
${{ steps.netlify_deploy.outputs.url }}/en/
${{ steps.netlify_deploy.outputs.url }}/en/wallets/find-wallet/
${{ steps.netlify_deploy.outputs.url }}/en/staking/
${{ steps.netlify_deploy.outputs.url }}/en/whitepaper/
${{ steps.netlify_deploy.outputs.url }}/en/nft/
${{ steps.netlify_deploy.outputs.url }}/en/developers/docs/intro-to-ethereum/
${{ steps.netlify_deploy.outputs.url }}/en/developers/tutorials/creating-a-wagmi-ui-for-your-contract/
runs: 3 # run three times
uploadArtifacts: true # save results as an action artifacts
temporaryPublicStorage: true # upload lighthouse report to the temporary storage
minimalsm marked this conversation as resolved.
Show resolved Hide resolved
- name: Format lighthouse score
id: format_lighthouse_score
uses: actions/github-script@v3
with:
github-token: ${{ secrets.GITHUB_TOKEN }}
script: |
const manifests = ${{ steps.lighthouse_audit.outputs.manifest }};
const links = ${{ steps.lighthouse_audit.outputs.links }};
const formatResult = (res) => Math.round((res * 100));

console.log('Total manifests:', manifests.length);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Total manifests should be number of runs * number of urls

console.log('Manifests:', JSON.stringify(manifests, null, 2));
console.log('Links:', JSON.stringify(links, null, 2));

let comment = [
'| Page | Performance | Accessibility | Best practices | SEO | PWA |',
'| --- | --- | --- | --- | --- | --- |',
];

Object.entries(links).forEach(([pageUrl, reportUrl]) => {
const relevantManifests = manifests.filter(manifest => manifest.url === pageUrl);
const results = relevantManifests.map(manifest => manifest.summary);
const averagedResults = {};

if (results.length > 0) {
Object.keys(results[0]).forEach(key => {
averagedResults[key] = formatResult(
results.reduce((acc, cur) => acc + cur[key], 0) / results.length
);
});

const score = res => res >= 90 ? '🟢' : res >= 50 ? '🟠' : '🔴';
const urlForTable = pageUrl.includes('/en/') ? pageUrl.substring(pageUrl.indexOf('/en/')) : pageUrl;

comment.push(
`| [${urlForTable}](${reportUrl}) | ${score(averagedResults.performance)} ${averagedResults.performance} | ${score(averagedResults.accessibility)} ${averagedResults.accessibility} | ${score(averagedResults['best-practices'])} ${averagedResults['best-practices']} | ${score(averagedResults.seo)} ${averagedResults.seo} | ${score(averagedResults.pwa)} ${averagedResults.pwa} |`
);
} else {
console.error('No results found for URL:', pageUrl);
}
});

comment.push(
' ',
'*Lighthouse scores are calculated based on the latest audit results*'
);

comment = comment.join('\n');
core.setOutput("comment", comment);
- name: Find current PR # Find the PR associated with this push, if there is one.
uses: jwalton/gh-find-current-pr@v1.3.3
id: findPr
with:
state: open
- name: Add Lighthouse stats as comment
id: comment_to_pr
uses: marocchino/sticky-pull-request-comment@v2.0.0
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is neat :)

with:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
number: ${{ steps.findPr.outputs.number }}
header: lighthouse
message: ${{ steps.format_lighthouse_score.outputs.comment }}
Loading