webpack-bundle-analyzer VS lighthouse

Analyze Bundle Size: Use tools like webpack-bundle-analyzer to analyze and reduce your JavaScript bundle size. This can help identify large dependencies that may be slowing down your app.

- `npm run start` - Start the app - `npm run lint` - Lint the project - `npm run test` - Run unit tests - `npm run build` - Build the project - `npm run build:prod` - Build the project in production mode - `npm run build:prod:stats` - Build the project in product mode with stats - `npm run analyse` - Analyse bundle with [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) - `npm run compodoc` - Generate [compodoc](https://github.com/compodoc/compodoc) documentation - `npm run version` - Generate changelog - `npm run prettier` - Format the whole project - `npm run audit` - Audit this application using Sonatype OSS Index

If you're using Webpack for bundling your app, there's the very well known webpack-bundle-analyzer which comes as a webpack plugin that you need add in your webpack config file in order to use it.

Then, with the Webpack Bundle Analyzer plugin, we discovered problematic areas in bundles. Bundle Analyzer highlighted our biggest bundles – client-location and map-with-flashing-dots

I used to use webpack-bundle-analyzer but we have switched the builder to browser-esbuild now.

First start by running a webpack bundle analysis to see what exactly is bundled. You might be surprised about things being included that you didn't expect which can help with where to look.

Firstly I recommend taking a look at the structure of the webpack output with something like webpack-bundle-analyzer for any obvious over bundling issues.

See: https://github.com/webpack-contrib/webpack-bundle-analyzer

Webpack Bundle Analyzer

[1] https://github.com/GoogleChrome/lighthouse/blob/HEAD/docs/user-flows.md

PageSpeed uses Lighthouse under the hood, so what is the deal here? Googling this tells you that PageSpeed also includes some real-world data and so on, but this does not address the problem at stake. After some lengthy deep dives into the issue, we found the reason for it here:

This doesn’t come out of the box, but still possible on GCP by combining puppeteer with lighthouse (checkout puppeteer documentation for this https://github.com/GoogleChrome/lighthouse/blob/main/docs/puppeteer.md).

Google Lighthouse

I wrote a JavaScript version of this using Intl: https://github.com/GoogleChrome/lighthouse/blob/9baac0ae9da7...

Google Lighthouse - Node CLI package that runs various checks on your application, but also includes accessibility testing as well!

Google Core Vitals now represent the most important metrics to focus on when it comes to technical SEO. Google Core Vitals are a set of standardized metrics that Google uses to evaluate the user experience offered by a web page and assign it a technical SEO grade. Several tools exist to measure and report technical SEO performance, but the most reliable is Google Lighthouse.

- referred to https://github.com/GoogleChrome/lighthouse/issues/6512 but didnt see network.disable error - added staticdistdir as per https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/configuration.md,

There has been discussion about adding a visual indicator to make the mode more obvious, but it has not made it into Chrome devtools!

I haven't tried it, but you might be able to control throttling by using lighthouse to get performance data: https://github.com/GoogleChrome/lighthouse/blob/main/docs/throttling.md