Lighthouse

Chrome Extension

a Chrome Extension

The audit tab of devtool

• in the chrome devtool - audit tab

Cli

Cli

Online

• Online: https://developers.google.com/speed/pagespeed/insights/ - for perf
• See Getting Started guide

Node Library

Example where browser is the puppeteer browser object

let urlToAudit = 'http://localhost:3000/test';
let wsEndpoint = browser.wsEndpoint()
let urlChrome = new URL(wsEndpoint);

/**
 * @type {import('lighthouse').LH.Flags}
 */
const flags = {
	logLevel: 'info',
	output: 'json',
	port: urlChrome.port,
	hostname: urlChrome.hostname
};

const {lhr} = await lighthouse(urlToAudit, flags);

/**
 * Write the report as JSON
 */
let reportDataPath = `./lighthouse.json`;
fs.writeFile(reportDataPath, JSON.stringify(lhr));

/**
 * Write to the console
 */
console.log(`Lighthouse scores: ${Object.values(lhr.categories).map(c => `${c.title} ${c.score}`).join(', ')}`);

• Doc
• Other example

Lighthouse at build

Lighthouse scores for the website can generated automatically at built-time.

The report may be stored at ROOT/reports/lighthouse, where ROOT is the root URL for a version of the site.

Thus, reports for the production version of the site would be available at https://example.com/reports/lighthouse.

Example in package.json:

{
  "scripts": {
    "lighthouse": "lighthouse --output html --output-path ./reports/lighthouse.html --view https://example.com"
  },