Lighthouseでファイルの転送量がどれくらいオーバーしているかを調べる

本記事について

Chromeで使えるLighthouseの機能が先日のGoogle I/Oでアップデートされていました。
Performance Budgetという、HTML/CSS/Javascipt/imageなどのファイル転送容量の予算を決めて、それをモニタリングできる仕組みが誕生していたので、その動かし方と、計測の方法などを簡単に説明します。

コマンドを少し理解している方であれば、対応可能です。
コードは自分で書かなくてもできます。カスタマイズしたい方は、ご自身でググってみてください。

目次

・Lighthouseとは
・コマンドラインでLighthouseを動かす
・Performance Budgetの設定
・いざ、計測結果を確認！

Lighthouseとは

Chromeで使える、Webページの計測ツールです。
Chrome Dev Toolからもアクセスできます。使い方はこちら
色々な視点でWebページの解析をしてくれて、改善点も提案してくれます。便利。

コマンドラインでLighthouseを動かす

$ npm install -g lighthouse

でインストール

$ lighthouse https://hogehoge.com #計測したいurlをコピペ

これだけです。

計測コマンドを走らせると

May we anonymously report runtime exceptions to improve the tool over time?  (y/N)

と聞かれますが、どっちでもいいと思います。エラー発生時にその情報を匿名化してGoogleに送信するかどうか聞いているだけなので、適当にどちらかを選択します。

これで計測がスタートし、全て終わるとterminalの一番下の方に

Printer html output written to /Users/user-name/siteurl_2019-05-31_11-02-16.report.html

表示されているので、ブラウザでそれを開きます。
勝手に自分のホームディレクトリに出力されている感じですね。

見た目はこんな感じのHTMLが出てきます。

ここまではChrome Dev Toolでもできるのでいいのですが、ここからPerformance Budgetを設定して、モニタリングできるようにしていきます。

Performance Budgetの設定

いよいよ、Performance Budgetを設定します。json形式のファイルを利用します。

そもそもどのくらいのファイル転送量を基準にすればいいかわからないよ！JSONってなんか難しそう。。という方もいらっしゃると思いますが、心配する必要はありません、Performance Budget Calculatorというツールがあります。これで簡単にJSONファイルを作ってくれます。
JSONファイルを作ったら、大人しくそのファイルをホームディレクトリに保存しましょう。
/Users/user-name/budget.json
のような感じで配置するということです。

デフォルトのJSONファイルは下記のような形になります。

[
  { "resourceSizes":[
    { "resourceType": "document", "budget": 20 },
    { "resourceType": "stylesheet", "budget": 50 },
    { "resourceType": "font", "budget": 50 },
    { "resourceType": "image", "budget": 300 },
    { "resourceType": "script", "budget": 100 }
    ]
  }
]

これで準備が整いました。

いざ、計測結果を確認！

$ lighthouse https://youtube.com --budget-path=budget.json

このコマンドを叩きます。先ほどと同じようにHTMLファイルが生成されるので、確認してみます。

Performanceのスコア表示されている下を見ると、下記のようなエリアが新しく表示されていますね。

scriptの量が多くて、思いっきり設定した予算をオーバーしていました。。笑

どのくらいの転送量を予算として設定するかという点は、今回はとりあえずデフォルトの数値（遅くもなく、早くもないというサイトのレベル）で設定しましたので、改善ポイントはありそうだということがわかりました。

以上、JSON形式のファイルを作ってコマンドを叩くと、サクッとパフォーマンス管理ができる事例でした。

参考：Performance Budgets