Lighthouse

Lighthouse CLI

Use Lighthouse Web Tool via CLI, you can check the documentation.

Setup

• Install the Lighthouse CLI.

  npm install -g lighthouse

Run it

Normal run

• Use the terminal or bash script.

  lighthouse https://example.com/ --output html --output-path ./lighthouse/report.html

Authenticated run

• You need to add the extra headers.

  lighthouse http://www.example.com --view \
      --extra-headers="{\"Authorization\":\"...\"}"

• How to create a basic header.

  #!/usr/bin/env python3.7
  import urllib3
  import requests
  from base64 import b64encode
  
  username = 'admin'
  password = 'password'
  
  encoded_credentials = b64encode(bytes(f'{username}:{password}',
      encoding='ascii')).decode('ascii')
  auth_header = f'Basic {encoded_credentials}'
  # the auth_header above can now be used in our API request
  # we'll look at that shortly
  
  # let's print the auth_header variable for testing
  print(f'Auth header: {auth_header}')

Performance budgets

Assert thresholds for performance metrics.

• Timing budgets: time-based performance metrics like First Contentful Paint, Maximum First Input Delay, and Speed Index.

• Resource counts: quantity of resources on a page. These thresholds can be defined per resource type or for the page overall.

• Resource sizes: transfer size of resources on a page. These thresholds can be defined per resource type or for the page overall.

• Define budget.json

  [
      {
          "path": "/*",
          "options": {
              "firstPartyHostnames": ["*.my-site.com", "my-site.cdn.com"]
          },
          "timings": [
              {
                  "metric": "interactive",
                  "budget": 5000
              },
              {
                  "metric": "first-meaningful-paint",
                  "budget": 2000
              }
          ],
          "resourceSizes": [
              {
                  "resourceType": "total",
                  "budget": 500
              },
              {
                  "resourceType": "script",
                  "budget": 150
              }
          ],
          "resourceCounts": [
              {
                  "resourceType": "third-party",
                  "budget": 100
              }
          ]
      },
      {
          "options": {
              "firstPartyHostnames": ["*.my-site.com", "my-site.cdn.com"]
          },
          "path": "/checkout",
          "resourceSizes": [
              {
                  "resourceType": "script",
                  "budget": 200
              }
          ]
      }
  ]

• Usage

  lighthouse https://example.com --budget-path=budget.json

Run it on headless Chrome

• You need a Chromium instance

  lighthouse --chrome-flags="--headless" https://angelesbroullon-codenotepad.statichost.eu/
  lighthouse --chrome-flags="--headless" https://angelesbroullon-codenotepad.statichost.eu/ --preset=desktop

• In case you are on development mode on a corporate environment, you may need to disable the certificates

  lighthouse --chrome-flags="--headless --ignore-certificate-errors" https://angelesbroullon-codenotepad.statichost.eu/

Lighthouse CI

Setup

1. Install the Lighthouse CI CLI.

   npm install -g @lhci/cli

2. In the root of your repository, create a lighthouserc.js configuration file.

   module.exports = {
       ci: {
           collect: {
               /* Add configuration here */
               // If your site is static, Lighthouse can serve it itself
               staticDistDir: './public',
               // add the URL if you are running your instance
               url: ['http://localhost:8080'],
               // you may run it several times
               numberOfRuns: 5
           },
           upload: {
               /* Add configuration here */
               // if your site is not static: start your own server
               startServerCommand: 'npm run start',
               // delete it in 7 days
               target: 'filesystem',
           },
           assert: {
               assertions: {
                   // off - ignore assertions
                   'categories:performance': ['warn', {minScore: 1}],
                   'categories:accessibility': ['error', {minScore: 1}]
               }
           },
       },
   };

Run it

• Run Lighthouse CI from terminal.

  lhci autorun

Lighthouse CI Server

Dashboard for exploring historical Lighthouse reporting.

Local version

Set up

Use it as a node project.

1. Install the package

   npm install @lhci/server sqlite3

2. Configure the server app.js

   const {createServer} = require('@lhci/server');
   
   console.log('Starting server...');
   createServer({
   port: process.env.PORT,
   storage: {
       storageMethod: 'sql',
       sqlDialect: 'sqlite',
       sqlDatabasePath: '/path/to/db.sql',
   },
   }).then(({port}) => console.log('LHCI listening on port', port));

3. Run it locally via the CLI.

   npm install -D @lhci/cli @lhci/server sqlite3
   npx lhci server --storage.storageMethod=sql \
       --storage.sqlDialect=sqlite --storage.sqlDatabasePath=./db.sql

Basic Authorization

• Configure properties.

  lhci server --basicAuth.username=myusername --basicAuth.password=mypassword
  lhci autorun --upload.basicAuth.username=myusername \
      --upload.basicAuth.password=mypassword

❗ Note
Be sure to set the same credentials in your upload step to be able to continue sending builds to your server.

Docker

• Docker on local.

  docker volume create lhci-data
  docker container run --publish 9001:9001 --mount='source=lhci-data,target=/data' \
      --detach patrickhulce/lhci-server