Chrome
Lighthouse

Lighthouseでwebサイトのパフォーマンスを計測する

こんにちは、スープです。
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... ボタンを押すだけです。

Lighthouse_ _ _Tools_for_Web_Developers_ _ _Google_Developers.png

押すとこんな風にメトリクスを出してくれます。
Lighthouse_ _ _Tools_for_Web_Developers_ _ _Google_Developers.png

Node CLI

インストール

$ yarn global add lighthouse

計測

$ lighthouse <url>
$ lighthouse <url> --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