Lighthouseでwebサイトのパフォーマンスを計測する
Goodpatch Advent Calendar 2017では、Goodpatchのメンバーが興味を持っている分野や、利用している技術などについて書いていきます。
こんにちは、スープです。
Prottのフロントエンドエンジニアをしています。
この記事ではGoogleが開発しているLighthouseというツールを紹介します。
Lighthouseとは
webサイトのパフォーマンスやアクセシビリティ、WPA等のメトリクス測定ができるツールです。
GithubのREADMEにはこうありました。
Lighthouse analyzes web apps and web pages, collecting modern performance metrics and insights on developer best practices.
Github：https://github.com/GoogleChrome/lighthouse
公式ページ：https://developers.google.com/web/tools/lighthouse
実行方法
Chrome DevTools
Chrome DevToolsのAuditsで Perform an audit... ボタンを押すだけです。
押すとこんな風にメトリクスを出してくれます。
Node CLI
インストール
$ yarn global add lighthouse
計測
$ lighthouse
$ lighthouse --view # 結果をブラウザで見る
Performance測定
メトリクス
First Meaningful Paint
ページの主要なコンテンツがスクリーンに表示されるまでの時間。
ユーザーの感じるローディング体験に直結する。
詳細スペック：https://docs.google.com/document/d/1BR94tJdZLsin5poeet0XoTW60M0SjvOJQttKT-JK8HI/view#heading=h.k50nnyhtptq0
First Interactive
ページが最低限の操作を受け付けるようになるまでの時間。
https://developers.google.com/web/tools/lighthouse/audits/first-interactive
Consistently Interactive
ページが完全に操作を受け付けるようになるまでの時間。
https://developers.google.com/web/tools/lighthouse/audits/consistently-interactive
Perceptual Speed Index
ページ内のコンテンツがどれほどはやくpopulateされるか。
Estimated Input Latency
ユーザーの入力に応答時間の予測。
Opportunities
パフォーマンス改善するために最適化するべきリソースを示してくれます。
所感
簡単にwebサイトの計測ができて改善点も教えてくれるLighthouseは、非常に頼もしい優れものです。
CIでパフォーマンス計測し、mergeの可否判定をするのもいいかなと思います。
参考リンク
Github：https://github.com/GoogleChrome/lighthouse
公式ページ：https://developers.google.com/web/tools/lighthouse
Lighthouse CI：https://github.com/ebidel/lighthouse-ci
Headless Chrome：https://github.com/GoogleChrome/lighthouse/blob/master/docs/headless-chrome.md
Goodpatch Advent Calender 2017はこちら。
2015年の人気記事は、以下をご覧ください！
