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年の人気記事は、以下をご覧ください!

Goodpatch Advent Calendar 2015人気記事の紹介

ABOUTこの記事をかいた人

souppower

Prottのフロントエンドエンジニア。

  • Goodpatch Blog