はじめに
みなさんLighthouseつかっていますか？Lighthouseなるものが盛り上がってきているようなので、調査してみました。
一問一答
よくある疑問を一問一答形式で回答します。
Lighthouseって？
Google製のウェブアプリの監査（評価）ツールです。
Lighthouseは何につかうの？
SEOやユーザー体験をスコア化してくれます。SEO対策はもちろん、ユーザー体験の改善にも利用することができます。
PSIとの違いは？
監査ツールとしては、PageSpeedInsights（PSI）が有名かと思います。
ざっくりいうと、より詳細なスコア化してくれるのがLighthouseです。
両者の違いは下記の通りです。
- PSIは、主に「表示速度」の最適化に主眼をおいている
- Lighthouseは、「表示速度」以外の要素（ウェブアプリとしての品質・SEO・以外の要素を
LighthouseとPSIはどのように使っていくのが良い？
両者は微妙に異なるデータを取得しているので、併用すれば良いとGoogleさんが言っています。
速度の観点では、PSIとLighthouseは違いは以下。
- Lighthouse: クライアント(=例: jenkinsサーバ)がアクセスした実績ベース
- PSI: 世界中のChromeユーザがアクセスした実績ベース
Chrome ユーザー エクスペリエンス レポートとはどのように違うのですか？
https://developers.google.com/speed/docs/insights/faq?hl=ja
対象読者
- SEO担当者
- Lighthouseに興味があるひと
- PageSpeedの改善をしたいひと
要件
下記のversion時点での調査結果です。
Lighthouse version 2.9.3
Lighthouseを使ってみる
chromeや、chrome拡張、API（node.jsのライブラリが提供されている）などを使ってスコアを確認することができます。
お手軽にやる場合は、chromeやchrome拡張を使うと良いと思います。
また、定期的に自分のサイトや競合サイトを監視したいのであれば、プログラムを作成するのが良いでしょう。
指標
非常に多くの指標があるので、全部理解したり、全部の項目で100点を目指すのは難しいと思います。
自分（自分たち）のサイトをどのように育てていくか考えつつ、重要指標を期目、改善していくのが良いと思います。
なお、このドキュメントでは、LighthouseのGUIで取得できたメトリクスの説明をおこなっています。
これ以上にもたくさんメトリクスがあるので興味がある方は、公式ドキュメントを読んでみて下さい。
Lighthouseの公式ドキュメント
https://developers.google.com/web/tools/lighthouse/
Performance
Webアプリに関わる現在のパフォーマンスです。
メトリクス（指標）とOpportunities（改善機会 = 改善方法の提案）があります。
First meaningful paint
ユーザーにとって意味のあるページが表示されるまでの時間（所謂、first-view）です。
この指標が低いと、いつまでたっても画面が表示されない、ということになります。
クリティカルレンダリングパス（Webブラウザによるページの表示方法）の最適化（高速化）をすることで指標が改善するようです。
First Interactive
ウェブページにおいて、UI要素（インプット等）が最低限操作可能になるまでの時間です。
- クリティカルレンダリングパスの最適化（Webページの表示の最適化）
- コンテンツ・リソースの最適化（画像をはじめとしたファイル圧縮、CSSやjsのminify） によって、指標が改善します。
Consistently Interactive
ウェブページを全て（完全に）操作できるまでの時間のことです。
First Interactiveと同じ手法 + 使っていないJavaScriptのアイドル（空き）時間を調整することで、指標が改善されます。
- クリティカルレンダリングパスの最適化
- コンテンツ・リソースの最適化
- JavaScriptの実行の最適化
Perceptual Speed Index
コンテンツが表示されるまでのスコアです。
First meaningful paintは、表示までの時間、Perceptual Speed Indexは、コンテンツ表示までのスピードをスコア化したものという違いがあります。
コンテンツの表示速度をスコア化することで、UXの評価になりうる指標を目指しているようです。
基本的には、コンテンツが表示されるまで〜といっているので、「クリティカルレンダリングパス最適化」「コンテンツ最適化」によって指標を改善します。
githubでソースコードが公開されているので興味がある方は覗いてみて下さい。
https://github.com/paulirish/speedline
Estimated Input Latency
ユーザーの応答（入力）に対するレイテンシの値（時間）です。
ドキュメントによれば、この指標で報告している遅延時間（またはそれ以下の遅延時間）が発生する確率は90%、残り10%では、さらに長時間の遅延が発生する可能性があるとのことです。
Lighthouse による監査方法と監査スコアの算出方法を説明します。
RAIL パフォーマンスモデルでは、レイテンシ（レスポンス）を100ms以内と推奨していますが、Ligjthouse の目標スコアは 50ms とのことです。
です。 なぜでしょうか。
RAILパフォーマンスモデルは、
- Response（ユーザー入力に対して、100 ミリ秒以内に認識する）
- Animation（アニメーションやスクロールは、10ミリ秒以内にフレームを作成する）
- Idle（メインスレッドのアイドル時間を利用する）
- Load（インタラクティブコンテンツを1000ミリ秒以内に提供する） の頭文字をとったもので、ユーザーのことを第一に考えたときに、どれくらいのパフォーマンスか、を表現するモデルです。
RAIL モデルでパフォーマンスを計測する
https://developers.google.com/web/fundamentals/performance/rail?hl=ja
Progressive Web App
Progressive Web App（PWA）の仕様にのっとったサイトかどうかという観点でサイトを評価します。
PWAの指標にマッチしないものをfailedと言うかたちでレコメンドしてくれます。
Address Bar Matches Brand Colors
アドレスバーにブランドカラーが設定されているかどうか
Cache Contains start_url From Manifest
manifest.jsonにstart_urlが定義されているか
Configured For A Custom Splash Screen
PWSのスプラッシュ画像（アイコン画像）が設定されているかどうか
Contains Some Content When Its Scripts Are Not Available
ページでスクリプトが利用できない場合に表示するコンテンツを用意してあるかどうか。
以下割愛…
まだまだたくさんあるのですが、これはドキュメントを読んで都度実施していけば良いと思います。
Accessibility
Webアプリケーションのアクセシビリティ（使いやすさ）の評価です。
こちらも、PWAと同じく、指標にマッチしていないもの・しているものをレコメンドしてくれます。
Best Practicers
https化/キャッシュ利用等、モダンなベストプラクティスに沿っているかどうかを評価します。
PWAと同じく、指標にマッチしていないもの・しているものをレコメンドしてくれます。
SEO
ウェブページがSEOに準拠してマークアップしてくれるかを評価してくれます。
こちらも、PWAと同じく、指標にマッチしていないもの・しているものをレコメンドしてくれます。
改善方法
例えば、PerformanceのOpportunitiesとしは下記のようなものがあります。
次世代画像圧縮を使う
JPEG2000・JPEGXR・WebPなどの次世代圧縮をしたらいいんじゃない？と提案してくれます。
遅延ロードを使う
Lazy Load（遅延ロード）つかったらと提案してくれます。が、遅延ロードの場合、Googlebotに適切にindexしてもらえない可能性があるので対応は慎重にしないといけなさそうです。
使っていないCSSのルールを読み込まない
今のところCSSのminifyで、スコアはよかったのですが、こういう方法もありますね。
明確にわかるのなら良いですが、分割してページが壊れないか心配にもなります。
jsやCSSをminifyする
まぁしてなければしましょうか。
- Opportunitei
まとめ
LighthouseはPSIと異なり、かなり指標が多く、全方位でウォッチし、日々改善していくのは少し現実的ではないかなーと思いました。
自身のサイトの特徴と照らしあわせて、改善項目を決めていくのが現実的かなと。
例えば、メディア系のサイトなら「Performance」や「SEO」が重要になってくるのではないでしょうか。
また、Best Practices等は、サイトの特徴にかかわらず対応しておいたほうが良いものが多いので、一度みておくのが良いと思います。
改善方法に関しては、「ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール」などで昔から言われていることから、PWAなど昨今の時流にのったものまで、いろいろありました。