フィールド データをラボに取り込んで再現し、手動テストによって操作が遅い原因を特定する方法を学びます。
公開日: 2023 年 5 月 9 日
Interaction to Next Paint（INP）を最適化する際に難しいのは、INP が低下している原因を特定することです。原因は多数考えられます。たとえば、メインスレッドで多くのタスクをスケジュールするサードパーティ スクリプト、DOM サイズが大きい、イベント コールバックに時間がかかっているなどです。
INP の改善は困難な場合があります。まず、ページの INP の原因となるインタラクションの傾向を把握する必要があります。実際のユーザーから最も遅いインタラクションがウェブサイトで不明な場合は、遅いインタラクションを確認するをご覧ください。フィールドデータが収集できたら、ラボツールで特定のインタラクションを手動でテストし、インタラクションの遅延の原因を特定できます。
フィールド データがない場合
現場データを収集することは、最適化が必要なインタラクションを見つけるのにかかる時間を大幅に短縮できるため、非常に重要です。ただし、フィールドデータがない場合があります。そのような状況でも、改善の余地のあるインタラクションを見つけることは可能ですが、もう少し手間と別のアプローチが必要になります。
Total Blocking Time（TBT）は、読み込み中のページの応答性を評価するラボ指標であり、INP とよく相関します。ページの TBT が高い場合は、ページの読み込み時に、ユーザー操作に対してページがあまり反応しない可能性があります。
ページの TBT を確認するには、どちらの Lighthouse も使用できます。ページの TBT が高い場合、ページの読み込み中にメインスレッドが過負荷になる可能性があります。これは、ページのライフサイクルの重要なタイミングにおけるページの応答性に影響する可能性があります。
ページの読み込み後に遅いインタラクションを見つけるには、ウェブサイトのアナリティクスですでに特定している一般的なユーザーフローなど、他の種類のデータが必要になる場合があります。たとえば e コマース ウェブサイトでは、ユーザーがオンライン ショッピング カートに商品を追加して購入手続きを行うときに行うアクションが、一般的なユーザーフローになります。
フィールド データがあるかどうかに関係なく、次のステップは、遅いインタラクションを手動でテストして再現することです。これは、遅いインタラクションを再現できなければ修正できるためです。
ラボでの遅いインタラクションを再現する
ラボで手動テストを実施して操作の遅延を再現する方法はいくつかありますが、試すことができるフレームワークは次のとおりです。
DevTools の [パフォーマンス] パネルのライブ指標
DevTools のパフォーマンス プロファイラは、動作が遅いことが判明しているインタラクションの診断に推奨されるアプローチですが、どのインタラクションが問題のあるインタラクションか不明な場合、遅いインタラクションの特定に時間がかかることがあります。
ただし、[パフォーマンス] パネルを初めて開くと、リアルタイム指標ビューが表示されます。これにより、より詳細なパフォーマンス プロファイラに進む前に、さまざまなインタラクションをすばやく試して問題のあるインタラクションを特定できます。操作を行うと、インタラクション ログに診断データが表示されます（INP のインタラクションがハイライト表示されます）。これらのインタラクションを展開すると、フェーズ別の内訳を確認できます。
Web Vitals 拡張機能は、遅いインタラクションの特定に役立ち、INP のデバッグに役立つ詳細情報を提供しますが、パフォーマンス プロファイラを使用して遅いインタラクションを診断する必要がある場合もあります。パフォーマンス プロファイラは、ウェブサイトの本番環境コードをナビゲートして遅いインタラクションの原因を特定するために必要な詳細なデータを提供します。
トレースを記録する
操作の遅延の診断とトラブルシューティングには、Chrome のパフォーマンス プロファイラを使用することをおすすめします。Chrome のパフォーマンス プロファイラでインタラクションをプロファイリングする手順は次のとおりです。
- テストするページを開きます。
- Chrome DevTools を開き、[パフォーマンス] パネルに移動します。
- パネルの左上にある [記録] ボタンをクリックして、トレースを始めます。
- トラブルシューティングする操作を行います。
- トレース停止するには、[記録] ボタンをもう一度クリックします。
プロファイラにデータを入力したら、まずプロファイラの上部にあるアクティビティの概要を確認します。アクティビティの概要には、記録中に長いタスクが発生した部分が赤いバーで示されます。これにより、問題のある領域をすばやく拡大できます。
アクティビティの概要で領域をドラッグして選択すると、問題のある領域にすぐにフォーカスできます。必要に応じて、プロファイラでパンくずリスト機能を使用して、タイムラインを絞り込み、関連性のないアクティビティを無視できます。
インタラクションが発生した場所にフォーカスすると、[インタラクション] トラックを使用して、その下にあるメインスレッド トラックで発生したインタラクションとアクティビティを並べ替えることができます。
インタラクション トラックでインタラクションにカーソルを合わせると、インタラクションのどの部分が最も長かったかを確認できます。
インタラクションの縞模様の部分は、インタラクションの時間が 200 ミリ秒を超えた時間を表します。これは、ページの INP の「良好」なしきい値の上限です。表示されるインタラクションの部分は次のとおりです。
次は、操作の遅延の原因となっている問題を詳しく調べます。この点については、このガイドの後半で説明します。
インタラクションのどの部分が遅いかを特定する方法
インタラクションには、入力遅延、処理時間、表示遅延の 3 つの部分があります。ページの INP を短縮するためにインタラクションを最適化する方法は、最も時間のかかる部分によって異なります。
長い入力遅延を特定する方法
入力遅延により、インタラクションのレイテンシが高くなる可能性があります。入力遅延は、インタラクションの最初の部分です。これは、オペレーティング システムがユーザー アクションを最初に受け取ってから、ブラウザがそのインタラクションの最初のイベント ハンドラ コールバックの処理を開始できるまでの時間です。
Chrome のパフォーマンス プロファイラで入力遅延を特定するには、インタラクション トラックでインタラクションを探します。左側のヒゲの長さは、インタラクションの入力遅延の部分を示します。正確な値は、パフォーマンス プロファイラでインタラクションにカーソルを合わせるとツールチップに表示されます。
入力遅延をゼロにすることはできませんが、入力遅延の長さは制御できます。重要なのは、メインスレッドで実行されている処理が、コールバックがすぐに実行されないようにしているかどうかを把握することです。
上の図では、ユーザーがページを操作しようとしたときにサードパーティのスクリプトのタスクが実行されているため、入力遅延が長くなっています。入力遅延が長くなると、インタラクションのレイテンシに影響し、ページの INP に影響する可能性があります。
処理時間が長い原因を特定する方法
イベント コールバックは入力遅延の直後に実行され、完了までにかかる時間は処理時間と呼ばれます。イベント コールバックの実行時間が長すぎると、ブラウザが次のフレームを表示するまでに時間がかかり、インタラクションの合計レイテンシが大幅に増加する可能性があります。処理に時間がかかる原因は、計算コストの高いファーストパーティまたはサードパーティの JavaScript が原因である可能性があります。また、両方の場合もあります。パフォーマンス プロファイラでは、インタラクション トラック内のインタラクションの塗りつぶされた部分で示されます。
費用のかかるイベント コールバックを見つけるには、特定のインタラクションのトレース内で次のことを確認します。
- イベント コールバックに関連付けられたタスクが長時間のタスクかどうかを判断します。ラボ環境で長時間のタスクをより確実に検出するには、パフォーマンス パネルで CPU スロットリングを有効にするか、低～中程度の Android デバイスを接続してリモート デバッグを使用する必要がある場合があります。
- イベント コールバックを実行するタスクが長いタスクの場合は、エントリの右上に赤い三角形があるコールスタック内のイベント ハンドラ エントリ（イベント: クリックなどの名前のエントリなど）を探します。
インタラクションの処理時間を短縮するには、次のいずれかの方法を試してください。
- できるだけ少ない作業を行う。コストの高いイベント コールバックで発生するすべての処理は本当に必要なのでしょうか？必要でない場合は、可能であればそのコードを完全に削除するか、削除できない場合は実行を後回しすることを検討してください。フレームワークの機能も活用できます。たとえば、React のメモ化機能では、プロパティが変更されていない場合、コンポーネントの不要なレンダリング作業をスキップできます。
- イベント コールバック内のレンダリング以外の処理を後で行うようにします。時間のかかるタスクは、メインスレッドに降格することで分割できます。メインスレッドに譲るたびに、現在のタスクの実行を終了し、残りの作業を別のタスクに分割します。これにより、レンダラは、イベント コールバックで以前に行われたユーザー インターフェースの更新を処理できます。React を使用している場合は、遷移機能を使用してこの処理を行うことができます。
これらの戦略は、イベント コールバックを最適化して実行時間を短縮するのに役立ちます。
プレゼンテーションの遅延を特定する方法
入力遅延や処理時間の長さだけが INP の低下を引き起こす原因ではありません。イベント コールバック コードが少量であっても、レンダリングの更新に時間がかかる場合もあります。ブラウザがユーザー インターフェースの視覚的な更新をレンダリングして、操作の結果を反映するまでにかかる時間を、表示遅延といいます。
レンダリング作業は、多くの場合、スタイルの再計算、レイアウト、ペイント、合成などのタスクで構成され、プロファイラの炎グラフでは紫色と緑色のブロックで表されます。総プレゼンテーション遅延は、インタラクション トラックのインタラクションの右側のヒゲで表されます。
インタラクション レイテンシの増加の原因として考えられるすべての要因の中で、表示の遅延はトラブルシューティングと修正が最も難しい場合があります。レンダリング作業の過剰な負荷は、次のいずれかの原因で発生する可能性があります。
- DOM サイズが大きい。ページの表示を更新するために必要なレンダリング作業は、ページの DOM のサイズとともに増加することがよくあります。詳しくは、DOM サイズがインタラクティビティに及ぼす影響とその対策をご覧ください。
- 強制リフロー。これは、JavaScript で要素にスタイルの変更を適用し、その処理の結果をすぐにクエリする場合に発生します。その結果、ブラウザは更新されたスタイルを返すために、他の処理を行う前にレイアウト処理を行う必要があります。強制リフローを回避するための詳細とヒントについては、大規模で複雑なレイアウトとレイアウト スラッシングを回避するをご覧ください。
requestAnimationFrameコールバックで過剰または不要な処理が行われている。requestAnimationFrame()コールバックはイベントループのレンダリング フェーズ中に実行され、次のフレームを表示する前に完了する必要があります。ユーザー インターフェースを変更しない作業にrequestAnimationFrame()を使用している場合、次のフレームが遅延する可能性があることをご理解ください。ResizeObserverコールバック。このようなコールバックはレンダリングの前に実行され、処理が負荷が高い場合は次のフレームの表示が遅れる可能性があります。イベント コールバックと同様に、次のフレームには必要のないロジックは延期します。
遅いインタラクションを再現できない場合はどうすればよいですか？
フィールドデータから特定の操作が遅いことがわかっても、ラボで問題を手動で再現できない場合はどうすればよいですか？このような状況になる理由はいくつかありますが、重要な理由の一つは、インタラクションをテストする状況がハードウェアとネットワーク接続に依存することです。高速なデバイスで高速な接続を使用している場合でも、ユーザーが同じ環境にあるとは限りません。これに該当する場合は、次のいずれかをお試しください。
- 物理的な Android デバイスをお持ちの場合は、リモート デバッグを使用してホストマシンで Chrome DevTools インスタンスを開き、そこで遅い操作を再現してみてください。モバイル デバイスは多くの場合、ノートパソコンやデスクトップ パソコンほど高速ではありません。そのため、モバイル デバイスでは動作が遅くなる傾向があります。
- 物理デバイスがない場合は、Chrome DevTools で CPU スロットリング機能を有効にします。
- ページを操作する前にページの読み込みを待っているが、ユーザーは待っていない可能性があります。高速なネットワークを使用している場合は、ネットワーク スロットリングを有効にして低速なネットワーク状態をシミュレートし、その後、ペイントが完了するとすぐにページを操作します。多くの場合、メインスレッドは起動時に最も負荷が高くなるため、この期間中にテストを行うと、ユーザーが実際に遭遇している問題を特定できる可能性があります。
INP のトラブルシューティングは反復的なプロセスです
INP の低下を招くインタラクション レイテンシの原因を特定するには、多くの作業が必要ですが、原因を特定できれば、解決の半分は完了です。問題のある INP のトラブルシューティングに体系的なアプローチを適用することで、問題の原因を正確に特定し、適切な修正を迅速に行うことができます。確認するには:
- フィールドデータに基づいて遅いインタラクションを見つける。
- 問題のあるフィールドの操作をラボで手動でテストし、再現可能かどうかを確認します。
- 原因が長い入力遅延、高コストのイベント コールバック、高コストのレンダリング処理などにあるかどうかを特定します。
- この繰り返しです。
そのうち最後が最も重要な点です。ページのパフォーマンスを改善するために行う他の作業と同様に、INP のトラブルシューティングと改善は循環的なプロセスです。1 つの遅いインタラクションの問題を解決したら、次に進み、結果が現れるまで繰り返します。