Add Lighthouse-CI #5492 #5521

Chandupuram · 2023-07-16T02:07:13Z

Description

This PR consists of the infra setup for the Lighthouse CI for this project. This helps us to check and monitor the performance of the pages and various statistics after each and every push done to the repo.

Related Issues

Add Lighthouse-CI #5492

Check List

I have read the Contributing Guidelines and made commit messages that follow the guideline.
I have run npx turbo lint to ensure the code follows the style guide. And run npx turbo lint:fix to fix the style errors if necessary.
I have run npx turbo format to ensure the code follows the style guide.
I have run npx turbo test to check if all tests are passing, and/or npx turbo test:snapshot to update snapshots if I created and/or updated React Components.
I've covered new added functionality with unit tests if necessary.

.lighthouserc.json

.github/workflows/lighthouse-ci.yml

ovflowd · 2023-07-16T10:10:48Z

I also share the views fo @bmuenzenmeyer is there any test repository or fork you've enabled this so we can see the results?

Also, how does this PR achieves . This helps us to check and monitor the performance of the pages and various statistics after each and every push done to the repo. from your PR description?

Could you describe how we are able to actually get the insights and analysis? Is the bot/CI supposed to comment on the PR or what?

Chandupuram · 2023-07-16T12:21:47Z

I wonder if anyone else thinks this functionality should exist in this file as a separate workflow, or integrate into one of the existing ones at https://github.com/nodejs/nodejs.org/tree/main/.github/workflows. I can see both ways making sense, and not clear precedent. build-and-analysis is rather new.

do you have validation from your fork that we can look at?

https://github.com/Chandupuram/nodejs.org/pull/2
Report for /about page: https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1689488571961-82303.report.html
look at this PR commits and the detail reports generated by LightHouse CI

ovflowd · 2023-07-16T18:14:46Z

look at this PR commits and the detail reports generated by LightHouse CI

It's kinda annoying that Lighthouse generates one status-check per page. As I mentioned we probably would like to generate reports for each major page, but that seems probably not feasible. What bothers me is how these scores are so low, when I see these when running Lighthouse by myself 🤔

I was genuinely looking forward to something like this: https://github.com/OskarAhl/Lighthouse-github-action-comment, but not sure if this creates a new comment on every run or what.

I also wonder where are the custom settings/thresholds at? Did you configure them somewhere? I don't see that in this PR.

bmuenzenmeyer · 2023-07-17T11:27:38Z

@Chandupuram my initial notes and suggested tooling were not clear enough and that's led us down an incorrect path for a bit.

as stated in earlier review, lets make sure to:

add this new work to .github/workflows/build-and-analysis.yml
find a lighthouse ci tool that adds comments to GitHub PRs. I am curious if https://github.com/treosh/lighthouse-ci-action is better. Reading more: Though Document or integrate with github deployments/pull requests treosh/lighthouse-ci-action#44 seems to indicate there is no comment functionality. Apologies to all, this seems like an haphazardly supported solution
https://github.com/OskarAhl/Lighthouse-github-action-comment looks to just be a custom workflow script https://github.com/OskarAhl/Lighthouse-github-action-comment/blob/main/.github/workflows/lighthouse-on-vercel-preview-url.yml - we could write our own.
At this point, @ovflowd I like the idea of leaning on a tool we dont have to maintain. are you okay with https://github.com/treosh/lighthouse-ci-action ?

ovflowd · 2023-07-17T15:07:53Z

It will run against the local development not for the nodejs.org. The thresholds we were using were the Lighthouse CI recommended values. You can check the assert part in .json file.

Are we sure about that? What does the "URL" field then even mean? How can it run against the local environment / current running-CI if no web server is running? That doesn't sound correct to me.

ovflowd · 2023-07-17T15:09:08Z

At this point, @ovflowd I like the idea of leaning on a tool we dont have to maintain. are you okay with treosh/lighthouse-ci-action ?

Is this still a recommendation?

bmuenzenmeyer · 2023-07-22T20:11:41Z

Here's what I think we should do.

Let's first clear up requirements:

we would prefer to avoid status check increases like this, there will simply be too many
have a sticky PR comment instead of status checks
- use this script as a basis https://github.com/OskarAhl/Lighthouse-github-action-comment/blob/main/.github/workflows/lighthouse-on-vercel-preview-url.yml
- check each composed action to see if it's the latest version. most look old. pin them using the pattern found in our other workflow files
  - https://github.com/marocchino/sticky-pull-request-comment
  - https://github.com/aaimio/vercel-preview-url-action (might be more up to date than the fork)
  - https://github.com/actions/checkout
  - https://github.com/treosh/lighthouse-ci-action
  - https://github.com/actions/github-script
rely on an existing tool first, before developing or adapting custom tooling
- Is this still a recommendation?
- I've come around. https://github.com/treosh/lighthouse-ci-action simply isn't enough to achieve our goals
start with ONLY the home page. This mirrors the vercel preview. I'd rather us incrementally adopt other pages

@Chandupuram do you feel up for this pivot? If I don't hear from one in a couple days I will start it

Chandupuram · 2023-07-23T03:56:16Z

I think you can start working on this @bmuenzenmeyer

ovflowd · 2023-07-23T13:34:49Z

.github/workflows/lighthouse-ci.yml

+                `*Lighthouse ran on [${Object.keys(links)[0]}](${Object.keys(links)[0]})*`
+            ].join('\n')
+
+             core.setOutput("comment", comment);


