
10 min read
From the studio
We build apps people actually keep.Tinkrd is a small indie studio making focused, high-quality apps for everyday life. See what we're working on.
View our appsIf you have ever shipped a web app or Chrome extension and wondered why your page feels slow even though it looks fine, Lighthouse is the tool that tells you the truth. The Lighthouse Chrome plugin runs automated audits against your page and spits out scored reports covering performance, accessibility, SEO, and more. Here is what it actually does and how to use it without getting lost in the noise.
What the Lighthouse Chrome Plugin Is
The Lighthouse Chrome plugin is a browser-based auditing tool built and maintained by Google that analyzes any web page you point it at. It runs a set of automated checks, scores each category from 0 to 100, and gives you a prioritized list of issues to fix. It is not the same as the Lighthouse panel baked into Chrome DevTools, though both use the same underlying engine. The plugin version is a standalone Chrome extension you install separately, and it gives you a slightly different interface with some extra sharing and configuration options.
Google publishes Lighthouse as an open-source project, so the scoring logic is not a black box. You can read the official Lighthouse documentation to understand exactly how each metric is calculated.
The five audit categories Lighthouse covers are:
- Performance, including Core Web Vitals like LCP, INP, and CLS
- Accessibility, checking contrast ratios, ARIA roles, and keyboard navigation
- Best Practices, flagging deprecated APIs, mixed content, and security issues
- SEO, covering metadata, crawlability, and mobile friendliness
- Progressive Web App, verifying service workers, manifests, and HTTPS
Each category score is a weighted average of its individual audits. A score of 90 or above is considered good. Between 50 and 89 is needs improvement. Below 50 is poor.
Lighthouse Chrome Plugin vs. DevTools vs. CLI
There are three main ways to run Lighthouse, and each one has a different use case. The plugin, DevTools panel, and command-line interface all use the same core engine, but they fit different workflows.
The Chrome Extension
The Lighthouse Chrome plugin installs from the Chrome Web Store like any other extension. You click the icon on any page, choose your device emulation settings, and hit Generate Report. The report opens in a new browser tab as an HTML file you can save or share. This is the most accessible entry point for someone who is not comfortable with terminal commands.
The DevTools Panel
The Lighthouse panel inside Chrome DevTools (open with F12, then click the Lighthouse tab) is built into the browser with no installation needed. It runs audits in a slightly more controlled environment because DevTools throttles the network and CPU to simulate a mid-tier mobile device. Most developers end up using this version more often because it is always there.
The CLI
The Lighthouse CLI is a Node.js package you run from the terminal. It is the right choice when you want to automate audits in a CI/CD pipeline, run batch audits across multiple URLs, or output results as JSON for programmatic use.
npm install -g lighthouse
lighthouse https://yourapp.com --output html --output-path ./report.html
Here is a quick comparison to help you pick the right tool:
| Method | Setup | Best For | Output |
|---|---|---|---|
| Chrome Plugin | Install from Web Store | One-off manual audits, sharing reports | HTML report in browser tab |
| DevTools Panel | Built into Chrome, no setup | Regular dev workflow checks | Interactive panel + downloadable JSON |
| CLI | Node.js + npm install | Automated CI audits, batch testing | HTML, JSON, or CSV |
How to Run a Meaningful Audit With the Plugin
Running the plugin is simple but getting a meaningful result takes a bit of care. A few things will throw off your scores if you ignore them.
Before You Click Generate Report
First, open an incognito window and run your audit there. Your installed extensions, including ad blockers and password managers, can interfere with how the page loads and change your scores. The Lighthouse plugin works in incognito mode. This is probably the most common mistake people make when comparing scores between machines.
Second, close other tabs and applications that are consuming CPU. Lighthouse simulates a slower device but is still affected by your actual machine load during the test.
Third, decide whether you are testing mobile or desktop. The default in the plugin is mobile, which applies a 4x CPU slowdown and throttled network. Desktop removes most of that throttling. Your mobile and desktop scores will often be very different, and both matter.
Reading the Results
The report opens with four colored score circles. Scroll past those to the actual audit items. Each item shows a pass, warning, or fail status, and the failed items include a specific description of the problem and a link to documentation explaining how to fix it.
The Performance category breaks down into diagnostics and opportunities. Opportunities are items with direct time savings attached, like removing render-blocking resources or properly sizing images. Those are the ones to prioritize first because the tool is telling you exactly how many milliseconds you stand to save.
Acting on Lighthouse Scores Without Losing Your Mind
Lighthouse scores are useful, but chasing a perfect 100 across every category is not always the right goal. The performance score in particular is a snapshot taken under specific conditions, and it will vary between runs because of network variability and CPU fluctuation.
At Tinkrd, when we were optimizing the web presence for our app Stepping Stones, we found that fixing the top three performance items in Lighthouse got us most of the real-world improvement we were looking for. The diminishing returns past that point were real.
A practical workflow looks like this:
- Run the audit in incognito on mobile settings
- Screenshot or save the report so you have a baseline
- Pick the top two or three failing opportunities sorted by estimated savings
- Fix one, re-run, compare scores
- Repeat, but do not optimize what does not actually affect your users
The accessibility audits deserve separate attention. Lighthouse catches a meaningful portion of common accessibility issues but the W3C accessibility guidelines are clear that automated testing catches maybe 30 to 40 percent of real-world accessibility problems. Manual testing with a keyboard and a screen reader is still necessary.
Using Lighthouse When Building a Chrome Extension
If you are building a Chrome extension rather than auditing a regular website, Lighthouse is still useful but with some limitations. You cannot point Lighthouse directly at an extension’s popup or options page using a chrome-extension:// URL because the tool requires a real HTTP or HTTPS URL to run a full audit.
The workaround is to build and test your extension’s web-facing components, like a landing page, a web app that your extension connects to, or any injected content. For the extension code itself, you care more about things like script load time, memory usage, and permission scope than Lighthouse scores. You would audit those differently.
For anyone going deeper into browser extension work, our guide to what Chrome extension development actually takes covers the full scope of the craft, including the parts that go beyond what Lighthouse touches. And if you are just starting out and wondering whether you can build one yourself, this piece on building your own Chrome extension walks through the honest answer.
One useful pattern when building extensions: run Lighthouse on your marketing or documentation site before launch, because that is the first thing users and reviewers will see, and a slow or inaccessible web presence hurts trust even if the extension itself is solid.
Automating Lighthouse in a CI Pipeline
Running Lighthouse manually is fine during early development, but once you are shipping regularly, you want automated audits that catch regressions before they reach users. The most common approach is to use the Lighthouse CI package, which wraps the core tool with assertion configuration and server-side result storage.
npm install -g @lhci/cli
lhci autorun
You configure thresholds in a lighthouserc.js file at the root of your project:
module.exports = {
collect: {
url: ['https://yourapp.com'],
numberOfRuns: 3
},
assert: {
assertions: {
'categories:performance': ['warn', { minScore: 0.8 }],
'categories:accessibility': ['error', { minScore: 0.9 }]
}
},
upload: {
target: 'temporary-public-storage'
}
};
This config runs three audits per URL, averages the scores, warns if performance drops below 80, and fails the build if accessibility drops below 90. The temporary-public-storage target uploads your report to a Google-hosted server for 13 days so you can link to it from a pull request comment. For a small team, that workflow is usually enough to keep regressions from sneaking through.
Frequently Asked Questions
Is the Lighthouse Chrome plugin the same as what runs in DevTools?
They use the same underlying engine and scoring logic, but they are separate interfaces. The Chrome plugin is an installable extension with its own popup and report sharing features. The DevTools panel is built into Chrome with no installation required. Most developers end up using DevTools more often because it is always available, but the plugin is handy for quick audits on pages you do not own or when you want to share a clean report link.
Why does my Lighthouse score change every time I run it?
Performance scores in particular vary between runs because of network variability, CPU load on your machine, and timing differences in how resources load. Google recommends running at least three audits and averaging the results to get a stable number. The CLI and Lighthouse CI both support a numberOfRuns setting for exactly this reason. A swing of five to ten points between runs is normal and not worth stressing over.
Can Lighthouse audit a Chrome extension popup or options page?
Not directly. Lighthouse requires an HTTP or HTTPS URL and cannot audit pages served from a chrome-extension:// scheme. The practical workaround is to audit the web-facing components your extension connects to, like your app or marketing site, and use other tools like Chrome DevTools Memory and Performance panels for the extension-specific code.
What is a good Lighthouse score to target before launch?
A score of 90 or above in each category is generally considered good by Google’s own benchmarks. For accessibility specifically, it is worth treating Lighthouse as a floor rather than a ceiling, because automated checks miss a significant share of real issues. A score of 100 in Lighthouse does not mean your site is fully accessible. Run manual keyboard and screen reader tests as well.
How do I set up Lighthouse CI to fail a GitHub Actions build?
Install the @lhci/cli package, add a lighthouserc.js file with your assert thresholds, and add an lhci autorun step to your workflow YAML after your site is deployed to a preview URL. If any assertion fails, the CLI exits with a non-zero code and fails the workflow run. The Lighthouse CI documentation includes a ready-made GitHub Actions example you can copy and adjust.
Lighthouse is one of those tools that rewards consistency more than perfection. Run it regularly, fix the issues that actually affect your users, and use the accessibility audits as a starting point rather than the whole answer. A score is a signal, not the product itself.
We’re building in the open
Tinkrd is a small studio making thoughtful apps for families. Our first app is launching soon.