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

Add Lighthouse CI Action #12772

merged 17 commits into from
May 2, 2024

Conversation

minimalsm
Copy link
Contributor

@minimalsm minimalsm commented Apr 18, 2024

Description

Trying Lighthouse CI for performance testing.

Related Issue

Performance testing

Summary by CodeRabbit

  • New Features
    • Integrated Lighthouse CI in GitHub Actions to perform audits on URLs post-Netlify deployment, assessing performance, accessibility, best practices, SEO, and PWA metrics. Results are now automatically commented on pull requests.

@github-actions github-actions bot added the tooling 🔧 Changes related to tooling of the project label Apr 18, 2024
Copy link

netlify bot commented Apr 18, 2024

Deploy Preview for ethereumorg ready!

Name Link
🔨 Latest commit ee4b63e
🔍 Latest deploy log https://app.netlify.com/sites/ethereumorg/deploys/66327baac9a3a60008090471
😎 Deploy Preview https://deploy-preview-12772--ethereumorg.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 30 (🔴 down 9 from production)
Accessibility: 93 (no change from production)
Best Practices: 92 (🔴 down 8 from production)
SEO: 100 (no change from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

.github/workflows/lighthouse-ci.yml Outdated Show resolved Hide resolved
.github/workflows/lighthouse-ci.yml Outdated Show resolved Hide resolved
@pettinarip
Copy link
Member

@minimalsm nice!

Do you know an easy way to access these reports? or entering the job and downloading the zip file is the only way?
image

Comparing it with the Netlify plugin, this point seems to be an important one. On Netlify, you have this pretty comment with a quick summary and a quick access link to the report.
image

On the other hand, the CI action seems to be more flexible and powerful if we would like to do more things on top of it, we could combine it with other actions. (they have a nice example under "Use output for a powerful composition with other actions")

Do you have other pros & cons?

Note: in the meanwhile, I'll add the same pages we are testing here on the Netlify plugin to see how it looks.

@pettinarip pettinarip marked this pull request as draft April 29, 2024 17:18
@pettinarip
Copy link
Member

pettinarip commented Apr 29, 2024

Converting to draft.

  • @pettinarip to add new steps in the job to add a comment with the main scores.

Copy link
Contributor

github-actions bot commented Apr 30, 2024

Page Performance Accessibility Best practices SEO PWA
/en/ 🔴 48 🟢 94 🟢 95 🟢 100 🔴 38
/en/wallets/find-wallet/ 🔴 45 🟠 88 🟢 96 🟢 93 🔴 38
/en/staking/ 🟠 52 🟢 91 🟢 93 🟢 100 🔴 38
/en/whitepaper/ 🟠 72 🟢 95 🟢 96 🟢 93 🔴 38
/en/nft/ 🟠 64 🟢 95 🟢 99 🟢 93 🔴 38
/en/developers/docs/intro-to-ethereum/ 🟠 73 🟢 94 🟢 99 🟢 93 🔴 38
/en/developers/tutorials/creating-a-wagmi-ui-for-your-contract/ 🟠 72 🟠 88 🟢 99 🟢 93 🔴 38

Lighthouse scores are calculated based on the latest audit results

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

@minimalsm

This comment was marked as resolved.

This comment was marked as resolved.

coderabbitai[bot]

This comment was marked as off-topic.

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

@minimalsm minimalsm marked this pull request as ready for review May 1, 2024 15:16
Copy link
Member

@pettinarip pettinarip left a comment

Choose a reason for hiding this comment

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

LGTM! nice job @minimalsm

After removing the testing branch, I think we are good to go.

.github/workflows/lighthouse-ci.yml Outdated Show resolved Hide resolved
@pettinarip pettinarip merged commit 0f274ef into dev May 2, 2024
6 checks passed
@pettinarip pettinarip deleted the testlighthouseci branch May 2, 2024 06:56
This was referenced May 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
tooling 🔧 Changes related to tooling of the project
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants