JavaScript タスクが長いと操作可能になるまでの時間が長くなっていませんか？

Addy Osmani

長時間タスクとは、メインスレッドを長時間独占して UI を「フリーズ」させる JavaScript コードです。

ページの読み込み中に、長いタスクがメインスレッドをタイピングして、ページがユーザー入力に応答しなくなることがあります（準備ができているように見えても）。多くの場合、クリックとタップは、イベント リスナーやクリック ハンドラなどのインタラクティブ機能が UI 要素にアタッチされていないため、機能しません。このため、長時間のタスクでは操作可能になるまでの時間が大幅に長くなる可能性があります。

TTI が低いことを示す Lighthouse のレポート

Chrome DevTools で Long Tasks を可視化できるようになり、最適化が必要なタスクを簡単に確認できるようになりました。

長時間のタスクと見なされるもの

CPU 負荷の高い長時間タスクは、50 ミリ秒を超える複雑な処理が原因で発生します。RAIL モデルでは、ユーザー入力イベントを 50 ミリ秒で処理し、レスポンスを 100 ミリ秒以内に表示し、アクションとリアクションのつながりを維持することが推奨されています。

重要なポイント: RAIL モデルでは、ユーザー入力に対する視覚的レスポンスを 100 ミリ秒以内に推奨していますが、Interaction to Next Paint（INP）指標のしきい値は最大 200 ミリ秒で、特に低速なデバイスの場合、より多くの期待値を設定できます。

インタラクティビティを遅延させる可能性のある長時間のタスクがページ内にありますか？

これまでは、Chrome DevTools で 50 ミリ秒を超えるスクリプトの「黄色の長いブロック」を手動で探すか、Long Tasks API を使用して、インタラクティビティを遅延させているタスクを特定する必要がありました。

黄色のバーはタスクの長さを示します。

パフォーマンス監査ワークフローを容易にするために、DevTools で長いタスクが可視化されるようになりました。時間のかかるタスクの場合、赤いフラグが付いたタスク（グレーで表示）が表示されます。

新しい可視化ツールを使用するには:

1. ウェブページを読み込む際の [パフォーマンス] パネルでトレースを記録します。
2. メインスレッド ビューで赤い旗を探します。タスクがグレー表示され、[Task] というラベルが付くはずです。
3. グレーのバーの上にポインタを置きます。タスクの所要時間と、長時間タスクであるかどうかを示すダイアログが表示されます。

長時間のタスクの原因は？

時間のかかるタスクの原因を特定するには、灰色の [タスク] バーを選択します。その下のドロワーで、[Bottom-Up] と [Group by Activity] を選択します。これにより、完了までに時間がかかっているタスクに最も貢献したアクティビティ（合計）を確認できます。次の例では、遅延の原因は高コストの DOM クエリのセットであると考えられます。

DevTools では、このメニューに長時間タスクの原因が表示されます。

時間のかかるタスクを最適化する一般的な方法は何ですか？

大規模なスクリプトが長時間タスクの主な原因になることがよくあります。分割を検討してください。サードパーティのスクリプトにも注意してください。これには、主要なコンテンツがインタラクティブになるのを遅らせる長いタスクが含まれることもあります。

すべての作業を 50 ミリ秒未満で実行されるチャンクに分割し、これらのチャンクを適切な場所とタイミングで実行します。そのような処理の適切な場所は、Service Worker のメインスレッド外の場合があります。時間のかかるタスクを分割する方法については、長いタスクを最適化すると Phil Walton の Idle While Urgent をご覧ください。

ページの応答性を保ちましょう。サイトにアクセスするユーザーに快適なエクスペリエンスを提供するには、時間のかかるタスクを最小限に抑えることをおすすめします。長時間タスクの詳細については、ユーザー中心のパフォーマンス指標をご覧ください。