lighthouse VS lighthouse-ci

Check Performance: Use tools like Google Lighthouse or PageSpeed Insights to monitor your site's speed. We’ve even built this pretty cool performance tool, Performance Insights.

[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!

This is where all the customizations happen. You can tell Lighthouse where you want the reports to live, what type of reports to run, assertions to avoid or pay attention to, and even set benchmarks.

Lighthouse CI is a useful tool for auditing web performance, accessibility, SEO, and best practices. Integrating Lighthouse CI into your GitHub Actions workflow will not only grade your web application, but also provide you with helpful pointers on what you can do to improve the experience for your users.

- 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,

This approach would suit most of the cases however to achieve more accurate performance audits you should be conducting Lighthouse tests on a dedicated server to avoid results being affected by the machine capabilities. In other words, if you are running Lighthouse audits on a repository where there are several pull requests/workflows/pushes going on, the result of this audit may not be accurate and this is what we want to avoid. For that you would need a separate machine with Lighthouse Server installed on it. So on a pull request you would trigger this machine to conduct a performance audit and return response to your repository.

And finally, Lighthouse has a CI version you can run in your continuous integration. We’ll use this method to schedule periodical benchmarks.

TLDR; I use the Google Chrome Lighthouse CI with a .lighthouserc json configuration to test next start. The Lighthouse CI GitHub app is used to return a pass or fail status check in a PR.

You should also incorporate performance checks into your CI/CD pipeline. Use Lighthouse CI to run a synthetic Lighthouse test on each PR (PS: Learn why you shouldn't believe the Lighthouse score alone) and bundlesize package to raise alerts if your bundle size exceeds a certain threshold. For more nuanced data you should use WebPageTest.

You can also run Google’s Lighthouse CI tool against multiple URLs, and then hook that up to their self-hosted dashboard service: https://github.com/GoogleChrome/lighthouse-ci

You can also set up lighthouse-ci as a github action to evaluate the web vitals on push or in pull requests.

You can have more consistent results if you set up Lighthouse CI in an external environment to test your page or use tools like SpeedCurve, but if you need to quickly inspect a website, I suggest taking a look at Page Speed Insights.