🐥

複数ページにLighthouseを実行する「Unlighthouse」のハマりポイントと解決策の紹介

2023/05/28に公開

lighthouse

フロントエンド

パフォーマンス

tech

概要

https://unlighthouse.dev/
unlighthouseは複数ページを一気にlighthouseでscanして、計測結果を記録しているライブラリです。
ただLighthouse感覚でそのまま実行するとSPAが計測されずにSSRのみが計測されるだったりと、知らないとハマるポイントがあるので、紹介します。
なおこの記事ではCLIでの利用を前提としています。

npx unlighthouse --site <your-site>

利用結果についてはGigazineで取り上げられた記事が詳しいので、そちらもご参照ください。

デフォルトの設定値を知る

何も設定しない場合のデフォルトの計測項目です。
この項目は後述する設定値で切り替えることが出来ます。
特に気を付けておく項目を抜粋します。

SSRのみ計測する。SPAは計測しない
モバイル表示に対応。
初期値はiPhone8を基準にしたデバイスサイズ（width: 375、height: 667）
起点になるURLの指定無いので、実行パス起点になる。

計測項目の変更

SPAを計測する

デフォルト設定ではSSRを前提としており、SPAは計測しない点にしましょう。
scanner.skipJavascriptをfalseにすることで、SPAを計測するようになります。

export default {
  scanner: {
    // skipJavascript: true
    skipJavascript: false
  }
}

計測媒体と画面サイズを切り替える

初期値ではモバイル媒体で、
iPhone8を基準にしたデバイスサイズ（width: 375、height: 667）になっています。
想定するデバイスに合わせて、設定値を変えましょう。

デバイスの切り替え

export default {
  scanner: {
    // device: 'desktop',    
    device: 'mobile',
  }
}

画面サイズの切り替え

export default {
  lighthouseOptions: {
    screenEmulation: {
      width: 1800,
      height: 1000,
    }
  }
}

解析するURLの設定

特に設定しない限り、クローリングできる全URLを解析します。
適宜指定しましょう。

クローリングの停止

export default {
  scanner: {
    // disable robots.txt scanning
    robotsTxt: false
  }
}

サイトマップを提供する

export default {
  scanner: {
    sitemap: [
      '/sitemap.xml',
      '/sitemap2.xml'
    ]
  }
}

所感

ざっと全ページ確認して、想定外にコストがかかっているページを発見できるのは便利そうです。
ただ都度実行するにはコストが高いので、いまのところCI向きかなと。