このページは Cloud Translation API によって翻訳されました。

ラボでやり取りが遅い場合を手動で診断する

フィールドデータをラボに取り込んで再現し、手動テストによって操作が遅い原因を特定する方法を学びます。

Jeremy Wagner

Interaction to Next Paint（INP）を最適化するうえで課題となるのが、INP の低下の原因を特定することです。メインスレッドで多くのタスクをスケジュールするサードパーティスクリプト、大きな DOM サイズ、高コストなイベントコールバックなど、さまざまな原因が考えられます。

INP の改善は難しい場合があります。まず、どのインタラクションがページの INP に貢献する傾向があるかを把握する必要があります。実際のユーザーから最も遅いインタラクションがウェブサイトで不明な場合は、遅いインタラクションを確認するをご覧ください。役に立つフィールドデータがあれば、ラボツールで特定の操作を手動でテストし、操作が遅い原因を突き止めることができます。

フィールドデータがない場合

フィールドデータがあれば、どのインタラクションを最適化する必要があるかの判断に多くの時間を節約できるため、非常に重要です。場合によっては、フィールドデータがないこともあります。この状況に当てはまる場合、改善すべきインタラクションを見つけることは可能ですが、より多くの労力と異なるアプローチが必要になります。

Total Blocking Time（TBT）は読み込み中のページの応答性を評価するラボの指標で、INP と十分に相関しています。ページの TBT が高い場合は、ページの読み込み時に、ユーザー操作に対してページがあまり反応しない可能性があります。

ページの TBT を確認するには、どちらの Lighthouse も使用できます。ページの TBT が高い場合、ページの読み込み中にメインスレッドがビジー状態になりすぎている可能性があります。これは、ページのライフサイクルにおける重要な時期におけるページの応答性に影響する可能性があります。

ページの読み込み後に遅いインタラクションを特定するには、ウェブサイトのアナリティクスですでに特定されている一般的なユーザーフローなど、他の種類のデータが必要になることもあります。たとえば、e コマースウェブサイトでは、ユーザーがオンラインショッピングカートに商品を追加して購入手続きを行うときに行うアクションが、一般的なユーザーフローになります。

フィールドデータがあるかどうかに関係なく、次のステップは、遅いインタラクションを手動でテストして再現することです。これは、遅いインタラクションを再現できなければ修正できるためです。

ラボでの遅いインタラクションを再現する

ラボで遅いインタラクションを手動テストで再現する方法はいくつかありますが、まずは以下のフレームワークを試すことができます。

トレースを記録する

操作が遅い場合の診断とトラブルシューティングには、Chrome のパフォーマンスプロファイラの使用をおすすめします。Chrome のパフォーマンスプロファイラでインタラクションをプロファイリングする手順は次のとおりです。

テストするページを開きます。
Chrome DevTools を開き、[Performance] パネルに移動します。
パネルの左上にある [Record] ボタンをクリックしてトレースを開始します。
トラブルシューティングするやり取りを行います。
もう一度 [Record] ボタンをクリックしてトレースを停止します。

プロファイラにデータを入力すると、プロファイラの上部にあるアクティビティの概要が最初に表示されます。アクティビティの概要では、録画で長時間のタスクが発生した場所の上部に赤いバーが表示されます。これにより、問題のある部分をすばやくズームインできます。

Chrome DevTools のパフォーマンスパネルの上部に表示されるアクティビティの概要。表示されているアクティビティは主に、長いタスクを引き起こす JavaScript からのもので、フレームチャートの上に赤色でハイライト表示されています。 — </ph> Chrome のパフォーマンスプロファイラの上部にあるアクティビティの概要。時間のかかるタスクは、アクティビティフレームチャート上で赤色でハイライト表示されます。このケースでは、長いタスクのほとんどは、大量のスクリプト作成を担っていました。

アクティビティの概要で地域をドラッグして選択することで、問題のある部分にすばやく焦点を合わせることができます。必要に応じてプロファイラのパンくずリスト機能を使用すると、タイムラインを絞り込み、無関係なアクティビティを無視できます。

インタラクションが発生した場所に注目すると、インタラクショントラックを使用して、その下のメインスレッドトラックで発生したインタラクションとアクティビティを確認することができます。

