Chrome のウェブツールを使用してユーザー エクスペリエンスを改善する機会を見つける。
公開日: 2021 年 5 月 11 日
本日は、Lighthouse、PageSpeed、DevTools の新しいツール機能についてご紹介します。Web Vitals でサイトを改善する方法を特定するのに役立ちます。
ツールの概要を簡単に説明すると、Lighthouse は、ウェブページの品質を改善するためのオープンソースの自動化ツールです。Chrome DevTools のデバッグツール スイートにあり、公開されているウェブページや認証が必要なウェブページに対して実行できます。PageSpeed Insights、CI、WebPageTest にも Lighthouse があります。
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 レポートの [Metrics] セクションには、これらの指標のラボ バージョンが含まれています。これは、ユーザー エクスペリエンスのどの部分に注意を払う必要があるかをまとめたビューとして使用できます。
Chrome UX レポートや RUM などのフィールド指標にはこのような制限はなく、実際のユーザー エクスペリエンスを反映しているため、ラボ環境のデータの補完として有用です。フィールドデータでは、ラボで得られる種類の診断情報を提供できないため、両者は連携して使用します。
Web Vitals の改善点を特定する
Largest Contentful Paint 要素を特定する
LCP は、読み込み時に感じられることを測定したものです。ページの読み込み中に、プライマリ（または「最大」）コンテンツが読み込まれ、ユーザーに表示されたポイントをマークします。
Lighthouse では、「Largest Contentful Paint 要素」の監査を行って、どの要素が最大の Contentful Paint であったかを特定できます。要素にカーソルを合わせると、メイン ブラウザ ウィンドウでその要素がハイライト表示されます。
この要素が画像の場合は、この画像の読み込みを最適化することを検討することをおすすめします。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 画像の読み込みが遅れる可能性があります。「Largest Contentful Paint イメージが遅延読み込みされました」という監査で LCP 画像が誤って遅延読み込みされている場合は、Lighthouse でハイライト表示されます。
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 タスクに時間がかかると、この指標と、この指標のプロキシである Total Blocking Time に影響する可能性があります。
Lighthouse では、長いメインスレッド タスクを避けるという監査を実施しています。ここには、メインスレッドで最も長いタスクが一覧表示されます。これは、入力の遅延に最も影響しているタスクを特定する際に役立ちます。左側の列には、長時間のメインスレッド タスクを担当するスクリプトの URL が表示されます。
右側には、これらのタスクの所要時間が示されます。長いタスクとは 50 ミリ秒を超えて実行される タスクのことですこれは、フレームレートや入力レイテンシに影響を与えるのに十分な時間、メインスレッドをブロックするとみなされます。
モニタリングにサードパーティ サービスを検討している場合は、これらの費用を可視化するために Calibre のメインスレッド実行タイムラインのビジュアルも非常に便利です。このタイムラインでは、インタラクティビティに影響する長いタスクに貢献している親タスクと子タスクの両方がハイライト表示されます。
ネットワーク リクエストをブロックして、Lighthouse で影響の変化を確認する
Chrome DevTools は、ネットワーク リクエストのブロックをサポートしており、個々のリソースが削除された場合や利用できない場合にどのような影響があるかを確認できます。これは、合計ブロック時間（TBT）や操作可能になるまでの時間などの指標に対する個々のスクリプト（サードパーティの埋め込みやトラッカーなど）のコストを理解するのに役立ちます。
ネットワーク リクエストのブロックは Lighthouse でも機能します。サイトの Lighthouse レポートを簡単に見てみましょう。パフォーマンス スコアは 63/100、TBT は 400 ミリ秒。コードを詳しく調べると、このサイトでは Chrome で Intersection Observer ポリフィルが読み込まれていることがわかります。これは不要な処理です。ブロックしましょう。
DevTools の [Network] パネルでスクリプトを右クリックし、Block Request URL をクリックしてブロックできます。Intersection Observer のポリフィルについては、以下を行います。
次に、Lighthouse を再実行します。今回は、合計ブロック時間（400 ミリ秒 = > 300 ミリ秒）に伴い、パフォーマンス スコアが改善され（70/100）、
費用のかかるサードパーティの埋め込みをファサードに置き換える
動画に動画、ソーシャル メディアの投稿、ウィジェットを埋め込むには、サードパーティのリソースを使用するのが一般的です。デフォルトでは、ほとんどの埋め込みはすぐに積極的に読み込まれ、高価なペイロードが含まれる可能性があり、ユーザー エクスペリエンスに悪影響を及ぼします。サードパーティが重要でない場合（表示される前にユーザーがスクロールする必要がある場合など）は、この方法は無駄になります。
このようなウィジェットのパフォーマンスを改善するパターンの 1 つは、ユーザー操作時の遅延読み込みです。これは、ウィジェットの軽量なプレビュー（ファサード）をレンダリングし、ユーザーが操作した場合にのみフルバージョンを読み込むことで実現できます。Lighthouse には、YouTube 動画埋め込みなど、ファサードで遅延読み込みできるサードパーティ リソースを推奨する監査があります。
なお、Lighthouse では、メインスレッドを 250 ミリ秒以上ブロックしているサードパーティ コードがハイライト表示されます。これにより、あらゆる種類のサードパーティ スクリプト（Google が作成したものを含む）が公開される可能性があります。レンダリングされる内容を表示するためにスクロールが必要な場合は、デフェアリングまたは遅延読み込みを検討することをおすすめします。
Core Web Vitals 以外
最新バージョンの Lighthouse と PageSpeed Insights では、Core Web Vitals を強調することに加え、ソースマップを有効にしている場合に JavaScript を多用するウェブ アプリケーションの読み込み速度を向上させるための具体的なガイダンスも提供しています。
たとえば、ユーザー エクスペリエンスに必要のないポリフィルや重複への依存を減らすなど、ページ内の JavaScript のコストを削減するための監査が増加しています。
ウェブに関する主な指標のツールの詳細については、Lighthouse チームの Twitter アカウントと DevTools の最新情報をご覧ください。
Mercedes Mehling 氏によるヒーロー画像（Unsplash より）。