Lighthouse を使用したウェブに関する指標の最適化

Chrome のウェブツールでユーザー エクスペリエンスを改善する機会を見つける。

Addy Osmani
Addy Osmani
X GitHub

本日は、Lighthouse、PageSpeed、DevTools の新機能を紹介します。 Web Vitals でサイトを改善する方法について説明しています。

ツールを再確認すると、Lighthouse は ウェブページの品質向上に役立つオープンソースの自動化ツールです。Chrome DevTools スイートを使用してデバッグし、 一般公開のウェブページや認証が必要なウェブページと照合できます。Lighthouse は PageSpeed 分析情報、 CI と WebPageTest。

Lighthouse 7.x には、要素のスクリーンショットなどの新機能が含まれており、要素の目視確認が簡単に ユーザー エクスペリエンス指標に影響を与える UI の要素（レイアウトに寄与しているノードなど） あります。

また、PageSpeed Insights では要素のスクリーンショットもサポートし、 1 回限りのページパフォーマンスの問題を 簡単に特定できます

ページのレイアウト シフトに関与している DOM ノードがハイライト表示された要素のスクリーンショット

Core Web Vitals の測定

Lighthouse では、 合成的に測定する Core Web Vitals の指標（Largest Contentful Paint、Cumulative など） Layout Shift と Total Blocking Time（First Input Delay のラボ用プロキシ）。 これらの指標には、読み込み、レイアウトの安定性、操作の準備状況が反映されます。その他の指標 First Contentful Paint を Core Web Vitals も用意されています。

「指標」セクションには、これらの指標のラボ バージョンが含まれています。次を使用: これは、ユーザー エクスペリエンスのどの側面に注意を払う必要があるかを示す概要ビューです。

<ph type="x-smartling-placeholder">
</ph> Lighthouse のパフォーマンス指標
で確認できます。 <ph type="x-smartling-placeholder">
</ph> DevTools のパフォーマンス パネルの [Web Vitals] レーン
DevTools の [Performance] パネルの新しい [Web Vitals] オプションには、 上に示したレイアウト シフト（LS）などの指標の瞬間を強調するトラック。

フィールド指標: Chrome UX に表示される指標など 報告または RUM、これがない ラボデータは実際のユーザー エクスペリエンスを反映しているため、ラボデータは貴重な補完となります あります。フィールド データからは、ラボで得られる診断情報を提供できないため、 共有します

Web Vitals の改善点を特定する

Largest Contentful Paint 要素を特定する

LCP は、読み込み時に感じられることを測定したものです。ページの読み込み中に プライマリまたは「最大」のコンテンツが読み込まれ、ユーザーに表示されます。

Lighthouse には「Largest Contentful Paint 要素」がある改ざんされた要素を特定する監査を Large Contentful Paint を使用します。要素にカーソルを合わせると、その要素がメインのブラウザ ウィンドウでハイライト表示されます。

Largest Contentful Paint 要素

この要素が画像の場合、この情報は読み込みを最適化するための有用なヒントになります。 この画像のLighthouse では、画像の最適化に関するさまざまな監査が提供されています。 圧縮、サイズ変更、またはより適した最新の画像での配信が可能かどうか 使用できます。

適切なサイズの画像に関する監査

LCP は、 ブックマークレット（Annie） Sullivan は、赤色の長方形で表示される LCP 要素をワンクリックですばやく識別するのに便利です。

ブックマークレットを使用して LCP 要素をハイライト表示する

遅れて検出されたイメージをプリロードして LCP を改善

Largest Contentful Paint を改善するには、クリティカル ヒーローをプリロードしてください ブラウザによる検出が遅れている場合に、画像に表示できます。検出の遅れは、 画像を検出可能にするには、JavaScript バンドルを読み込む必要があります。

<ph type="x-smartling-placeholder">
</ph> 最大の Contentful Paint イメージをプリロードする

LCP イメージのプリロードについてよく寄せられる質問のうち、その価値があると思われるものもいくつかあります。 簡単に説明します

レスポンシブ画像をプリロードできますか？[はい] をタップします。 例として、以下の srcset と sizes を使用して指定された、レスポンシブなヒーロー画像があるとします。

<img src="lighthouse.jpg"
          srcset="lighthouse_400px.jpg 400w,
                  lighthouse_800px.jpg 800w,
                  lighthouse_1600px.jpg 1600w" sizes="50vw" alt="A helpful
Lighthouse">

link 属性に imagesrcset 属性と imagesizes 属性を追加したことで、次のことを行えるようになりました。 srcset と sizes で使用されるものと同じ画像選択ロジックを使用して、レスポンシブ画像をプリロードします。

