build: add Lighthouse CI integration (resolves #267)

[jobara]

• This pull request has been linted by running npm run lint without errors
• This pull request has been tested by running npm run start and reviewing affected routes
• This pull request has been built by running npm run build without errors
• This isn't a duplicate of an existing pull request

Description

Adds Lighthouse CI integration.

Steps to test

• Review the Lighthouse build results
• Review PR status checks for Lighthouse results

Related issues

Resolves #267

[jobara]

@cindyli and @TeddTech could you please take a look at this PR. I have Desktop and Mobile runs, have removed throttling, removed the PWA category, and set thresholds for asserting the results for the categories. You should be able to view the results for failures through annotations on the build, which will also link to those results uploaded to the cloud. You can also download the results from the artifacts.

[cindyli]

@jobara this is super helpful. Some minScore assertion failures already help to capture some issues we didn't noticed before. I think @TeddTech or I should go through those pages individually, figure out causes and fix ones that are valid.

The minScore failures on SEO are likely because of the blocking directive on servers, which we cannot do much. We probably should adjust the minScore for it.

[TeddTech]

@jobara this is super helpful. Some minScore assertion failures already help to capture some issues we didn't noticed before. I think @TeddTech or I should go through those pages individually, figure out causes and fix ones that are valid.

The minScore failures on SEO are likely because of the blocking directive on servers, which we cannot do much. We probably should adjust the minScore for it.

I agree the minScore for SEO can be lower

[TeddTech]

@jobara this is super helpful. Some minScore assertion failures already help to capture some issues we didn't noticed before. I think @TeddTech or I should go through those pages individually, figure out causes and fix ones that are valid.

The minScore failures on SEO are likely because of the blocking directive on servers, which we cannot do much. We probably should adjust the minScore for it.

The outstanding failures for this build seem to be all SEO or accessibility issues.

SEO failures can be fixed by lowering its minScore threshold since there's not much else we can do because the failures are caused by the blocking directive on servers as @cindyli mentioned. I would suggest a minScore anywhere from 85-88.

The following accessibility failures are due to the webpage layout and should be brought up at tomorrow's check-in with the designers present. Below are single examples of the two types of accessibility failures seen in the build.

1. I believe this accessibility failure is due to there being h2 elements in the footer.

2. I believe this accessibility failure is due to the choice of foreground and background colour.

[cindyli]

The latest lighthouse CI failure reports the image on https://dev--wecount.netlify.app/initiatives/ is displayed with incorrect aspect ratio. However, looking at 3 sizes on the report, their calculated aspect ratios are:

• Displayed size: 306 X 160; aspect ratio: 1.9125
• Actual size: 360 X 188; aspect ratio: 1.9148
• Expected size: 918 X 480; aspect ratio: 1.9125

The difference between aspect ratios is nowhere near 5%.

I've filed a bug report with Google Chrome web.dev.

[cindyli]

According to the reply to my issue report with Google Chrome web.dev, the lighthouse report on "displayed with incorrect aspect ratio" is not complaining about the aspect ratio it's complaining about the total resolution (including DPR), but it linked to the incorrect documentation.

Moreover, the improvement for calculating the total resolution was fixed in 6.1.0 (#10801) and will be in Chrome shortly.

[jobara]

According to the reply to my issue report with Google Chrome web.dev, the lighthouse report on "displayed with incorrect aspect ratio" is not complaining about the aspect ratio it's complaining about the total resolution (including DPR), but it linked to the incorrect documentation.

Moreover, the improvement for calculating the total resolution was fixed in 6.1.0 (#10801) and will be in Chrome shortly.

@cindyli thanks for looking into this. Unfortunately they haven't updated Lighthouse CI yet, it's still pointing at v6.0.0. I'm guessing once they update and create a new release, our CI should just pick it up. In regards to total resolution, it looks like it should be pointing at Serve responsive images. It's not clear if their calculation adjustments will remove the issue, or if there is still more work needed on our part.

[greatislander]

I'm closing this as the Netlify Lighthouse plugin can be used instead.