The indentation of this line is wrong.

ovflowd · 2023-07-23T13:42:46Z

.github/workflows/lighthouse-ci.yml

@@ -0,0 +1,71 @@
+name: Google Lighthouse
+
+on:


I'm not sure this is correct, I believe the on here should be of pull_request, since this should be updated on every Pull Request.

ovflowd · 2023-07-23T13:43:07Z

.github/workflows/lighthouse-ci.yml

+        id: loading_comment_to_pr
+        uses: marocchino/sticky-pull-request-comment@v2
+        with:
+          GITHUB_TOKEN: ${{ secrets.LIGHTHOUSE_APP_TOKEN }}


This should not be set. By default it will use GITHUB_TOKEN which is already an Environment Variable

bmuenzenmeyer · 2023-08-01T19:12:29Z

I think you can start working on this @bmuenzenmeyer

citing the above, we will be closing this to take another run at it in the future

Chandupuram added 30 commits July 10, 2023 16:33

Added Lighthouse

f792044

Change

544bf99

Change

6ba3fa1

Change

430e4a1

Change

ab8d76d

Commit

6517116

Design

fbcfb3f

Style path

cc437ab

Pages

b410ea5

Hello

ac87ab3

OUT

d1b0b3d

Pages/EN

d78691f

URL

9e6f089

GIT PUSH

a2af08a

Added now

87c9185

Added Package

8028482

Version Change

b5b5786

EN

2c3aed6

staticDistDir

1ea408c

npx lighthouse-ci --collect

0da80fd

space

a106230

steps

a364fa5

URL

417f524

collect

713ba94

version change

5a4c621

Port change

5c397ec

URL version change

6fe55cc

Added

c3d0267

ENV Removed

ff5d41e

Added

978299c

ovflowd reviewed Jul 16, 2023

View reviewed changes

.lighthouserc.json Show resolved Hide resolved

ovflowd reviewed Jul 16, 2023

View reviewed changes

.github/workflows/lighthouse-ci.yml Outdated Show resolved Hide resolved

This comment was marked as resolved.

Sign in to view

Merge branch 'main' into final-commit

3c56456

vercel bot temporarily deployed to Preview – nodejs-org-stories July 19, 2023 10:01 Inactive

vercel bot temporarily deployed to Preview – nodejs-org July 19, 2023 10:02 Inactive

Merge branch 'main' into final-commit

06f8534

vercel bot temporarily deployed to Preview – nodejs-org-stories July 20, 2023 01:58 Inactive

vercel bot temporarily deployed to Preview – nodejs-org July 20, 2023 01:59 Inactive

Added Custom Methods

ca023f7

vercel bot temporarily deployed to Preview – nodejs-org July 23, 2023 04:25 Inactive

vercel bot temporarily deployed to Preview – nodejs-org-stories July 23, 2023 04:26 Inactive

ovflowd reviewed Jul 23, 2023

View reviewed changes

Merge branch 'main' into final-commit

2be0c19

vercel bot temporarily deployed to Preview – nodejs-org July 23, 2023 13:36 Inactive

vercel bot temporarily deployed to Preview – nodejs-org-stories July 23, 2023 13:37 Inactive

ovflowd reviewed Jul 23, 2023

View reviewed changes

bmuenzenmeyer closed this Aug 1, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Lighthouse-CI #5492 #5521

Add Lighthouse-CI #5492 #5521

Chandupuram commented Jul 16, 2023 •

edited

Loading

ovflowd commented Jul 16, 2023

Chandupuram commented Jul 16, 2023 •

edited

Loading

ovflowd commented Jul 16, 2023

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

bmuenzenmeyer commented Jul 17, 2023 •

edited

Loading

ovflowd commented Jul 17, 2023

ovflowd commented Jul 17, 2023

bmuenzenmeyer commented Jul 22, 2023 •

edited

Loading

Chandupuram commented Jul 23, 2023 •

edited

Loading

ovflowd Jul 23, 2023

ovflowd Jul 23, 2023

ovflowd Jul 23, 2023

bmuenzenmeyer commented Aug 1, 2023

Add Lighthouse-CI #5492 #5521

Add Lighthouse-CI #5492 #5521

Conversation

Chandupuram commented Jul 16, 2023 • edited Loading

Description

Related Issues

Check List

ovflowd commented Jul 16, 2023

Chandupuram commented Jul 16, 2023 • edited Loading

ovflowd commented Jul 16, 2023

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

bmuenzenmeyer commented Jul 17, 2023 • edited Loading

ovflowd commented Jul 17, 2023

ovflowd commented Jul 17, 2023

bmuenzenmeyer commented Jul 22, 2023 • edited Loading

Chandupuram commented Jul 23, 2023 • edited Loading

ovflowd Jul 23, 2023

Choose a reason for hiding this comment

ovflowd Jul 23, 2023

Choose a reason for hiding this comment

ovflowd Jul 23, 2023

Choose a reason for hiding this comment

bmuenzenmeyer commented Aug 1, 2023

Chandupuram commented Jul 16, 2023 •

edited

Loading

Chandupuram commented Jul 16, 2023 •

edited

Loading

bmuenzenmeyer commented Jul 17, 2023 •

edited

Loading

bmuenzenmeyer commented Jul 22, 2023 •

edited

Loading

Chandupuram commented Jul 23, 2023 •

edited

Loading