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

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

Jeremy Wagner

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

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

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

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

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

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

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

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

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

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

トレースを記録する

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

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

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

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

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

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

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

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> Chrome の DevTools のパフォーマンス プロファイラでプロファイリングされたインタラクション。インタラクション トラックには、クリック インタラクションに対応する一連のイベントが表示されます。Interactions トラッキング エントリは、インタラクションを促進するタスクにまたがっています。

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

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> パフォーマンス パネルのインタラクション トラックでインタラクションにカーソルを合わせると表示されるツールチップ。インタラクションの各部分にかかった時間がツールチップに表示されます。

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

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

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

Chrome 拡張機能「Web Vitals」

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

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

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

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

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> Web Vitals 拡張機能を使用すると、ページの INP に寄与するインタラクションの詳細なデータを Chrome DevTools のコンソールに記録できます。

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

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

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

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

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

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

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

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> サードパーティのスクリプトのタイマーによって起動されたタスクが原因で発生する入力遅延。インタラクション トラックに示されているインタラクションのひげの左側の部分は、入力遅延を視覚的に表しています。

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

<ph type="x-smartling-placeholder">

</ph> 詳細: 長い入力遅延を解決する方法について詳しくは、入力遅延を特定して低減する方法をご覧ください。

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

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

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> Chrome DevTools のパフォーマンス プロファイラに表示される、クリック操作への応答で実行されるイベント コールバック。処理時間が長いことに注意してください。

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

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

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

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

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

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

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

<ph type="x-smartling-placeholder">

</ph> 重要: ブラウザでページがどのようにレンダリングされるかについては、レンダリング パフォーマンス ガイドをご覧ください。ピクセルのライフサイクルでは、Chromium ベースのブラウザでのレンダリングの仕組みについて、さらに詳しく説明します。

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

</ph> <ph type="x-smartling-placeholder">

</ph> Chrome のパフォーマンス プロファイラに表示されるタスクのレンダリング右ひげは、プレゼンテーションが遅延した時間の長さを示しています。

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

<ph type="x-smartling-placeholder">

</ph> 重要: 高コストなレンダリング作業のために遅いインタラクションをプロファイリングする場合は、パフォーマンス プロファイラの上部にある [Screenshots] チェックボックスをオンにする必要があります。これにより、ユーザー インターフェースの更新と、対応するメインスレッドのレンダリング処理を整合させることができます。

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

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

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

</ph> 重要: Chrome DevTools でタイムライン: イベント イニシエータのテストを有効にすると、トラブルシューティングが簡単になる場合があります。このテストを有効にすると、スタイル再計算タスクから、開始した JavaScript タスクに向けて矢印が描画されます。このテストを有効にするには、Chrome DevTools の設定に移動し、左側のメニューで [テスト] をクリックし、[タイムライン: イベント イニシエータ] チェックボックスをオンにして、DevTools を再起動します。

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

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

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

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

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

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

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

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

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