run-lighthouse.sh

#!/usr/bin/env sh

# This script:
# 1. Creates a new directory to store the reports we're going to generate.
# 2. Generate a lighthouse report for desktop emulation.
# 3. Generate a lighthouse report for mobile emulation, with basic 3G throttling settings taken from here: https://github.com/GoogleChrome/lighthouse/commit/a9b02a948b579be1a0667b69627f6d1f831d30ca

run() {
    NOW=$(date +%Y-%m-%dT%H%M%S%z)
    OUTPUT_FORMAT="html"
    
    LABEL=$1
    URL=$2
    OUTPUT_DIR="$LABEL-$NOW-lighthouse"
    

    mkdir $OUTPUT_DIR && \
        # Runs lighthouse emulating desktop, no throttling
        lighthouse $URL \
        --chrome-flags="--headless" \
        --emulated-form-factor desktop \
        --output $OUTPUT_FORMAT \
        --output-path $OUTPUT_DIR/desktop.$OUTPUT_FORMAT && \
        # Runs lighthouse emulating mobile 3G
        lighthouse $URL \
        --chrome-flags="--headless" \
        --emulated-form-factor mobile \
        --throttling-method devtools \
        --throttling.cpuSlowdownMultiplier 4 \
        --throttling.requestLatencyMs 150 \
        --throttling.downloadThroughputKbps 1600 \
        --throttling.uploadThroughputKbps 750 \
        --output $OUTPUT_FORMAT \
        --output-path $OUTPUT_DIR/mobile.$OUTPUT_FORMAT
}

# You can write a for-loop to call run() on a list of tags/urls
# Or just do this:
# run "tag" "<url>"
# run "tag2" "<url2>"
# run "tag3" "<url3>"

set-up-remote-lighthouse.md

Remote Lighthouse

What is lighthouse

https://developers.google.com/web/tools/lighthouse/

Why remote lighthouse?

Sometimes, you'll have a lot of stuff running on your laptop. This is not ideal when running a benchmark like lighthouse which measures how fast your instance of the Chrome browser is rendering resources at a given URL.

To keep your benchmarking environment consistent, run your lighthouse tests in a remote environment light a Digital Ocean droplet.

But remote environments come with remote environment problems. For instance, you won't have a GUI to render your page to.

This guide covers how to get lighthouse up and running in a remote environment that you can control through the terminal, so you can run your lighthouse audits in a consistent and relatively cruft-free environment for reliable lighthouse reports.

Use doctl tool

See https://gist.github.com/zeddee/860a6e484da72003738c992a3553b554

Set up non-root user

useradd userland
usermod -aG sudo userland
su -u userland
mkdir ~/.ssh
echo $SSHPUBKEY >> ~/.ssh/authorized_keys

Set the time

For Ubuntu:

sudo timedatectl set-timezone Asia/Singapore

To get a list of timezones:

timedatectl list-timezones

Install NodeJS

wget https://nodejs.org/dist/v10.16.3/node-v10.16.3-linux-x64.tar.xz
tar -xvf node-v10.16.3-linux-x64.tar.xz
mv node-v10.16.3-linux-x64 ~/nodejs
export PATH=$PATH:$HOME/nodejs/bin

Install google chrome and required libraries

• Download chrome stable from https://www.google.com/chrome/
• Manually scp the binary to your target machine. Google doesn't appear to provide a static url for this.

Install Google Chrome by running:

dpkg -i google-chrome-stable_current_amd64.deb
# dpkg will fail because your system is unlikely to have the required dependencies.
# install the dependencies by running immediately after your dpkg command:
apt-get -fy install # this installed the dependencies required by the last failed dpkg command

Running Lighthouse

• You must run the lighthouse CLI with the --chrome-flags="--headless" option.

Sample: See run-lighthouse.sh

Sharing and Viewing Lighthouse JSON

https://developers.google.com/web/tools/lighthouse/#json

Lighthouse notes

lighthouse command runs a mobile audit by default

Running lighthouse https://thetravelintern.com --chrome-flags="--headless" --output json --output-path this.json gives us a JSON file with a configSettings field like the one below.

"configSettings": {
    "output": [
      "json"
    ],
    "maxWaitForFcp": 15000,
    "maxWaitForLoad": 45000,
    "throttlingMethod": "simulate",
    "throttling": {
      "rttMs": 150,
      "throughputKbps": 1638.4,
      "requestLatencyMs": 562.5,
      "downloadThroughputKbps": 1474.5600000000002,
      "uploadThroughputKbps": 675,
      "cpuSlowdownMultiplier": 4
    },
    "auditMode": false,
    "gatherMode": false,
    "disableStorageReset": false,
    "emulatedFormFactor": "mobile",
    "channel": "cli",
    "budgets": null,
    "locale": "en-US",
    "blockedUrlPatterns": null,
    "additionalTraceCategories": null,
    "extraHeaders": null,
    "precomputedLanternData": null,
    "onlyAudits": null,
    "onlyCategories": null,
    "skipAudits": null
  },
  //[...]

More info on device emulation with throttling: Standard Throttling Profiles Proposal (Public)

more details:

• #9637 [DOC] Needs doc on observed and simulated metrics: GoogleChrome/lighthouse#9637
• Lighthouse throttling docs: https://github.com/GoogleChrome/lighthouse/blob/master/docs/throttling.md
• https://github.com/GoogleChrome/lighthouse/blob/master/docs/readme.md#testing-on-a-mobile-device

Config with JSON

Docs tell us to refer to https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/config/lr-desktop-config.js

But importing the whole JS document doesn't work. Haven't tried, but this should work instead:

{
    "maxWaitForFcp": 15 * 1000,
    "maxWaitForLoad": 35 * 1000,
    "emulatedFormFactor": "desktop",
    "throttling": {
      "rttMs": 40,
      "throughputKbps": 10 * 1024,
      "cpuSlowdownMultiplier": 1,
    },
    "skipAudits": ['uses-http2'],
}