lighthouse v3 を触ってみた

そろそろ lighthouse の version3 が正式リリースされそうなので、alpha 版を触ってみました。

公式のマイグレーションガイドはこちら

v3 から json のフォーマットが色々変わっているので、注意が必要です。

変更メモ

大きな変更点は json のトップレベルにlhrが追加され、auditsなどはlhr配下に入りました。あとは細かいプロパティ名の変更などがあるので公式のマイグレーションガイドを参考にしたほうが良いと思います。

あとスコアが0~100だったのが、0~1に変わりました。

スコア取得スクリプト

以下のようなスクリプトを Express などで実行することで、スコアのみの json を取得できます。

スクリプトサンプル

const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

function launchChromeAndRunLighthouse(url, opts, config = null) {
  return chromeLauncher
    .launch({ chromeFlags: opts.chromeFlags })
    .then(chrome => {
      opts.port = chrome.port;
      return lighthouse(url, opts, config).then(results => {
        delete results.artifacts;
        delete results.report;
        return chrome.kill().then(() => {
          const scoreMap = Object.entries(results.lhr.audits).reduce(
            (acc, [key, a]) => {
              if (a.scoreDisplayMode === 'numeric') {
                return Object.assign({}, acc, { [key]: a.score });
              }
              return acc;
            },
            {}
          );

          const scoreCategories = Object.entries(results.lhr.categories).reduce(
            (acc, [key, a]) => {
              return Object.assign({}, acc, { [a.title]: a.score });
              return acc;
            },
            {}
          );

          return Object.assign(scoreCategories, scoreMap);
        });
      });
    });
}

const opts = {
  port: 0,
  autoSelectChrome: true, // False to manually select which Chrome install.
  chromeFlags: ['--headless', '--disable-gpu', '--no-sandbox']
};

// Usage:
module.exports = url => {
  return launchChromeAndRunLighthouse('https://' + url, opts);
};

結果 JSON

{
  Performance: 0.41,
  "Progressive Web App": 0.45,
  Accessibility: 0.51,
  "Best Practices": 0.69,
  SEO: 1,
  "first-contentful-paint": 1,
  "first-meaningful-paint": 0.93,
  "speed-index": 0.07,
  "estimated-input-latency": 0.19,
  "first-cpu-idle": 0.72,
  interactive: 0.11,
  redirects: 1,
  "mainthread-work-breakdown": 0.34,
  "bootup-time": 0.51,
  "uses-rel-preload": 1,
  "uses-rel-preconnect": 0.65,
  "uses-long-cache-ttl": 0.01,
  "total-byte-weight": 0.77,
  "offscreen-images": 0,
  "render-blocking-resources": 1,
  "unminified-css": 1,
  "unminified-javascript": 0.9,
  "unused-css-rules": 1,
  "uses-webp-images": 0,
  "uses-optimized-images": 0,
  "uses-text-compression": 1,
  "uses-responsive-images": 0.65,
  "efficient-animated-content": 1,
  "dom-size": 0.03
}

参考

lighthouse のスコアを CLI だけで確認する
heroku と Google スプレッドシートを使って、lighthouse の計測を毎日行う方法