Lighthouseを自動化すると便利
例えば、以下のようなスクリプトを用意しておくと便利
code:lighthouse-report.mjs
// lighthouse-report.mjs
// Top level await を使うために mjs にしている
// LightHouse のレポートを作成する
// 以下のファイルを作成する
// - out/report.csv - ページ全てのレポートをまとめた CSV
import fs from 'fs/promises';
import lighthouse from 'lighthouse';
import * as chromeLauncher from 'chrome-launcher';
import { stringify } from 'csv-stringify/sync';
// 環境変数とかを参照するとべんりそう
const pages = [
'/',
// ...
];
const reportCsvData = [
[
'URL',
'Performance',
'First Contentful Paint',
'Largest Contentful Paint',
'Cumulative Layout Shift',
'Total Blocking Time',
'Speed Index',
'Accessibility',
'Best Practices',
'SEO',
],
];
const chrome = await chromeLauncher.launch({ chromeFlags: '--headless' }); // 並列実行するとパフォーマンスに影響が出るので、直列に実行する
for (const page of pages) {
const runnerResult = await lighthouse(${baseUrl}${page}, { logLevel: 'info', output: 'json', port: chrome.port });
await fs.writeFile(./out/${page.replace(/\//g, '_')}.json, runnerResult.report);
const reportData = JSON.parse(runnerResult.report);
reportCsvData.push([
page,
reportData.categories.performance.score,
reportData.categories.accessibility.score,
reportData.categories.seo.score,
]);
}
await fs.writeFile('./out/report.csv', stringify(reportCsvData));
await chrome.kill();
メリット
何回でも同じ手順で実行できる
改善の前後で結果がわかりやすい
ブラウザ拡張機能などの影響が出ない
CSV で出力するのでページごとの差がわかりやすい
一気にまわしてスコアが悪そうなところをくわしく見るみたいなワークフローができる
デメリット
認証がいるページはややこしい
ヘッダーつけるとかしたらできるらしい
CI で実行できるものもある