Lighthouse でパフォーマンスの最適化案を見出す

Kayce Basques

Lighthouse は、ページのパフォーマンスを測定し、改善方法を見つけるのに役立つツールです。Lighthouse の一般的なワークフローは次のとおりです。

  1. 監査するページを Lighthouse に指定します。
  2. Lighthouse はそのページを読み込み、ページがさまざまなパフォーマンスのマイルストーンに到達するまでにかかった時間を記録します。これらのマイルストーンは指標と呼ばれます。
  3. Lighthouse では、ページのパフォーマンスに関するレポートを生成できます。このレポートには、各指標のスコアと、実装するとページの読み込みが速くなる改善案のリストが表示されます。

指標のスコアを時間の経過とともに改善するか、少なくとも悪化させないようにすることが目標です。ただし、指標を直接操作する方法はありません。代わりに、Lighthouse が提供する改善案に沿って対応します。こうした機会に取り組むことで、指標のスコアが改善される傾向があります。

プロフィール ページから Lighthouse を実行する

web.dev プロフィール ページから Lighthouse を実行します。

  1. 任意の URL を指定すると、Lighthouse が複数の監査を実行し、ページのパフォーマンスに関するレポートを生成します。

  2. 監査レポートを確認して、ページの改善点を確認します。

  3. 監査ごとに、スコアを改善するためのガイダンスとすぐに実行できる手順が示されます。

Chrome DevTools から Lighthouse を実行する

Chrome DevTools は、Google Chrome ブラウザに直接組み込まれているウェブ デベロッパー向けのツールセットです。DevTools を入手するためにダウンロードする必要はありません。Chrome をお持ちであれば、DevTools もご利用いただけます。

  1. Chrome で、監査するページに移動します。
  2. Ctrl+Shift+J（Mac の場合は Command+Option+J）キーを押して、デベロッパー ツールを開きます。

DevTools が開き、画面の右側にドッキングされている。

[監査] タブをクリックします。このタブが表示されない場合は、[+] 記号をクリックして、リストから [監査] を選択します。Lighthouse は、[監査] パネルを動かすエンジンです。そのため、灯台の画像が表示されます。

DevTools が開き、Lighthouse 監査パネルが表示されている。

  1. [モバイル] ラジオボタンが選択されていることを確認します。Lighthouse がページを監査する際、モバイル デバイスのビューポートとユーザー エージェント文字列をシミュレートします。
  2. [パフォーマンス] チェックボックスがオンになっていることを確認します。残りのチェックボックスは、[監査] セクションで有効または無効にできます。有効にすると、ページの他の要素を改善するための多くの最適化案が表示されます。
  3. [高速 3G シミュレーション、CPU 4 倍減速] ラジオボタンが選択されていることを確認します。Lighthouse は、ページの読み込み中にネットワークや CPU を実際にスロットリングしません。代わりに、通常の状態でページの読み込みにかかる時間を調べ、マシンの CPU の 4 分の 1 の性能の CPU を搭載した高速 3G ネットワークでかかる時間を推定します。
  4. [ストレージを消去] チェックボックスがオンになっていることを確認します。このオプションを選択すると、Lighthouse はページ リソースごとにネットワークにアクセスします。これは、初めて訪問したユーザーがページを閲覧する方法です。
  5. [監査を実行] をクリックします。5 ～ 10 秒後に、Lighthouse にレポートが表示されます。

Lighthouse 監査結果レポートを表示した DevTools。

たとえば、高速 3G シミュレーションと CPU 4 倍減速スロットリングを有効にした状態で監査を実行した後、スロットリングを無効にして監査を実行した場合、スロットリングが有効になっている場合の指標スコアは大幅に低くなります。ページの速度が大幅に低下した原因を探すのに多くの時間を費やしても、実際には構成のみが変更されている場合があります。

レポートについて理解する

レポートの右上に、全体的なパフォーマンス スコアが表示されます。100 が満点です。全体的なスコアの下には、指標のスコアが表示されます。Lighthouse v3 スコアリング ガイドでは、各指標のスコアが総合スコアにどのように影響するかについて説明しています。

緑色の合格スコアと黄色の警告スコアが表示されている Lighthouse 指標スコア。

指標にカーソルを合わせると、その指標の詳細が表示されます。[詳細] をクリックして、ドキュメントを参照してください。

指標スコアの下には、ページの読み込み中のスクリーンショットが表示されます。

ページの読み込みの DevTools フィルムストリップ ビュー。

スクリーンショットの下には、ページのパフォーマンスを改善するための最適化案が表示されます。

最適化案をクリックすると詳細を確認できます。

[オフスクリーン画像を遅らせる] というタイトルの監査を開くと、最適化できる画像パスがいくつか表示されます。

次のステップ

Lighthouse を使用して、プロフィール ページまたは Chrome DevTools からページを監査してみてください。いずれかの改善案を実装してから、ページを再度監査して、変更がレポートにどのように影響したかを確認します。指標のスコアが少し改善され、Lighthouse でその改善の余地が問題として報告されなくなるのが理想的です。

Lighthouse を自分で実行することは、問題のスポットチェックに適していますが、最終的には、サイトの健全性を維持するために継続的なモニタリングを設定する必要があります。Lighthouse の進捗状況を経時的に追跡するには、サイトをプロフィールに追加します。