<link rel="preload" as="image" href="lighthouse.jpg"
           imagesrcset="lighthouse_400px.jpg 400w,
                        lighthouse_800px.jpg 800w,
                        lighthouse_1600px.jpg 1600w"
imagesizes="50vw">

LCP イメージが CSS を介して定義されている場合、監査ではプリロードの機会もハイライト表示されますか？ 背景は？はい。

CSS の背景または <img> を介して LCP 画像としてフラグが付けられた画像は、次の場合に候補となります。 検出できるようになります。

画面外画像を遅延読み込みし、LCP でこれを回避する

最初のユーザー エクスペリエンスに重要でないオフスクリーン画像は、遅延読み込みが可能です。これは、ユーザーがその近くでスクロールするまで画像のダウンロードを延期する手法です。これにより、重要なアセットのネットワーク競合が減少し、場合によっては LCP が向上する可能性があります。この場合は、[オフスクリーン画像を先送りする] 監査が役立ちます。

画面外の画像の読み込みを遅らせる

スクロールせずに見える範囲にある重要な画像（Largest Contentful Paint 画像など）は、遅延読み込みしないでください。LCP 画像の読み込みが遅れる可能性があります。「Largest Contentful Paint イメージが遅延読み込みされました」により、LCP 画像が誤って遅延読み込みされている場合は、Lighthouse でハイライト表示されます。監査：

LCP 画像の遅延読み込みを回避する

CLS の貢献度を特定する

Cumulative Layout Shift は視覚的な安定性の指標です。ユーザーが閲覧するページが コンテンツの視覚的な移動に使用できます。Lighthouse には、CLS のデバッグ用の監査として「 「レイアウト シフト」のようなものです。

この監査では、ページの変化に最も大きく寄与している DOM 要素に焦点を当てます。要素内 左の列には DOM 要素のリストが表示され、右の列には CLS 全体の 貢献できます。

Lighthouse の大規模なレイアウト シフトの回避の監査により、CLS の要因となっている DOM ノードがハイライト表示される

新しい Lighthouse 要素のスクリーンショット機能のおかげで、 監査で指摘された主な要素と、見やすいクリックによるズームも追加しました。

要素のスクリーンショットをクリックすると、展開されます

読み込み後の CLS では、長方形で永続的に可視化することに価値がある CLS に最も貢献した元素を特定できますこの機能は SpeedCurve の Core Web Vitals ダッシュボード Defaced の Layout Shift GIF を使用していて、 生成ツール:

Layout Shift Generator は

レイアウト シフトの問題をサイト全体で把握できるように、Search Console のコア Web Vitals レポートこれにより、 CLS が高いサイトのページの種類（この例では、 時間をかける必要のある部分）:

<ph type="x-smartling-placeholder">
</ph> CLS の問題が表示されている Search Console

ディメンションのない画像から CLS を識別する

画像によって発生する Cumulative Layout Shift を制限する 画像要素と動画要素に幅と高さのサイズ属性を含めます。 この方法により、ブラウザはドキュメント内の適切な量のスペースを割り当てることができます。 表示されます。

明示的な幅と高さのない画像要素の監査

画像の高さと幅の設定は重要 繰り返しになりますが 画像のサイズとアスペクト比を考えることの重要性について、適切にまとめています。

広告からの CLS の識別

Lighthouse のパブリッシャー広告では、次のことができます。 ページ上の広告の読み込みエクスペリエンスを改善する機会（投稿など）を確認できます レイアウト シフトや長時間のタスクなど、ユーザーがページを使用できるようになるまでの時間が長くなる可能性があります。イン Lighthouse では、コミュニティ プラグインで有効にできます。

広告関連の監査で、リクエストまでの時間短縮とレイアウト シフトの改善が見込める

広告はニュースメディアの レイアウト シフトに最大寄与している できます。次の点に注意してください。

  • ビューポートの上部に固定されていない広告を配置する場合は注意する
  • 広告スロットで可能な限り大きなサイズを予約することでシフトを排除する

非合成アニメーションを避ける

ローエンドのデバイスでは、合成されていないアニメーションが重い場合、ジャンクが発生することがあります。 JavaScript タスクがメインスレッドをビジー状態にしている。このようなアニメーションは、レイアウト シフトを引き起こす可能性があります。

アニメーションを合成できなかったことを Chrome が検出すると、DevTools トレースに報告されます。 Lighthouse では読み取りが行われ、アニメーション付きの要素のうち、合成されなかったもののリストを取得できます。 わかります。詳しくは、「合成されていない動画を避ける」セクション アニメーション監査。

合成されていないアニメーションを回避するための監査

