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

Kayce Basques

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

  1. 監査するページを Lighthouse に指示します。
  2. Lighthouse がそのページを読み込み、ページがさまざまなパフォーマンス マイルストーンを達成するまでにかかった時間を記録します。これらのマイルストーンは指標と呼ばれます。metrics
  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 を開きます。

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

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

DevTools で Lighthouse の監査パネルが開き、

  1. [モバイル] ラジオボタンがオンになっていることを確認します。Lighthouse でページが監査されると、モバイル デバイスのビューポートとユーザー エージェント文字列がシミュレートされます。
  2. [パフォーマンス] チェックボックスがオンになっていることを確認します。[監査] セクションの他のチェックボックスは、有効または無効にできます。有効にすると、ページの他の部分を改善する方法がいくつか提案されます。
  3. [Simulated Fast 3G, 4x CPU Slowdown] ラジオボタンがオンになっていることを確認します。Lighthouse では、ページの読み込み中にネットワークや CPU のスロットリングは行われません。代わりに、通常の条件下でページの読み込みに要した時間を確認し、お使いのマシンの 4 分の 1 の CPU を使用する高速 3G ネットワークであれば、読み込み時間を推定します。
  4. [ストレージを消去] チェックボックスがオンになっていることを確認します。このオプションを選択すると、Lighthouse はページリソースごとにネットワークにアクセスする必要があります。つまり、初めてそのページにアクセスしたユーザーは、この方法でページリソースにアクセスします。
  5. [Run Audits] をクリックします。5 ～ 10 秒後に、Lighthouse にレポートが表示されます。

Lighthouse の監査結果レポートが表示されている DevTools。

たとえば、Simulated Fast 3G と 4x CPU Slowdown スロットリングを有効にして監査を実行し、次にスロットリングを無効にして監査を実行すると、スロットリングが有効になっていると指標スコアが大幅に低下します。実際には構成だけが変わっただけなのに、ページの動作がかなり遅くなった原因を突き止めるために多くの時間を費やすかもしれません。

レポートの見方

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

Lighthouse の指標スコア。緑色は合格点、黄色は警告スコア。

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

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

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

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

最適化案をクリックすると、その詳細が表示されます。

「画面外画像の遅延」というタイトルの展開された監査に、最適化可能なイメージパスの数が表示されています。

次のステップ

プロフィール ページまたは Chrome DevTools から、Lighthouse を使用してページを監査してみてください。いずれかの最適化案を実装してからページを再度監査し、変更によるレポートへの影響を確認します。指標のスコアが少し改善されるのが理想的です。Lighthouse では、この最適化案が対処すべきものとして通知されなくなります。

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