ある日、一つのウェブページのパフォーマンス改善をしていたのですが、コードを見ているだけでは時間がかかっていて原因が全くわかりませんでした。そこで、以前から使っていたChromeのDevToolsのパフォーマンスタブを試してみることにしました。すると、すぐにボトルネックが特定でき、原因が明らかに。パフォーマンスタブの便利さを改めて実感した瞬間でした。
パフォーマンスタブとは？
パフォーマンスタブは、ウェブアプリケーションのパフォーマンスを分析するために使用されるChrome DevToolsの機能です。このツールを使うと、
ページの読み込み時間を測定：どの部分で時間がかかっているのかを視覚的に確認。
アプリの応答性やレンダリング時間を追跡：スムーズに動作しているかどうかを分析。
パフォーマンスのボトルネックを検出：JavaScriptの実行時間、レイアウトの再計算、リソースの過剰使用などを特定。
私が使ったパフォーマンスタブの主な機能
パフォーマンス改善の過程で、特に役立ったパフォーマンスタブの機能は以下の通りです、
タイムライン: ページの活動を視覚的に確認でき、各操作がどれだけ時間を消費しているかを把握できます。
フレームチャート: JavaScriptの実行、スタイル再計算、レイアウト更新、ペイント処理などのタスクを詳細に分解し、非効率を見つけやすくします。
コールツリーとボトムアップビュー: リソースを多く消費する関数やプロセスを特定でき、パフォーマンスのボトルネックを効率的に解消する手助けをします。
タイムライン
パフォーマンスタブのタイムラインは、ウェブページ上で発生しているすべてのアクティビティを俯瞰できる機能です。パフォーマンスプロファイルを記録すると最初に表示され、アプリのどの部分が遅延を引き起こしているのかを特定する手助けをしてくれます。
タイムラインの主な特徴：
アクティビティの内訳: ロード、スクリプトの実行、レンダリング、ペイントといった操作が視覚的に表示されます。
色分け: 各アクティビティは特定の色で表され、タスクを簡単に識別できます（例：スクリプトは黄色、レンダリングは紫）。
ズームとパン: 特定の時間範囲をズームして問題箇所に集中したり、タイムライン全体をパンして全体の流れを把握できます。
例えば、アプリの読み込みが遅い場合、タイムラインを使えば、JavaScriptの実行、ネットワーク遅延、レンダリングの非効率といった原因を特定することができます。
フレームチャート(Flame Chart)📊
パフォーマンスタブのフレームチャートは、ウェブページのタスクとその実行時間を詳細に表示する高度なツールです。実行中のコールスタックを時間軸に沿って視覚化し、遅延やボトルネックがどこで発生しているのかを特定することができます。
フレームチャートの主な特徴：
階層的な表現: 各水平バーは関数呼び出しを表し、バーの長さがその関数の実行時間を示します。ネストされたバーは子関数呼び出しを示し、呼び出しの階層構造を理解するのに役立ちます。
色分け:
異なる種類のアクティビティは色分けされており、特定のプロセスを識別しやすくなっています。
黄色: JavaScriptの実行
紫: レンダリング（スタイル計算やレイアウト、ペイントなど）
青: ネットワークリクエスト
緑: サーバー応答や外部リソースの取得
詳細情報の表示:
バーにカーソルを合わせると、関数名、ファイル名、実行時間などの詳細情報が表示されます。これにより、どのコード部分が遅延を引き起こしているのかを迅速に特定できます。
ズームとフォーカス:
特定の時間範囲にズームして、問題のある箇所に焦点を当てることができます。これにより、予想以上に時間がかかっている個別のタスクや関数を特定できます。
コールツリーとボトムアップビュ
パフォーマンスタブのボトムアップビューは、関数やプロセスのパフォーマンスを、実行時間に基づいて分析するための機能です。コールツリー表示が呼び出し階層を示すのに対し、ボトムアップビューは最も多くの時間を消費した関数に焦点を当て、コールスタック内での位置に関係なくパフォーマンスを評価します。
ボトムアップビューの主な特徴：
時間を消費する関数に焦点: このビューでは、実行時間が多い順に関数がリストアップされ、最もリソースを消費した関数が上位に表示されます。
集計された時間: 各関数とその子関数（ネストされた関数呼び出し）の合計実行時間が表示されます。これにより、最も大きなパフォーマンスボトルネックを特定できます。
効率的な分析: ボトムアップビューは、タイムラインやフレームチャートでは直接見えない深い階層にある関数や、過剰にリソースを消費している関数を特定するのに役立ちます。
詳細情報の表示: フレームチャートと同様に、関数にカーソルを合わせると、その関数名やファイル名、実行時間などの詳細情報を確認できます。
最後の考え💡
Chrome DevTools、特にパフォーマンスタブを活用することは、ウェブアプリケーションの最適化において大きな効果を発揮します。タイムライン、フレームチャート、ボトムアップビューを分析することで、通常では見逃しがちなパフォーマンスのボトルネックを迅速に特定し、解決することができます。小さなウェブサイトから複雑なSaaSアプリケーションまで、これらのツールはロード時間や応答性、全体的なユーザーエクスペリエンスを向上させるための貴重な洞察を提供します。
References
Chrome DevTools official Docs
Discussion