Chrome DevTools のパフォーマンスパネルに可視化されているインタラクション。メインスレッドトラックの上にあるインタラクショントラックは、インタラクションの継続時間を示します。インタラクションの所要時間は、その下にあるメインスレッドアクティビティと並べることができます。 — </ph> Chrome の DevTools のパフォーマンスプロファイラでプロファイリングされたインタラクション。**インタラクション** トラックには、クリックインタラクションに対応する一連のイベントが表示されます。Interactions トラッキングエントリは、インタラクションを促進するタスクにまたがっています。

インタラクショントラックのイテレーションにカーソルを合わせると、インタラクションのどの部分が最も長かったかに関する詳細情報が表示されます。

Chrome DevTools のパフォーマンスパネルに表示される、インタラクションのマウスオーバーツールチップ。ツールチップには、操作にかかった時間が表示されます。操作の入力遅延、処理時間、プレゼンテーションの遅延など、どの部分で操作が行われたかが示されます。 — </ph> パフォーマンスパネルのインタラクショントラックでインタラクションにカーソルを合わせると表示されるツールチップ。インタラクションの各部分にかかった時間がツールチップに表示されます。

インタラクションのストライプ部分は、インタラクションの時間が「良好」の上限である 200 ミリ秒を超えた時間を表します。ページの INP のしきい値を設定します。記載されているインタラクションの部分は次のとおりです。

入力遅延 - 左ひげで示されます。
処理時間 - 左右のひげの間にある実線のブロックで視覚化されます。
プレゼンテーションの遅延 - 右ひげで示されています。

ここからは、遅いインタラクションの原因となっている問題をさらに深く掘り下げます。これについては、このガイドの後半で説明します。

Chrome 拡張機能「Web Vitals」

パフォーマンスプロファイラは、動作が遅いことがわかっているインタラクションの診断に推奨されるアプローチですが、どのインタラクションが問題のあるインタラクションか不明な場合、動作が遅いインタラクションの特定に時間がかかることがあります。考慮すべきアプローチの一つは、Web Vitals Chrome 拡張機能を使用することです。この拡張機能を使用すると、パフォーマンスプロファイラに移行する前に、さまざまなインタラクションをすばやく試して問題のあるインタラクションを見つけることができます。

以下の手順に沿って操作すると、Web Vitals 拡張機能のインストール後に DevTools コンソールにインタラクションデータが表示されます。

Chrome で、アドレスバーの右にある拡張機能アイコンをクリックします。
プルダウンメニューで [Web Vitals] 拡張機能を見つけます。
右側にあるアイコンをクリックして拡張機能の設定を開きます。
[オプション] をクリックします。
表示される画面で [コンソールロギング] チェックボックスをオンにして、[保存] をクリックします。

これらの手順を実行したら、Chrome DevTools でコンソールを開き、ページでの疑わしい操作のテストを開始します。操作していくと、コンソールに診断データが表示されます。

Web Vitals 拡張機能の INP ログが Chrome DevTools のコンソールにどのように表示されるか。インタラクションのどの部分に最も時間がかかったかなどの詳細なロギングや、さまざまなパフォーマンス API の詳細なアトリビューションデータを利用できます。 — </ph> Web Vitals 拡張機能を使用すると、ページの INP に寄与するインタラクションの詳細なデータを Chrome DevTools のコンソールに記録できます。

Web Vitals 拡張機能は、遅いインタラクションの特定に役立ち、INP のデバッグに役立つ詳細情報を提供します。ただし、パフォーマンスプロファイラは、ウェブサイトの本番環境コードを移動して、遅いインタラクションの背後にある原因を見つけるために必要な詳細なデータを提供するため、遅いインタラクションの診断には依然として使用しなければならない場合があります。

インタラクションのどの部分が遅いかを特定する方法

インタラクションは、入力遅延、処理時間、プレゼンテーション遅延の 3 つの部分で構成されます。ページの INP を下げるインタラクションをどのように最適化するかは、どの部分に最も時間がかかっているかによって異なります。

長い入力遅延を特定する方法

入力の遅延により、インタラクションのレイテンシが高くなる可能性があります。インタラクションの最初の部分は、入力遅延です。これは、オペレーティングシステムがユーザーアクションを最初に受け取ってから、ブラウザがそのインタラクションの最初のイベントハンドラコールバックの処理を開始できるまでの時間です。

