Skip to content

Instantly share code, notes, and snippets.

@paulirish
Last active February 22, 2023 01:20
Show Gist options
  • Save paulirish/3d813ed5867412ab55517ba77eb5f93a to your computer and use it in GitHub Desktop.
Save paulirish/3d813ed5867412ab55517ba77eb5f93a to your computer and use it in GitHub Desktop.
hacking on lighthouse report

here's how i quickly iterate across 10* diff reports at once

  1. mkdir -p _reports/_scripts/ folder in repo root
  2. also do a mkdir -p _reports/_json/
  3. add the below files into it

now you're setup for automation.

  • run bash _reports/_scripts/update-artifacts.sh rarely.
  • run bash _reports/_scripts/refresh-LHRs-from-artifacts.sh when LHRs change shape

and the real thing:

  • run node _reports/_scripts/generate_report.js all the time
    • i have entr installed and so i use this:
      • ls lighthouse-core/report/**/* | entr node _reports/_scripts/generate_report.js
      • this'll regen the report files everytime a file within report/ is modified.
  • then open up _report/, select all the .html files, and drag them onto your browser icon. that should open all 10 in diff tabs.

* okay really 5 unique ones. just slightly diff styling for the other 5. ;)

'use strict';
/* eslint-disable */
const fs = require('fs');
const path = require('path');
const ReportGenerator = require('../../lighthouse-core/report/report-generator');
const jsonPath = __dirname + '/../_json/';
const filenames = fs.readdirSync(jsonPath).filter(f => f.endsWith('.json'));
console.log(`Writing reports to: ${path.join(__dirname, '/../')}`);
for (const filename of filenames) {
const fileSlug = filename.replace('.json', '');
const results = require(path.join(jsonPath, filename));
const html = ReportGenerator.generateReportHtml(results);
const filePath = path.join(jsonPath, `/../${fileSlug}.html`);
fs.writeFileSync(filePath, html, {encoding: 'utf-8'});
// Create Devtools report that's denser
// TODO: add in extra styles that devtools manually injects
const devtoolshtml = html
.replace(`"lh-root lh-vars"`, `"lh-root lh-vars lh-devtools"`)
.replace(`<title>Lighthouse Report`, `<title>DevTools Lighthouse Report`)
const devtoolsFilePath = path.join(jsonPath, `/../z.devtools.${fileSlug}.html`);
fs.writeFileSync(devtoolsFilePath, devtoolshtml, {encoding: 'utf-8'});
console.log(` - ${fileSlug.padEnd(12)}: ${html.length.toLocaleString().padStart(11)} bytes`);
}
console.log(`Done. ${new Date().toLocaleTimeString()}`);
#!/bin/bash
## updating the jsons
pwd="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
artifactspath="$pwd/../_artifacts"
jsonpath="$pwd/../_json"
rootpath="$pwd/../.."
yarn update:sample-json --quiet && cp -f "$rootpath/lighthouse-core/test/results/sample_v2.json" "$jsonpath/dbwtester.json"
node "$pwd/generate_report.js" && echo "✅ dbwtester.html is refreshed. doing the rest." && echo "";
lighthouse --quiet --output=json -A="$artifactspath/errors" --output-path="$jsonpath/errors.json"
lighthouse --quiet --output=json -A="$artifactspath/solocat" --output-path="$jsonpath/solocat.json" --only-categories="performance"
lighthouse --quiet --output=json -A="$artifactspath/tinyhouse" --output-path="$jsonpath/tinyhouse.json"
lighthouse --quiet --output=json -A="$artifactspath/cnn" --output-path="$jsonpath/cnn.json"
lighthouse --quiet --output=json -A="$artifactspath/caltrain" --output-path="$jsonpath/caltrain.json"
lighthouse --quiet --output=json -A="$artifactspath/cnn" --output-path="$jsonpath/cnnXA.json" --locale=en-XA
lighthouse --quiet --output=json -A="$artifactspath/example" --output-path="$jsonpath/example.json"
lighthouse --quiet --output=json -A="$artifactspath/paulirish" --output-path="$jsonpath/paulirish.json"
lighthouse --quiet --output=json -A="$artifactspath/paulirish" --output-path="$jsonpath/paulirishXA.json" --locale=en-XA
node "$pwd/generate_report.js"
#!/bin/bash
## updating the artifacts
set -x
# yarn update:sample-artifacts # uncomment if you actually need to refresh the dbwtester files
lighthouse -G="./_reports/_artifacts/tinyhouse" https://tinyhousebuild.com
lighthouse -G="./_reports/_artifacts/cnn" http://cnn.com
lighthouse -G="./_reports/_artifacts/example" http://example.com
lighthouse -G="./_reports/_artifacts/paulirish" https://www.paulirish.com/
lighthouse -G="./_reports/_artifacts/caltrain" https://caltrainschedule.io/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment