Performance with Lighthouse

In

What is Lighthouse?

Meassures web pages performance, by reproducig certain conditions via settings.

  • You can find documentation on its GitHub repo
  • It can be run on Chrome DevTools via an extension
  • You can also run it via CLI

Installation

1
npm install -g lighthouse

Run it

1
lighthouse https://example.com/

Options

  • Logging

    1
    2
    --verbose   #Displays verbose logging
    --quiet     #Displays no progress, debug logs or errors

  • Configuration

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    # Save the trace & devtools log to disk
    --save-assets
    # Prints a list of all available audits and exits
    --list-all-audits
    # Prints a list of all required trace categories and exits
    --list-trace-categories
    # Print the normalized config for the given config and options, then exit
    --print-config
    # Additional categories to capture with the trace (comma-delimited)
    --additional-trace-categories
    # The path to the config JSON
    --config-path
    # Custom flags
    --chrome-flags
    # The port to use for the debugging protocol.
    --port  # Use 0 for a random port 
    # Use a built-in configuration
    --preset # choices: "full", "perf", "mixed-content"
    # The hostname to use for the debugging protocol
    --hostname # default: "localhost"
    # Timeout in milliseconds
    --max-wait-for-load #default: 45000
    # Controls the emulated device form factor if not disabled
    --emulated-form-factor #[choices: "mobile", "desktop", "none"]
    # Enables error reporting, overriding any saved preference
    --enable-error-reporting
    # Opposite of the previous flag
    --no-enable-error-reporting
    # Collect artifacts from a connected browser and save to disk
    --gather-mode, -G
    # Process saved artifacts from disk, prevents -G from quit early
    --audit-mode, -A

  • Output

    1
    2
    3
    4
    5
    6
    7
    --output # Reporter for the results, [choices: "json", "html", "csv"]
    --output-path #The file path to output the results. Use 'stdout' to write to stdout
        # If using JSON output, default is stdout
        # If using HTML or CSV output, default is a file in the working directory
          #  with a name based on the test URL and date
          # Example: --output-path=./lighthouse-results.html
    --view #Open HTML report in your browser

Configuration file example

lr-desktop-config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
'use strict';

/** @type {LH.Config.Json} */
const config = {
    extends: 'lighthouse:default',
    settings: {
        maxWaitForLoad: 35 * 1000,
        emulatedFormFactor: 'desktop',
        throttling: {
            rttMs: 40,
            throughputKbps: 10 * 1024,
            cpuSlowdownMultiplier: 1,
        },
        // Skip the h2 audit so it doesn't lie to us
        skipAudits: ['uses-http2'],
    },
    audits: [
        {
            path: 'metrics/first-contentful-paint',
            options: {scorePODR: 800,
            scoreMedian: 1600}
        },{
            path: 'metrics/first-meaningful-paint',
            options: {
                scorePODR: 800,
                scoreMedian: 1600
            }
        },{
            path: 'metrics/speed-index',
            options: {
                scorePODR: 1100,
                scoreMedian: 2300
            }
        },{
            path: 'metrics/interactive',
            options: {
                scorePODR: 2000,
                scoreMedian: 4500
            }
        },{
            path: 'metrics/first-cpu-idle',
            options: {
                scorePODR: 2000,
                scoreMedian: 4500
            }
        },
    ],
};
module.exports = config;