Chrome のパフォーマンスプロファイラで入力遅延を特定するには、インタラクショントラックでインタラクションを見つけます。左ひげの長さはインタラクションの入力遅延部分を示します。正確な値は、パフォーマンスプロファイラでインタラクションにカーソルを合わせるとツールチップに表示されます。

入力遅延をゼロにすることはできませんが、入力遅延の長さは調整できます。コールバックのタイミングを遅らせている処理がメインスレッドで実行されているかどうかを確認することが重要です。

Chrome のパフォーマンスパネルに表示されている入力遅延。サードパーティのスクリプトが起動するタイマーにより入力遅延が増加するため、インタラクションの開始がイベントコールバックよりもかなり前に行われます。 — </ph> サードパーティのスクリプトのタイマーによって起動されたタスクが原因で発生する入力遅延。インタラクショントラックに示されているインタラクションのひげの左側の部分は、入力遅延を視覚的に表しています。

上の図では、ユーザーがページを操作しようとしたときにサードパーティのスクリプトのタスクが実行されているため、入力遅延が長くなっています。長い入力遅延はインタラクションのレイテンシに影響するため、ページの INP に影響する可能性があります。

長い処理時間を確認する方法

イベントコールバックは入力遅延の直後に実行され、その完了にかかる時間を「処理時間」と呼びます。イベントコールバックの実行時間が長すぎると、ブラウザが次のフレームを表示するのが遅れ、インタラクションの合計レイテンシが大幅に増加する可能性があります。処理時間が長くなるのは、ファーストパーティまたはサードパーティの JavaScript（場合によってはその両方）の計算コストが高いことが原因です。パフォーマンスプロファイラでは、これはインタラクショントラックのインタラクションのソリッド部分で表されます。

Chrome のパフォーマンスパネルに表示されたイベントコールバックタスクの図タイムライン上のインタラクションにカーソルを合わせると、長い処理時間が表示されます。 — </ph> Chrome DevTools のパフォーマンスプロファイラに表示される、クリック操作への応答で実行されるイベントコールバック。処理時間が長いことに注意してください。

コストの高いイベントコールバックを見つけるには、特定のインタラクションのトレースで以下を監視します。

イベントコールバックに関連付けられたタスクが長時間のタスクかどうかを判断します。ラボの設定で時間のかかるタスクをより確実に表示するには、パフォーマンスパネルで CPU スロットリングを有効にするか、低～中規模の Android デバイスを接続してリモートデバッグを使用する必要があります。
イベントコールバックを実行するタスクが長いタスクの場合は、コールスタック内でイベントハンドラエントリ（たとえば、「Event: click」などの名前を含むエントリ）を探します。エントリの右上に赤い三角形が表示されます。

インタラクションの処理時間を短縮するには、次のいずれかの方法をお試しください。

作業はできるだけ少なくする。コストの高いイベントコールバックで発生するすべての処理は本当に必要なのでしょうか？適切でない場合は、可能であればそのコードを完全に削除するか、またはできない場合は実行を先延ばしにすることを検討してください。フレームワーク機能を活用することもできます。たとえば、React のメモ化機能では、Prop が変更されていない場合、コンポーネントの不要なレンダリング作業をスキップできます。
イベントコールバックでの非レンダリング処理を後の時点に延期します。時間のかかるタスクは、メインスレッドに降格することで分割できます。メインスレッドに譲るたびに、現在のタスクの実行を終了し、残りの作業を別のタスクに分割します。これにより、レンダラはイベントコールバックの前半で実行されていたユーザーインターフェースの更新を処理できるようになります。React を使用している場合は、React の遷移機能によって自動的に行われます。

これらの戦略は、イベントコールバックを最適化して実行時間を短縮するのに役立ちます。

プレゼンテーションの遅延を特定する方法

長い入力遅延と処理時間だけが、INP 低下の原因ではありません。少量のイベントコールバックコードに応答して行われるレンダリングの更新でも、コストが高くなる場合があります。ブラウザが操作の結果を反映するためにユーザーインターフェースの視覚的な更新をレンダリングするまでの時間をプレゼンテーションの遅延といいます。

<ph type="x-smartling-placeholder">で確認できます。 <ph type="x-smartling-placeholder">

Chrome DevTools のパフォーマンスパネルで可視化したとおりのレンダリング処理。イベントコールバックの後に、次のフレームを描画するためにレンダリング処理が行われます。 — </ph> Chrome のパフォーマンスプロファイラに表示されるタスクのレンダリング右ひげは、プレゼンテーションが遅延した時間の長さを示しています。

