Automating Browser-Based Performance Testing

Website performance directly affects what users feel and what your business earns.

One way of identifying performance issues is via API-based load testing tools such as k6. API load tests tell you whether your services scale and how quickly they respond under load, but they don’t measure the full user experience.

If you focus only on load testing your backend, you might still ship a slow or jittery site because of render‑blocking CSS/JavaScript, heavy images/fonts, main‑thread work, layout shifts, and other front-end issues.

Ultimately users don't care where the performance issue resides, they just know your site is "slow".

This slow performance can cost you customers, revenue, search visibility, and trust.

What is Lighthouse?

Lighthouse is an automated auditor built by Google and is part of the Chrome DevTools experience. While this post focuses on performance, Lighthouse also audits and provides actionable recommendations for accessibility, best practices, and SEO.

How Lighthouse works

• Launches Chrome and navigates to your page using the Chrome DevTools Protocol.
• Emulates device, network, and CPU to keep runs comparable.
• Records a performance trace and analyzes it against a set of audits.
• Outputs scores and detailed metrics with fix ideas.
• Can be included in your CI pipeline.

Core Web Vitals: what they mean and why they matter

These user‑focused metrics map to how fast content shows up, how responsive the page feels, and how stable it looks.

Core Web Vitals at a glance

Metric	Plain meaning	Good target	What you’ll see in Lighthouse
LCP (Largest Contentful Paint)	Time to show the largest thing in the initial viewport (often the primary image or a big text block).	≤ 2.5 s	LCP value in the Metrics section
FID (First Input Delay)	Delay from a user’s first tap/click to when the page can start handling it. In Lighthouse runs, use Total Blocking Time (TBT) as the responsiveness indicator.	FID ≤ 100 ms; aim for low TBT	TBT value in the Metrics section
CLS (Cumulative Layout Shift)	How much content unexpectedly moves while the page loads (visual stability).	≤ 0.1	CLS score in Metrics/Diagnostics

Sample Lighthouse Report

Regardless of how you run Lighthouse, you get a detailed report with scores, metrics, and prioritized suggestions.

Overall scores:

What went wrong?

What looks good?

Running Lighthouse

Lighthouse can be run in a number of ways, including:

• Chrome DevTools (UI)
• Command line (CLI)
• Node module (programmatic)

Run Lighthouse from Chrome DevTools

Open your site in Chrome → Right‑click Inspect → Lighthouse tab → Set your analysis options → Analyze. This generates a full HTML report inside DevTools.

Run Lighthouse from the command line

Install Lighthouse (requires Node.js):

npm install -g lighthouse

Basic mobile audit and open the HTML report:

lighthouse https://www.demoblaze.com \
  --output=html \
  --output-path=./reports/lighthouse.html \
  --view

Export JSON for automation or tracking:

lighthouse https://www.demoblaze.com \
  --output=json \
  --output-path=./reports/lighthouse.json \
  --chrome-flags="--headless"

Desktop profile:

lighthouse https://www.demoblaze.com --preset=desktop --output=html --output-path=./reports/desktop.html

Use throttling to simulate slower networks:

lighthouse https://www.demoblaze.com \
  --throttling-method=simulate \
  --throttling.rttMs=150 \
  --throttling.throughputKbps=1638.4 \
  --throttling.cpuSlowdownMultiplier=4 \
  --output=html --output-path=./reports/consistent.html

Focus audits on key performance metrics with a config (lighthouse-config.js):

module.exports = {
  extends: 'lighthouse:default',
  settings: {
    onlyAudits: [
      'first-contentful-paint',
      'largest-contentful-paint',
      'cumulative-layout-shift',
      'total-blocking-time'
    ],
    throttlingMethod: 'simulate',
    throttling: { rttMs: 150, throughputKbps: 1638.4, cpuSlowdownMultiplier: 4 }
  }
};

Run with the config:

lighthouse https://www.demoblaze.com --config-path=./lighthouse-config.js --output=html --output-path=./reports/focused.html

Programmatic usage (Node)

Why use this? Programmatic runs let you script real user interactions and measure performance along a flow (navigations, clicks, route changes). With Puppeteer + Lighthouse User Flows you can drive the browser, capture metrics per step, and generate a single report—perfect for CI, regression checks, and measuring critical journeys like signup or checkout.

Note: Lighthouse currently only supports Puppeteer for programmatic user flows.

Install packages:

npm i lighthouse puppeteer

Save as user-flow.mjs and run with node user-flow.mjs:

import {writeFileSync, mkdirSync} from 'fs';
import puppeteer from 'puppeteer';
import {startFlow} from 'lighthouse';

const browser = await puppeteer.launch({headless: 'new'});
const page = await browser.newPage();
const flow = await startFlow(page);

// Navigate to Demoblaze
await flow.navigate('https://www.demoblaze.com');

// Interaction-initiated navigation via a callback function
await flow.navigate(async () => {
  await page.click('a[href="index.html"]');
});

// Start/End a navigation around a user action
await flow.startNavigation();
await page.click('a#cartur'); // open Cart
await flow.endNavigation();

await browser.close();
mkdirSync('./reports', {recursive: true});
writeFileSync('./reports/lh-flow-report.html', await flow.generateReport());
console.log('Saved ./reports/lh-flow-report.html');

Wrap‑up

Start by running Lighthouse in DevTools (fast feedback) or the CLI (repeatable results). Focus on three things: LCP (how fast the main content shows), TBT (how responsive it feels), and CLS (how stable it looks).

What’s next in this series:

• Containerize Lighthouse runs with Docker for consistent local and CI environments
• Add Lighthouse checks to a GitHub Actions workflow with performance budgets and PR comments
• Export key metrics to Prometheus for time‑series storage
• Visualize trends and budgets in a Grafana dashboard