The Lighthouse Chrome Plugin: How It Works and What to Do With It
Photo by op23 on Pexels

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 apps

If 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:

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:

  1. Run the audit in incognito on mobile settings
  2. Screenshot or save the report so you have a baseline
  3. Pick the top two or three failing opportunities sorted by estimated savings
  4. Fix one, re-run, compare scores
  5. 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.

See what we’re building

T
The Tinkrd Team

We are a small independent app studio in California. We write about what we are learning as we build and ship products, from first commit to first customer.