Chrome のウェブツールを使用してユーザー エクスペリエンスを改善する機会を見つける。
公開日: 2021 年 5 月 11 日
本日は、Lighthouse、PageSpeed、DevTools の新しいツール機能について説明します。これらのツール機能は、サイトの Core Web Vitals を改善する方法を見つけるのに役立ちます。
ツールの概要を簡単に説明すると、Lighthouse は、ウェブページの品質を改善するためのオープンソースの自動化ツールです。Chrome DevTools のデバッグツール スイートにあり、公開されているウェブページや認証が必要なウェブページに対して実行できます。Lighthouse は、PageSpeed Insights、CI、WebPageTest でも確認できます。
Lighthouse 7.x には、要素のスクリーンショットなどの新機能が含まれています。これにより、ユーザー エクスペリエンス指標に影響を与える UI の部分（レイアウトの変化に寄与しているノードなど）を簡単に視覚的に検査できます。
また、PageSpeed Insights で要素のスクリーンショットのサポートも開始しました。これにより、ページの 1 回限りのパフォーマンス実行に関する問題をより簡単に見つけられるようになりました。
Core Web Vitals を測定する
Lighthouse は、Largest Contentful Paint、Cumulative Layout Shift、Total Blocking Time（First Input Delay のラボ プロキシ）などのCore Web Vitals 指標を合成的に測定できます。これらの指標は、読み込み、レイアウトの安定性、インタラクションの準備状況を反映しています。ウェブに関する主な指標の今後で取り上げられている First Contentful Paint などの他の指標も表示されます。
Lighthouse レポートの [指標] セクションには、これらの指標のラボ版が含まれています。これは、ユーザー エクスペリエンスのどの部分に注意を払う必要があるかをまとめたビューとして使用できます。
Chrome UX レポートや RUM などのフィールド指標にはこのような制限はなく、実際のユーザー エクスペリエンスを反映しているため、ラボ環境のデータの補完として有用です。フィールドデータでは、ラボで得られる種類の診断情報を提供できないため、両者は連携して使用します。
Web Vitals の改善点を特定する
Largest Contentful Paint 要素を特定する
LCP は、読み込みエクスペリエンスの知覚を測定する指標です。ページの読み込み中に、プライマリ（または「最大」）コンテンツが読み込まれ、ユーザーに表示されたポイントをマークします。
Lighthouse には、「最大コンテンツの描画」要素の監査があり、最大コンテンツの描画がどの要素であったかを特定できます。要素にカーソルを合わせると、メイン ブラウザ ウィンドウでその要素がハイライト表示されます。
この要素が画像の場合は、この情報は、この画像の読み込みを最適化することを検討する際に役立つヒントとなります。Lighthouse には、画像の最適化に関するさまざまな診断が含まれています。これにより、画像の圧縮率を上げたり、サイズを変更したり、より最適な最新の画像形式で配信したりできるかどうかを把握できます。
Annie Sullivan の LCP ブックマークレットも便利です。これを使用すると、1 回のクリックで LCP 要素を赤い長方形で簡単に特定できます。
遅れて検出された画像をプリロードして LCP を改善する
Largest Contentful Paint を改善するには、重要なヒーロー画像がブラウザで遅れて検出される場合は、その画像をプリロードします。画像が検出可能になる前に JavaScript バンドルを読み込む必要がある場合、検出が遅れることがあります。
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 画像としてフラグが立てられた画像は、ウォーターフォールの深さが 3 つ以上の場合、候補となります。
オフスクリーン画像の遅延読み込みと LCP での遅延読み込みの回避
最初のユーザー エクスペリエンスにとって重要でないオフスクリーン画像は、遅延読み込みできます。これは、ユーザーが画像の近くまでスクロールするまで画像のダウンロードを遅らせる手法です。これにより、重要なアセットのネットワーク競合を軽減し、場合によっては LCP を改善できます。「オフスクリーンの画像を保留する」監査は、このような場合に役立ちます。
Largest Contentful Paint の画像など、スクロールせずに見える範囲にある重要な画像は、遅延読み込みしないでください。これにより、LCP 画像の読み込みが遅れる可能性があります。LCP 画像が正しく遅延読み込みされていない場合は、Lighthouse の「Largest Contentful Paint image was lazily loaded」監査でハイライト表示されます。
CLS への貢献を特定する
Cumulative Layout Shift は視覚的な安定性を測定する指標です。ページのコンテンツが視覚的にどれだけ移動するかを数値化します。Lighthouse には、CLS のデバッグ用の「大きなレイアウト シフトを回避」という監査があります。
この監査では、ページの移動に最も影響を与えている DOM 要素がハイライト表示されます。左側の [要素] 列には、これらの DOM 要素のリストが表示され、右側には全体的な CLS への貢献度が表示されます。
新しい Lighthouse 要素のスクリーンショット機能により、監査で指摘された主要な要素のプレビューを表示できるだけでなく、クリックしてズームしてより鮮明に確認することもできます。
読み込み後の CLS の場合、CLS に最も貢献した要素を長方形で永続的に可視化すると有用です。この機能は、SpeedCurve のCore Web Vitals ダッシュボードなどのサードパーティ ツールで利用できます。私は、Defaced の Layout Shift GIF Generator を使用して、次のような場合に使用しています。
レイアウト シフトの問題をサイト全体で把握するには、Search Console のウェブに関する主な指標レポートが役立ちます。これにより、CLS が高いサイト上のページの種類を確認できます（この場合は、時間をかける必要があるテンプレート部分を特定できます）。
寸法のない画像から CLS を特定する
寸法のない画像によって発生する累積レイアウト シフトを制限するには、画像要素と動画要素に幅と高さのサイズ属性を含めます。このアプローチにより、画像の読み込み中にブラウザがドキュメントに適切な量のスペースを割り当てることができます。
画像のサイズとアスペクト比について考えることの重要性については、画像の高さと幅の設定が重要である理由をご覧ください。
広告からの CLS の特定
Lighthouse 向けパブリッシャー広告を使用すると、ページ上の広告の読み込みエクスペリエンスを改善する機会を見つけることができます。たとえば、レイアウト シフトの要因や、ページをユーザーが使用できるまでの時間を遅らせる可能性がある長いタスクなどです。Lighthouse では、コミュニティ プラグインを介してこれを有効にできます。
ウェブ上のレイアウトの変化の原因として、広告が最大の要因の一つであることに注意してください。次の点に注意してください。
- 表示領域の上部付近にスティッキー以外の広告を配置する場合は注意が必要です
- 広告スロットに可能な限り大きなサイズを予約して、シフトを排除する
合成されていないアニメーションは使用しないでください
負荷の高い JavaScript タスクがメインスレッドを占有している場合、合成されていないアニメーションは低価格の端末で不自然な動きになることがあります。このようなアニメーションは、レイアウトのずれを生む可能性があります。
Chrome は、アニメーションが合成できなかったことを検出すると、Lighthouse が読み取る DevTools トレースに対して報告します。これにより、アニメーションが合成されなかった要素とその理由を一覧表示できます。これらは、合成されていないアニメーションを避ける監査で確認できます。
初回入力遅延 / 合計ブロック時間 / 長いタスクをデバッグする
初回入力は、ユーザーがページを最初に操作したとき（リンクをクリックしたとき、ボタンをタップしたとき、カスタムの JavaScript ベースのコントロールを使用したときなど）から、ブラウザがその操作に対して実際にイベント ハンドラの処理を開始できるまでの時間を測定します。長い JavaScript タスクは、この指標とこの指標のプロキシである合計ブロック時間に影響する可能性があります。
Lighthouse には、メインスレッドで最も長いタスクを一覧表示するメインスレッドでタスクが長時間実行されないようにしてくださいの監査が含まれています。これは、入力の遅延に最も影響しているタスクを特定する際に役立ちます。左側の列には、長時間のメインスレッド タスクを担当するスクリプトの URL が表示されます。
右側には、これらのタスクの所要時間が示されます。なお、長時間タスクとは、50 ミリ秒を超えて実行されるタスクです。これは、フレームレートや入力レイテンシに影響するほど長くメインスレッドをブロックしていると見なされます。
モニタリングにサードパーティ サービスを検討している場合は、これらの費用を可視化するために Calibre のメインスレッド実行タイムラインのビジュアルも非常に便利です。このタイムラインでは、インタラクティビティに影響する長いタスクに貢献している親タスクと子タスクの両方がハイライト表示されます。
ネットワーク リクエストをブロックして、Lighthouse で影響の変化を確認する
Chrome DevTools は、ネットワーク リクエストのブロックをサポートしており、個々のリソースが削除された場合や利用できない場合にどのような影響があるかを確認できます。これは、個々のスクリプト（サードパーティの埋め込みやトラッカーなど）が Total Blocking Time（TBT）や Time to Interactive（TTI）などの指標に与える影響を把握するのに役立ちます。
ネットワーク リクエストのブロックは Lighthouse でも機能します。サイトの Lighthouse レポートを簡単に見てみましょう。Perf スコアは 63/100、TBT は 400 ミリ秒です。コードを詳しく調べると、このサイトでは Chrome で Intersection Observer ポリフィルが読み込まれていることがわかります。これは不要な処理です。ブロックしましょう。
DevTools の [Network] パネルでスクリプトを右クリックし、Block Request URL をクリックしてブロックできます。ここでは、Intersection Observer ポリフィルに対してこれを行います。
次に、Lighthouse を再実行します。今回は、パフォーマンス スコア（70/100）と合計ブロック時間（400 ms> 300 ms）が改善されていることがわかります。
費用のかかるサードパーティの埋め込みをファサードに置き換える
動画、ソーシャル メディアの投稿、ウィジェットをページに埋め込むためにサードパーティ リソースを使用するのが一般的です。デフォルトでは、ほとんどの埋め込みはすぐに読み込まれ、コストの高いペイロードが含まれる可能性があるため、ユーザー エクスペリエンスに悪影響を及ぼす可能性があります。サードパーティが重要でない場合は、これは無駄になります（ユーザーがスクロールして表示する必要がある場合など）。
このようなウィジェットのパフォーマンスを改善する 1 つのパターンは、ユーザー操作時に遅延読み込みすることです。これは、ウィジェットの軽量なプレビュー（ファサード）をレンダリングし、ユーザーが操作した場合にのみフルバージョンを読み込むことで実現できます。Lighthouse には、YouTube 動画埋め込みなど、ファサードで遅延読み込みできるサードパーティ リソースを推奨する監査があります。
なお、Lighthouse では、メインスレッドを 250 ミリ秒以上ブロックしているサードパーティ コードがハイライト表示されます。これにより、あらゆる種類のサードパーティ スクリプト（Google が作成したものを含む）が公開される可能性があります。レンダリングされる内容を表示するためにスクロールが必要な場合は、デフェアリングまたは遅延読み込みを検討することをおすすめします。
Core Web Vitals 以外
最新バージョンの Lighthouse と PageSpeed Insights では、Core Web Vitals のハイライト表示に加えて、ソースマップを有効にしている場合に JavaScript を多用するウェブ アプリケーションの読み込み速度を改善するための具体的なガイダンスも提供しています。
これには、ページの JavaScript のコスト削減のための監査が含まれます。たとえば、ユーザー エクスペリエンスに必要でない可能性のあるポリフィルや重複に依存する部分を減らすなどです。
ウェブに関する主な指標のツールの詳細については、Lighthouse チームの Twitter アカウントと DevTools の新機能をご覧ください。
Unsplash の Mercedes Mehling によるヒーロー画像。