WS-1280: Upgrade lighthouse and add as dev dependency #13289
Conversation
scripts/lighthouseRun.sh
Outdated
| npx -p [email protected] lighthouse http://localhost:7081/pidgin/live/c07zr0zwjnnt --chrome-flags="--no-sandbox --headless --disable-gpu" --output json --output html --output-path simorgh --config-path scripts/lighthouseConfig.js && node scripts/lighthouseBudget.js run | ||
| npx -p [email protected] lighthouse http://localhost:7081/mundo/send/u50853489 --chrome-flags="--no-sandbox --headless --disable-gpu" --output json --output html --output-path simorgh --config-path scripts/lighthouseConfig.js && node scripts/lighthouseBudget.js run | ||
| npx -p [email protected] lighthouse http://localhost:7081/somali/send/u130092370 --chrome-flags="--no-sandbox --headless --disable-gpu" --output json --output html --output-path simorgh --config-path scripts/lighthouseConfig.js && node scripts/lighthouseBudget.js run | ||
| lighthouse http://localhost:7081/news/articles/cn7k01xp8kxo --chrome-flags="--no-sandbox --headless --disable-gpu" --output json --output html --output-path simorgh --config-path scripts/lighthouseConfig.js && node scripts/lighthouseBudget.js run |
There was a problem hiding this comment.
I am wondering if we should use one of our own articles as an example - rather than news? Perhaps one with a lot of content?
scripts/lighthouseRun.sh
Outdated
| npx -p [email protected] lighthouse http://localhost:7081/pidgin/live/c07zr0zwjnnt --chrome-flags="--no-sandbox --headless --disable-gpu" --output json --output html --output-path simorgh --config-path scripts/lighthouseConfig.js && node scripts/lighthouseBudget.js run | ||
| npx -p [email protected] lighthouse http://localhost:7081/mundo/send/u50853489 --chrome-flags="--no-sandbox --headless --disable-gpu" --output json --output html --output-path simorgh --config-path scripts/lighthouseConfig.js && node scripts/lighthouseBudget.js run | ||
| npx -p [email protected] lighthouse http://localhost:7081/somali/send/u130092370 --chrome-flags="--no-sandbox --headless --disable-gpu" --output json --output html --output-path simorgh --config-path scripts/lighthouseConfig.js && node scripts/lighthouseBudget.js run | ||
| lighthouse http://localhost:7081/pidgin/articles/cwl08rd38l6o --chrome-flags="--no-sandbox --headless --disable-gpu" --output json --output html --output-path simorgh --config-path scripts/lighthouseConfig.js && node scripts/lighthouseBudget.js run |
There was a problem hiding this comment.
Could we use either of these, which were "real" articles, and more representative than this test article?
- http://localhost:7081/hindi/articles/c9w59wnx27ro (long with quite a number of components)
- http://localhost:7081/pidgin/articles/ce9wk6glg4lo (quite long with quite a number of components including social media embeds)
There was a problem hiding this comment.
Yep http://localhost:7081/pidgin/articles/ce9wk6glg4lo is one I was considering - only issue is that it\s 'bestPractises' score comes in at 88 not 90 - and so it fails. Am I ok to lower the Lighthouse budget?
There was a problem hiding this comment.
Yes, we can lower the budget (do we know why it has dropped?)
I think we probably do need to look at these issues, and create tickets to tackle them in the future
There was a problem hiding this comment.
Yes can create tickets - and no I don't know why it dropped - I'm having real issues recreating the issues on Github actions locally - all the assets I tried pass locally. But some get a lower score fail on Github actions.
It is possible to upload an "workflow artifact" with a github action run, which may allow us to deep dive into the results.
It may be significant to we have much lower pass margins for our Lighthouse tests on Test and Live.
There was a problem hiding this comment.
Are you running NextJS in production mode (i.e. yarn build; yarn start instead of yarn dev - as this is how we start up the application servers on CI).
Yes, I had also been thinking that being able to see the output would be useful - if it's not a huge scope creep could we look into adding it as part of this ticket?
There was a problem hiding this comment.
Yes - running in production mode. Also tried using the command that's used in the runner.
There was a problem hiding this comment.
Oh that's weird & annoying. Then I guess we need to see the output of the file - unless there's a command line thing we can add to make it output the issues to the console instead of to a file?
3 participants
Resolves JIRA: https://bbc.atlassian.net/browse/WS-1280
Summary
Updates lighthouse to latest version and adds as dev dependency.
Code changes
Follows steps on ticket:
yarn add lighthouse --devTwo follow up tickets:
Developer Checklist
Testing
Ready-For-Test, Local)Ready-For-Test, Test)Ready-For-Test, Preview)Ready-For-Test, Live)Additional Testing Steps
Useful Links