そろそろちゃんとパフォーマンスのモニタリングを個人レベルでもやろうと思ったので、手始めにlighthouseを触ってみました。

CLIインストール

CLIで動かしたいので、npmから落としてきます。

$ npm install -g lighthouse
$ lighthouse --version
5.6.0

通常実行する

lighouse https://exmple.comのようにすると、Chromeが起動してlighthouseのチェックが走ります。

$ lighthouse https://google.com
  ChromeLauncher Waiting for browser. +0ms
  ChromeLauncher Waiting for browser... +2ms
  ChromeLauncher Waiting for browser..... +520ms
  ChromeLauncher Waiting for browser.....✓ +3ms
  config:warn IFrameElements gatherer requested, however no audit requires it. +431ms
  config:warn MainDocumentContent gatherer requested, however no audit requires it. +0ms
  status Connecting to browser +288ms
  status Resetting state with about:blank +151ms
  status Benchmarking machine +46ms
  status Initializing… +505ms
  status Resetting state with about:blank +18ms
  status Setting up network for the pass trace +14ms
  status Cleaning browser cache +2ms
  status Beginning devtoolsLog and trace +33ms
  status Loading page & waiting for onload CSSUsage, ViewportDimensions, RuntimeExceptions, ConsoleMessages, AnchorElements, ImageElements, LinkElements, MetaElements, ScriptElements, IFrameElements, MainDocumentContent, AppCacheManifest, Doctype, DOMStats, OptimizedImages, PasswordInputsWithPreventedPaste, ResponseCompression, TagsBlockingFirstPaint, FontSize, EmbeddedContent, RobotsTxt, TapTargets, Accessibility +67ms
  status Gathering in-page: CSSUsage +2s
  status Gathering in-page: ViewportDimensions +1ms
  status Gathering in-page: RuntimeExceptions +0ms
  status Gathering in-page: ConsoleMessages +0ms

ローカルにHTMLファイルが出力されますので、PHPなどでサーバーを起動するとみれます。

--chrome-flags="--headlessでChromeを起動させずに実行する

このままだと、CIやバックグラウンドで動かすには厳しそうです。ということでheadlessモードで起動させます。

$ lighthouse https://google.com --chrome-flags="--headless"
...
  status Auditing: Document avoids plugins +0ms
  status Auditing: Document has a valid `rel=canonical` +1ms
  status Auditing: Structured data is valid +1ms
  status Generating results... +0ms
  Printer html output written to /Users/sandbox/www.google.com_2019-12-14_03-26-10.report.html +114ms
  CLI Protip: Run lighthouse with `--view` to immediately open the HTML report in your browser +1ms
  ChromeLauncher Killing Chrome instance 9861 +0ms

--quietオプションを使うとログ出力もなくなる

実行ログの出力も消したい場合は、---quietもつけます。

$ lighthouse https://google.com --quiet --chrome-flags="--headless" 
$

--outputでJSON出力も可能

--output jsonを指定することで、JSONでデータをとれます。

$ lighthouse https://google.com --quiet --chrome-flags="--headless"  --output json | jq keys
[
  "audits",
  "categories",
  "categoryGroups",
  "configSettings",
  "environment",
  "fetchTime",
  "finalUrl",
  "i18n",
  "lighthouseVersion",
  "requestedUrl",
  "runWarnings",
  "stackPacks",
  "timing",
  "userAgent"
]

ここまでくれば、CIでいろいろできそうな気配がしてきますね。

しかし・・・

ここまでやって気づいたのですが、lighthouse-ciの方にもCLIありました。

• https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/cli.md

こっちの方がCIまわす想定なら良さそうです。