Google Lighthouseとは？Google公式ページエクスペリエンス測定ツールの使い方

Webページのパフォーマンスを評価するツールにはさまざまなものがありますが、いま注目されているのが2020年5月にバージョン6.0がリリースされた『Google Lighthouse』。

今回はWebページの読み込み速度やパフォーマンス、SEOを多角的に評価してくれるGoogle Lighthouseをご紹介します。Google Lighthouseのデータを参考に、Webページを改善しましょう。

Google Lighthouseとは

Google Lighthouseは、ページエクスペリエンスを測定してくれるツールです。そのページの目的／目標達成に向けて適切な働きを担保できているかどうかを確認できます。

リリース当初は、「PWA（プログレッシブウェブアプリ）」というWeb上で構築、配信されるアプリケーションの監査を目的としていました。現在は、PWAを含めた以下の5項目をチェックしてくれます。

1. アクセシビリティ
2. パフォーマンス
3. SEO
4. PWA
5. ベストプラクティス

▲Google Chromeの開発者ツールから直接Lighthouseによる監査が可能

Google Lighthouseでは数値上の表示速度だけでなく、実際のユーザー体験に基づいたWebサイトの速さを調べられます。

▲それぞれの指標ごとのスコアを計測

またGoogle Lighthouse 6.0は以下の指標も採用しています。この指標はLighthouse Scoring Calculatorから確認できるので、気になる方はチェックしてみてください。

FCP（First Contentful Paint）：コンテンツの初回ペイント

ユーザーがページに移動してから、最初のDOMコンテンツを画面に表示するまでの時間を測定します。

「画像」「白以外の<canvas>要素」「SVG」が含まれますが、iframe内のものは含まれません。

SI（Speed Index）：速度インデックス

ページの読み込み中に、コンテンツがどれくらいの時間で表示されるかを測定します。

LCP（Largest Contentful Paint）：最大のコンテンツのペイント

画像やテキストブロックなど、主要なコンテンツの読み込みにかかる時間を測定します。

ユーザーにとっての読み込み速度と直結しています。

TTI（Time to Interactive）：インタラクティブになるまでの時間

ページを読み込んでから、ユーザーの入力に反応できるようになるまでの時間を測定します。

「ページの読み込みは早くても、ボタンが反応しない」といったことを避けるための指標です。

TBT（Total Blocking Time）：ブロッキングタイムの合計時間

FCPとTTIのあいだで、ユーザーの入力を阻む可能性がある時間を測定します。

CLS（Cumulative Layout Shift）：視覚的安定性

レイアウトの変化を測定します。ページの読み込みが終わった直後に読み込まれた広告を誤ってクリックしてしまう、といったことを防ぐための指標です。

他にもGoogle Lighthouseのレポートでは、モバイルサイトの速度を改善するための方法もチェックできます。

• スタイルシートやスクリプトの削減
• 画像の適切なサイズ設定
• オフスクリーン画像の修正

などを提案してくれるので、ぜひ表示速度を向上させるのにお役立てください。

▲最適化に役立つLCPの識別

なぜGoogle Lighthouseを使うべきなのか？

2020年5月、Googleは新しいランキング要素である「Web Vitals」を発表しました。コンテンツの網羅性やUXだけでなく、ページの安定性なども含めたページエクスペリエンス（ページ体験）全体を多角的に評価しようという試みです。

GoogleはWeb Vitalsのなかでも、とくにWebサイトの保有者が焦点をあてるべき重要な指標として「Core Web Vitals」を提示しています。

• LCP（Largest Contentful Paint）：読み込み時間
  コンテンツの読み込みにどれくらいの時間がかかるか
• FID（First Input Delay）：インタラクティブ性
  ユーザーが最初にクリック／タップしてからブラウザが応答するまでにどれくらいの時間がかかるか
• CLS（Cumulative Layout Shift）：視覚的安定性
  画面の要素がどれくらい安定しているか（レイアウトのズレを評価）

Google Lighthouseは先述したとおり、このうちLCPとCLSの計測をサポート。その他、Web Vitalsを考慮した多角的な評価をしてくれる点で優れたツールといえます。

Google LighthouseとPageSpeed Insightsの違いは？

Googleが提供するWebページパフォーマンス評価ツールのなかでも人気なのが「PageSpeed Insights」。

その名のとおりページ速度の評価が主軸ですが、Google Lighthouseと同様に、スコアや取り組むべき課題を教えてくれます。

▲PageSpeed Insightsでのスコア

しかし同じWebページを調査したのにも関わらず、Google Lighthouseでのスコアは「80」、PageSpeed Insightsでのスコアは「78」でした。

この違いは、Google LighthouseとPageSpeed Insightsが、それぞれ異なるデータを集計しているため発生しています。

• Google Lighthouse：ラボデータ
• PageSpeed Insights：フィールドデータ

2つのデータの違いは以下のとおりです。

• ラボデータ：
  ラボデータは、事前に指定されたデバイスとネットワーク設定を使用し、制御された環境内で収集されたパフォーマンスデータです。限定的な環境で収集されるデータなため、実際のボトルネックを捕らえていない恐れがありますが、事前にバグへ対処できるというメリットも。ラボデータは、デベロッパーツールやGoogle Lighthouseなどのツールを用いて調べられます。
