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

ユーザー操作を妨げるコストのかかる作業を診断する方法を学習します。

Addy Osmani 氏

タスクに時間がかかると、メインスレッドがビジー状態で、ユーザーの操作が遅れる可能性があります。Chrome DevTools で時間のかかるタスクを可視化できるようになり、最適化するタスクを簡単に確認できるようになりました。

Lighthouse を使用してページを監査している方なら、操作可能になるまでの時間という指標をご存じかもしれません。これは、ユーザーがページを操作してレスポンスが得られるまでの時間を示す指標です。しかし、長時間（JavaScript）タスクが TTI の低下に大きく寄与していることをご存じですか？

長時間のタスクとは

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

ウェブページの読み込み中に、長時間のタスクがメインスレッドを接続し、準備ができているように見えても、ページがユーザー入力に応答しなくなることがあります。イベント リスナーやクリック ハンドラなどがまだアタッチされていないため、クリックとタップが動作しないことがよくあります。

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

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

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

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

• ウェブページを読み込む際の [パフォーマンス] パネルでトレースを記録します。
• メインスレッド ビューで赤い旗を探します。タスクがグレー表示になります。
• バーにカーソルを合わせると、タスクの所要時間と「長い」と見なされたかどうかがわかります。

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

長時間のタスクの原因を見つけるには、灰色のタスクバーを選択します。その下のドロワーで、[Bottom-Up] と [Group by Activity] を選択します。これにより、どのアクティビティが完了に時間がかかっているかを確認できます。以下は、コストのかかる一連の DOM クエリです。

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

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

すべての作業を小さなチャンク（実行時間は 50 ミリ秒未満）に分割し、これらのチャンクを適切な場所とタイミングで実行します。適切な場所は、ワーカー内のメインスレッドから外れることもあります。Phil Walton の『Idle While Urgent』は、このトピックに関する参考書です。長いタスクを管理および分割するための一般的な戦略については、長いタスクの最適化に関する記事もご覧ください。

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