profiling-performance

パフォーマンスプロファイル

Web アプリケーションの動作が遅い、ぎくしゃくする、または応答しないと感じるときに、このスキルを使用します。Cursor に組み込まれたブラウザーには、実際のコールスタックとタイミングデータを取得する CPU プロファイリングツールがあります。

仕組み

cursor-ide-browser MCP は、Chrome DevTools 形式の CPU プロファイルを取得する browser_profile_start ツールと browser_profile_stop ツールを提供します。プロファイルデータは ~/.cursor/browser-logs/ に、未加工の JSON と人が読みやすい概要の両方で書き込まれます。

手順

1. アプリケーションが実行中であることを確認します — まだ実行されていない場合は、開発サーバーを起動します。

2. 動作が遅いページに移動します：

   Tool: browser_navigate
   Arguments: { "url": "http://localhost:3000/slow-page" }
   

3. プロファイリングを開始します：

   Tool: browser_profile_start
   

4. 動作が遅い操作を再現します — ブラウザーツールを使用して、遅い動作を引き起こします：

   • ボタンのクリック、スクロール、入力欄への入力、ページ間の移動を行います
   • browser_click、browser_scroll、browser_fill を使用して操作します
   • 操作が完了するまで数秒待ちます

5. プロファイリングを停止します：

   Tool: browser_profile_stop
   

   次の 2 つのファイルが ~/.cursor/browser-logs/ に書き込まれます：

   • cpu-profile-{timestamp}.json — 未加工の Chrome DevTools プロファイル
   • cpu-profile-{timestamp}-summary.md — 人が読みやすい概要

6. 結果を分析します — 両方のファイルを読みます。未加工の JSON では、次の項目を確認します：

   • profile.nodes[].hitCount — 各関数に到達したサンプル数
   • profile.nodes[].callFrame.functionName — 関数名
   • profile.samples.length — 収集されたサンプルの総数

   概要と照らし合わせ、次の項目を特定します：

   • CPU 時間を最も多く消費している関数
   • 予期しない再レンダリングやレイアウトの過剰な再計算
   • コストの高いサードパーティライブラリの呼び出し
   • メインスレッドをブロックしている同期処理

7. 修正を提案します — プロファイルデータに基づいて、具体的な最適化を提案します：

   • コストの高い計算結果をメモ化する
   • 頻繁に発生するイベントハンドラーにデバウンスを適用する
   • 負荷の高い処理を Web Worker に移す
   • コンポーネントやルートを遅延読み込みする
   • 長いリストを仮想化する

注意事項

• 概要を確認するため、必ず未加工の .json プロファイルも読みます。概要では細かな点が見落とされる場合があります。
• まず開発モードでプロファイリングします。ただし、React の開発モードではオーバーヘッドが増加する点に注意してください。正確に測定するには、本番ビルドをプロファイリングしてください。
• 長時間のプロファイルより、短時間（操作時間が 2～5 秒）のプロファイルのほうが通常は役立ちます。
• 最適化の効果を検証するため、最適化の前後でプロファイルを比較します。