レンダリング作業はほとんどの場合、スタイルの再計算、レイアウト、ペイント、コンポジットなどのタスクで構成され、プロファイラのフレームチャートでは紫色と緑色のブロックで表されます。プレゼンテーションの遅延の合計は、インタラクショントラックでインタラクションの右ひげで示されます。

インタラクションの遅延が大きい場合、考えられるすべての原因の中で、プレゼンテーションの遅延はトラブルシューティングと修正が最も困難な場合があります。過剰なレンダリング処理は、次のいずれかが原因で発生する可能性があります。

大きな DOM サイズ。多くの場合、ページのプレゼンテーションを更新するために必要なレンダリング作業は、ページの DOM のサイズとともに増加します。詳しくは、DOM サイズがインタラクティビティに及ぼす影響とその対策をご覧ください。
強制リフロー。これは、JavaScript で要素にスタイルの変更を適用した後、すぐにその処理の結果をクエリすると発生します。その結果、ブラウザは更新後のスタイルを返すために、他の処理を行う前にレイアウト処理を実行する必要があります。強制リフローを回避するための詳細とヒントについては、大規模で複雑なレイアウトとレイアウトスラッシングを回避するをご覧ください。
requestAnimationFrame コールバックでの過度または不要な作業requestAnimationFrame() コールバックはイベントループのレンダリングフェーズで実行され、次のフレームを表示する前に完了する必要があります。ユーザーインターフェースを変更しない作業に requestAnimationFrame() を使用している場合、次のフレームが遅延する可能性があることをご理解ください。
ResizeObserver コールバック。このようなコールバックはレンダリングの前に実行され、処理にコストがかかる場合は次のフレームの表示が遅れる可能性があります。イベントコールバックと同様に、不要なロジックは次のフレームで処理を先送りします。

で確認できます。 <ph type="x-smartling-placeholder">

遅いインタラクションを再現できない場合はどうすればよいですか？

フィールドデータから特定のインタラクションが遅いことが示唆されているものの、ラボで問題を手動で再現できない場合はどうしたらよいでしょうか。これにはいくつかの理由が考えられます。

まず、インタラクションのテスト環境は、ハードウェアとネットワーク接続によって異なります。高速接続で高速なデバイスを使用している場合でも、ユーザーがそれを使っているわけではありません。これに該当する場合は、次の 3 つのいずれかをお試しください。

実機の Android デバイスをお持ちの場合は、リモートデバッグを使用して、ホストマシンで Chrome DevTools インスタンスを開き、遅いインタラクションを再現してみます。モバイルデバイスは多くの場合、ノートパソコンやデスクトップパソコンほど高速ではありません。そのため、モバイルデバイスでは動作が遅くなる傾向があります。
実機がない場合は、Chrome DevTools で CPU スロットリング機能を有効にします。

もう 1 つの原因として、ページの読み込みを待っているものの、ユーザーは操作していないことが考えられます。高速ネットワークを使用している場合は、ネットワークスロットリングを有効にして低速のネットワーク状態をシミュレートし、ペイントが完了したらすぐにページを操作します。これを行うのは、起動時にメインスレッドが最もビジーになることが多く、その間のテストでユーザーに何が起きているのかが明らかになる可能性があるためです。

INP のトラブルシューティングは反復プロセス

インタラクションレイテンシが高く、INP 低下の原因を突き止めるには多大な労力が必要ですが、原因を突き止めることができれば、それも半分終わりました。不適切な INP をトラブルシューティングするための系統的なアプローチに従うことで、問題の原因を確実に特定し、より迅速に適切な修正を行うことができます。確認するには:

フィールドデータを利用して低速なインタラクションを見つける。
問題のあるフィールドの操作をラボで手動でテストし、再現可能かどうかを確認します。
原因が長い入力遅延、コストの高いイベントコールバック、または負荷の高いレンダリング処理にあるのかどうかを特定します。
この繰り返しです。

そのうち最後が最も重要な点です。ページパフォーマンスを改善するために行う他のほとんどの作業と同様に、INP のトラブルシューティングと改善も周期的なプロセスです。遅いインタラクションを 1 つ修正したら、次のインタラクションに進み、結果が得られるまで繰り返します。