LightHouse User Flow Report | How to Run It? Step by Step Guide

LightHouse User Flow Report | How to Run It? Step by Step Guide

Lighthouse has always been one of the best tools to check User Experience and Website performance as well as is useful in checking various SEO factors as well.

lighthouse user flow report

However recently it has been difficult to generate a Lighthouse report for various other aspects such as: 

  • Page loads with a warm cache
  • Pages with an activated Service Worker
  • Accounting for potential user interactions

Most core web vitals metrics are based on or measured on page loads. However, metrics like Cumulative Layout Shift (CLS) is measured for the entire span of a user’s session.

However, the fact that Lighthouse could not measure the above factors meant that it was missing vital information.

Introduction of Lighthouse User Flow

To counteract this, Google has released the new Lighthouse User flow API which allows us to do lab testing at any point during the entire span of a user’s session.

With the help of a puppeteer, we can imitate any user action using puppeteer scripts. During these various interactions, Lighthouse can be invoked at any time to capture multiple key insights in real-time. This means that with the help of the API, we can do performance checks not just during page load, but at any point of user interactions. Accessibility checks can also be done not just in the initial frames but through the entire span of the user session.

Lighthouse can be called at any point while executing almost any puppeteer script to check key metrics and best practices.

Below we will show you a Step by step guide to executing Lighthouse audits on both Warm and Cold navigation.

SetUp

We are going to generate a LightHouse Report using Node.js for both Cold and Warm Navigation

Follow the steps below.

  1. Download Node.js > https://nodejs.org/en/download/ for Windows
  2. Install it.
  3. Download Visual Studio Code and Install.
  4. Create a Folder with the name “Lighthouse Web”.
  5. Open the same folder in Visual Studio, in the Screenshot my Folder name is “Lighthouse 2”
  1. Open a new terminal, and enter the command npm init, > press enter until package.json shows in the left panel.
  2. Click on package.json > enter the following line below the description.

“type”: “module”, 

Change the “main” filename to “index.mjs”

  1. Create a file with the name “index.mjs” under the “Lighthouse Web”  folder.
  2. Go to this URL > https://web.dev/lighthouse-user-flows/
  3. Enter the following lines in the Terminal Window:

npm init -y

npm install lighthouse puppeteer open

npm install chromium

Wait until the installation is complete

Running Lighthouse Audit on Cold Navigation

  1. Click on the index.mjs file and enter the following lines of code.

import fs from ‘fs’;

import open from ‘open’;

import puppeteer from ‘puppeteer’;

import {startFlow} from ‘lighthouse/lighthouse-core/fraggle-rock/api.js’;

async function captureReport() {

 const browser = await puppeteer.launch({headless: false});

 const page = await browser.newPage();

 const flow = await startFlow(page, {name: ‘Single Navigation’});

 await flow.navigate(‘https://web.dev/performance-scoring/’);

 await browser.close();

 const report = await flow.generateReport();

 fs.writeFileSync(‘flow.report.html’, report);

 open(‘flow.report.html’, {wait: false});

}

captureReport();

  1. Change the URL in “await flow.navigate(‘https://web.dev/performance-scoring/‘);” to https://thatware.co/
  1. Run and Debug > select Chrome
  1. Click back on the index.mjs tab and go to the Terminal Window.
  2. Enter the following Line to Run the Code: node index.mjs

This script opens a simple traditional lighthouse report which reports on the important performance metrics and best practices, by deleting the user cache by default.

  1. The following report will be generated > download it.

As is typical with Lighthouse, this page is loaded with any cache or local storage cleared first, but real users visiting a site will have a mixture of visits with cold and warm caches, and there can be a large performance difference between a cold load like this and a user returning to the page with a still-warm cache.

Running Lighthouse Audit on Warm Navigation

In this mode, Lighthouse disables cache clearing which it does by default. In this way, it can imitate a user loading the page with a warm cache. This type of navigation is called Warm Navigation.

  1. Go to the Lighthouse Web folder and delete the .vscode folder
  1. Clear the code in index.mjs file, and enter the following lines of code: 

import fs from ‘fs’;

import open from ‘open’;

import puppeteer from ‘puppeteer’;

import {startFlow} from ‘lighthouse/lighthouse-core/fraggle-rock/api.js’;

async function captureReport() {

    const browser = await puppeteer.launch({headless: false});

    const page = await browser.newPage();

    const testUrl = ‘https://thatware.co/’;

    const flow = await startFlow(page, {name: ‘Cold and warm navigations’});

    await flow.navigate(testUrl, {

      stepName: ‘Cold navigation’

    });

    await flow.navigate(testUrl, {

      stepName: ‘Warm navigation’,

      configContext: {

        settingsOverrides: {disableStorageReset: true},

      },

    });

    await browser.close();

    const report = await flow.generateReport();

    fs.writeFileSync(‘flow.report.html’, report);

    open(‘flow.report.html’, {wait: false});

  }

  captureReport();

  1. Run and Debug > Select Chrome
  2. Run the new code by entering node index.mjs in the Terminal Window.
  3. The following report will be generated:

The combination of cold and warm loads offers a fuller picture of what real users are experiencing. If you have a site where users load many pages in the same visit, this may be able to give you a more realistic look at what they’re experiencing in the field.