長時間のタスクとは、メインスレッドを長時間独占し、UI を「フリーズ」させる JavaScript コードです。
ページの読み込み中に長時間タスクがメインスレッドを占有すると、ページが準備完了に見えても、ユーザー入力に応答しなくなる可能性があります。イベント リスナーやクリック ハンドラなどのインタラクティブ機能が UI 要素にまだ接続されていないため、クリックやタップが機能しないことがよくあります。このため、長いタスクは操作可能になるまでの時間を大幅に増やす可能性があります。
Chrome DevTools で長時間タスクを可視化できるようになりました。これにより、最適化が必要なタスクを簡単に確認できます。
長時間タスクと見なされるもの
CPU 使用率の高い長いタスクは、50 ms を超える複雑な処理によって発生します。RAIL モデルでは、ユーザー入力イベントを 50 ms で処理し、100 ms 以内に目に見えるレスポンスを確保して、アクションとレアクションの間の接続を維持することを推奨しています。
重要なポイント: RAIL モデルでは、ユーザー入力に対して 100 ミリ秒以内に視覚的なレスポンスを提供することを推奨していますが、Interaction to Next Paint（INP）指標のしきい値では、特に低速デバイス向けに、より達成可能な期待値を設定するために最大 200 ミリ秒まで許容されています。
ページに、インタラクティビティの遅延につながる Long Task はありますか？
これまでは、Chrome DevTools で長さが 50 ミリ秒を超えるスクリプトの「長い黄色のブロック」を手動で探すか、Long Tasks API を使用して、インタラクティビティの遅延を引き起こしているタスクを特定する必要がありました。
パフォーマンス監査ワークフローを容易にするため、DevTools で長時間タスクを可視化できるようになりました。タスク（グレーで表示）が長いタスクの場合は、赤い旗が表示されます。
新しいビジュアリゼーション ツールを使用するには:
- ウェブページの読み込みの [パフォーマンス パネル] でトレースを記録します。
- メインスレッドビューで赤いフラグを確認します。タスクがグレーで表示され、[タスク] というラベルが付きます。
- グレーのバーにポインタを合わせます。タスクの所要時間と、長いタスクと見なされるかどうかを示すダイアログが表示されます。
長時間タスクの原因は何ですか？
タスクの長さの原因を確認するには、灰色の [タスク] バーを選択します。下部の引き出しで、[ボトムアップ] と [アクティビティ別にグループ化] を選択します。これにより、タスクの完了に時間がかかった原因となったアクティビティを（合計で）確認できます。次の例では、遅延の原因はコストの高い DOM クエリセットのようです。
長時間タスクを最適化する一般的な方法は何ですか？
長いタスクの主な原因は、多くの場合、サイズの大きいスクリプトです。分割することを検討してください。また、サードパーティ スクリプトにも注意してください。サードパーティ スクリプトには、メイン コンテンツのインタラクティブ化を遅らせる Long Task が含まれていることもあります。
すべての作業を 50 ミリ秒未満で実行できるチャンクに分割し、これらのチャンクを適切な場所とタイミングで実行します。一部の処理は、メインスレッドではなく、サービス ワーカーで行う方が適切な場合があります。長いタスクを分割する方法については、長いタスクを最適化すると Phil Walton の Idle Until Urgent をご覧ください。
ページの応答性を維持します。長時間のタスクを最小限に抑えることは、ユーザーがサイトにアクセスしたときに快適なエクスペリエンスを提供するための優れた方法です。長時間タスクの詳細については、ユーザー中心のパフォーマンス指標をご覧ください。