First Input Delay / Total Blocking Time / Long Tasks のデバッグ

「First Input」は、ユーザーが最初にページを操作してからの経過時間（例: リンク、ボタンをタップする、カスタムの JavaScript 制御を使用するなど）を、ブラウザが その操作に対するイベント ハンドラの処理を開始できます。長い JavaScript タスクは、この指標と、この指標のプロキシ（Total Blocking Time）に影響を与える可能性があります。

長いメインスレッド タスクを回避するための監査

Lighthouse の長いメインスレッド タスクを避けるの監査には、 実行時間が最も長いタスクです。これは、攻撃に対して最も悪質な できます。左側の列には、長いメインスレッドの原因となっているスクリプトの URL が表示されています。 できます。

右側には、これらのタスクの所要時間が示されています。なお、長時間のタスクとは、 実行時間が 50 ミリ秒を超えることはありません。これは、メインスレッドを フレームレートや入力レイテンシに影響します

サードパーティ サービスをモニタリングに利用することを検討している場合は、メインスレッドの実行も タイムライン 費用の可視化に役立っている親タスクと子タスクの両方が インタラクティビティに影響を与える タスクを自動化できます

メインスレッドの実行タイムラインのビジュアル Calibre には、

ネットワーク リクエストをブロックして、Lighthouse 内の変更前と変更後の影響を確認可能に

Chrome DevTools でネットワークのブロック リクエスト 個々のリソースが削除または利用できなくなった場合の影響を確認できます。この情報は を使用して、個々のスクリプト（第三者の埋め込みやトラッカーなど）にかかる費用を把握する （Time to Interactive）などの指標を収集します。

ネットワーク リクエストのブロックは Lighthouse でも機能します。では、Chronicle の サイトの Lighthouse レポート。パフォーマンス スコアは 63/100、TBT は 400 ミリ秒。コードを詳しく見ていくと このサイトでは Chrome で不要な Intersection Observer のポリフィルが読み込まれていることが判明しました。では、 ブロックします。

ネットワーク リクエストのブロック

DevTools の [Network] パネルでスクリプトを右クリックし、[Block Request URL] をクリックしてブロックします。 できます。Intersection Observer のポリフィルについては、以下を行います。

DevTools でリクエスト URL をブロックする

次に、Lighthouse を再実行します。今回はパフォーマンス スコアが次のように改善されています（70/100）。 合計ブロッキング時間がある（400ms => 300ms）。

コストのかかるネットワーク リクエストをブロックした後の流れ

コストのかかるサードパーティの埋め込みをファサードに置き換える

動画、ソーシャル メディアの投稿、ウィジェットの埋め込みには、サードパーティのリソースを使用するのが一般的です。 できます。デフォルトでは、ほとんどの埋め込みはすぐに積極的に読み込まれるため、高価なペイロードが付属しており、 ユーザーエクスペリエンスに 悪影響を与えますサードパーティが重要でない場合（たとえば、 スクロールしないと見えないようになっています）。

このようなウィジェットのパフォーマンスを改善するパターンの 1 つは、ユーザー側のウィジェットに遅延読み込みを行うことです。 やり取りします。これを行うには、元の画像の ウィジェット（ファサード）の軽量なプレビューを使用し、ユーザーが操作した場合にのみフルバージョンを読み込む できます。Lighthouse の監査では、サードパーティのリソースを推奨します。 ファサードを使用した遅延読み込み（YouTube 動画の埋め込みなど）。

監査により、高価なサードパーティのリソースの一部を置き換え可能であることを強調する

Lighthouse では、メインスレッドを 250 ミリ秒以上ブロックしているサードパーティ コードがハイライト表示されます。これにより、あらゆる種類のサードパーティ スクリプト（Google が作成したスクリプトを含む）を公開できます。レンダリングの際にスクロールが必要な場合は、遅延読み込みや遅延読み込みを行うことをおすすめします。

サードパーティの JavaScript 監査のコストを削減する

Core Web Vitals を超えて

Core Web Vitals を強調するだけでなく、Lighthouse と PageSpeed Insights の最新バージョンでは、 JavaScript を多用するウェブページの読み込み速度を速めるための具体的なガイダンスを ソースマップをオンにしている場合は、アプリケーションを読み込むことができます。

たとえば、ページ内の JavaScript のコストを削減するための監査（ ユーザー エクスペリエンスにとって不要な可能性のある、ポリフィルや重複への依存を減らすことができます。

Core Web Vitals のツールについて詳しくは、Lighthouse をご確認ください。 チームの Twitter アカウントと What's new DevTools。

ヒーロー画像: Mercedes Mehling 氏 Unsplash より