• フィールドデータ：
  フィールドデータは、ユーザーから匿名で送られたさまざまなパフォーマンスデータです。実際のさまざまな端末やネットワーク条件に基づいているため、ユーザーエクスペリエンスの理解に役立ちます。Search ConsoleやPageSpeed Insightsなどのツールに表示されますが、実際のユーザーのデータであるため、ラボデータよりも閲覧できる指標が限られています。

Google Lighthouseの利用方法

ここからはGoogle Lighthouseを利用するための方法を3つお伝えしていきます。

方法1. Chrome DevToolsのAuditパネルから利用する

Google Lighthouseは、Chrome開発者ツールのAuditsパネルに組み込まれており、ここからテストを実行することでレポートを取得できます。

【実行方法】

• Mac：Cmd + Option + I
• Windows：Ctrl + Shift + I またはF12

このショートカットキーを押すと、以下のような画面が表示されます。

[Generate report] をクリックすると、現在開いているページに対してLighthouseのテストが実行されます。

監査が終了すると、レポート結果が表示されます。

▲パフォーマンス改善、頑張ります……

方法2. Googleの拡張機能から利用する

Google Lighthouse用のChrome拡張機能をインストールすると、ツールバーにボタンが表示されるようになります。

テストを行いたい場合は、監査するページに移動し、ツールバーにあるLighthouseアイコンをクリックしてください。

[Generate report] をクリックすると、現在開いているページに対してLighthouseのテストが実行されます。

監査が終了するとLighthouseで新しいタブが開き、ページのテスト結果のレポートが表示されます。

方法3. Nodeモジュールとして利用する

Google LighthouseをNodeモジュールとして使い、テストをビルドプロセスに組み込むこともできます。Nodeモジュールを使用するとNode環境でのみ動作するようになり、DevToolsのAuditsパネルでは動作しない監査がいくつかあることが分かるはずです。

コマンドラインからGoogle Lighthouseをグローバルインストールするためには、以下を使います。

npm install -g lighthouse

https://example.comのテストを実行したい場合は、以下を使いましょう。

lighthouse https://example.com

監査結果は端末からも確認できますが、別のHTMLファイルでも確認可能です。

▲テスト方法の微調整も可能

速度をあげるためにできること

Webサイトを高速化するためには、以下2点の条件が必要です。

• Webサイトの表示速度が実際に速いこと
• 速く感じさせること

この2つの条件は、厳密には同じではありません。どんなにWebサイトの表示速度が数値上は速くても、ユーザーに「遅い」と感じられてしまったらコンバージョンに悪影響が出ます。たとえば読み込みが遅い広告を間違ってクリックしてしまうようなWebデザインの場合、ユーザーはそのWebサイトに対して「遅い」という印象を抱くでしょう。コンテンツをすぐ画面に表示するだけでなく、できるだけ早くコンテンツがアクティブになるようにすべきです。

速度を改善するためにできることは、たくさんあります。多くの場合、コンテンツを画面に表示するために必要な一連の流れ（クリティカルレンダリングパス）にそのヒントが隠されているはずです。

クリティカルレンダリングパスはCSSやJavaScriptなどのオブジェクトによって形成されています。このコンテンツがブロックされていると、ページの表示が遅くなったり、まったく表示されなくなったりなどの不具合が起こってしまうのです。この点に注意し、障害物をなくしておきましょう。画像の最適化も忘れないようにしてください。

Google Lighthouseを使えばSEOチェックもできる

Google LighthouseにはWebサイトの表示速度を測定する機能だけでなく、SEOチェックの機能もあります。

SEOチェックでは簡単なSEO調査をおこない、Webサイトが潜在的に抱えているSEOの問題を見つけられるほか、修正についても提案。ブラウザ上で動作するので、ステージング環境でもチェックできます。

現在のチェック項目は以下の14点です。

• モバイルフレンドリーか
• 構造化データが適切か
• <meta name=”viewport”>タグがwidthとinitial-scaleと一緒に使われているか
• 文章に<title>が使われているか
• メタタグでdescriptionが使われているか
• HTTPステータスコードを正しく使っているか
• リンクのアンカーテキストが適切か
• 読みやすいフォントサイズに設定されているか
• インデックスをブロックしていないか
• robots.txtが有効か
• 画像にalt属性があるか
• 文章に適切なhreflangが設定されているか
• 文章に適切なrel=”canonical”が設定されているか
• JavaやFlashなどの不要なプラグインがないか

おわりに

Google Lighthouseは完全無欠のツールというわけではありません。しかし、いま使っているツールに加えても損はないはずです。現状に即した詳しいフィードバックをすぐに提供してくれます。

PageSpeed Insights、WebPageTest、GTmetrixなどの速度テストツールと組み合わせて、ぜひ一度使ってみてください。

（執筆：Edwin Toonen　翻訳：Nakajima Asuka　編集：Kitamura Yuu、Kimura Yumi）