Lighthouse

Browser

About

lighthouse - a tool for auditing an app for PWA features and checking your app meets a respectable bar for web performance under emulated mobile conditions.

Lighthouse can emulate a Nexus 5X with touch events, viewport emulation and a throttled network connection (150ms latency, 1.6Mbps throughput).

Example

It can run against a real mobile device with remote debugging.

Available as

Chrome Extension

a Chrome Extension

The audit tab of devtool

Cli

Cli

Online

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(', ')}`);

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

Metrics

Each score is a weighted average of each component.

Performance

Performance is a weighted average of each performance metrics.

See: https://googlechrome.github.io/lighthouse/scorecalc/

Speed index

The speed index takes the visual progress of the visible page loading and computes an overall score for how quickly the content painted.

It measures how fast the page content is visually displayed during page load.

Lighthouse first captures a video of the page loading in the browser and computes the visual progression between frames. Lighthouse then uses the Speedline Node.js module to generate the Speed Index score.

Speed Index Score

The Speed Index score is a comparison of a page's speed index and the speed indices of real websites, based on data from the HTTP Archive.

This table shows how to interpret your Speed Index score:

Speed Index (in seconds) Color-coding Speed Index score
0–4.3 Green (fast) 75–100
4.4–5.8 Orange (moderate) 50–74
Over 5.8 Red (slow) 0–49

Distribution with 1.5Mbps DSL on Alexa top 100,000 from the HTTP Archive data. Graph can be seen at the WebPagetest Speed Index

Speed Index Distribution





Discover More
Html Heading Sequentiel Order
HTML - Heading Content (Section Header) - Heading Elements (H1 to H6)

Heading define the structure / outline / table of content of the document (page) They are defined via: the heading element (h1/h6) via the aria heading role section of the document letter, the...
Lighthouse Doctype Mandatory
HTML - doctype

The doctype is the first line of a xml document that defines its type. For a html document, it's: EOL character It's mandatory otherwise the browser will turn into quirks mode and some library...
Progressive Web Application (PWA)

A is a regular website that take advantage of modern browser functionality to augment the web experience progressively until you get a native look and feel application. Its name comes from the context...
Firebug Netpanel Explained
Web - Page Load Time (Speed|Performance)

Goal: being interactive in under 5 seconds Duplicate of . Mobile web speeds matter. On average, faster experiences lead to 70% longer...
Devtool Chrome Web Core Vital Overlay
Web Core Vital Metrics

The web core vitals are the three core page load metrics that a web page should focus on. Largest ContentFul Paint First Input Delay Cumulative Layout Shift: All layout shift cumulated You...



Share this page:
Follow us:
Task Runner