パフォーマンス計測をClaudeと分析する

パフォーマンスの問題は「計測はできたけど、何をどう直せばいいか分からない」という壁にぶつかりがちです。LighthouseやNode.jsプロファイラが出力するレポートをClaudeに渡すことで、その分析と改善策の立案を一気に加速できます。

LighthouseのJSONレポートをそのまま貼り付ける

Lighthouseは--output jsonオプションでレポートをJSON形式で出力できます。

npx lighthouse https://example.com --output json --output-path ./report.json --chrome-flags="--headless"

生成されたreport.jsonの中からcategoriesとauditsセクションを抜き出し、Claudeに次のように渡しましょう。

以下はLighthouseのレポートです。スコアが低い項目を優先度順に整理して、
具体的な改善策をコード例とともに教えてください。

[report.jsonの内容をここに貼り付け]

Claudeはスコアの数値だけでなく、diagnosticsに含まれる詳細データも読み取り、「render-blocking resourcesを解消するために<link rel="preload">を使う」といった実装レベルの提案を返してくれます。

Node.jsプロファイルのフレームグラフを文字データで渡す

Node.jsでCPUプロファイルを取得するには--profフラグを使います。

node --prof app.js
node --prof-process isolate-*.log > profile.txt

生成されたprofile.txtをそのままコピーしてClaudeに貼り付け、「どの関数がボトルネックになっているか教えてください」と聞くだけでOKです。フレームグラフのテキスト表現からホットパスを読み取り、「JSON.parseが全体の40%を占めています。キャッシュ戦略の導入を検討してください」のように具体的なアドバイスを得られます。

※キャッシュ: 一度取得したデータを一時的に保存しておき、同じリクエストへの応答を速くする仕組み。

改善前後の差分をClaudeに検証させる

改善施策を実装したら、再度レポートを取得して前後のJSONを両方Claudeに渡しましょう。「改善前と改善後のレポートを比較して、効果があった項目とまだ残っている課題を教えてください」と聞くことで、取り組みの効果を定量的に評価できます。数値の読み比べに時間をかけるよりも、次の改善サイクルにすぐ移れるのが大きなメリットです。

計測→Claudeで分析→実装→再計測のループを回すことで、パフォーマンス改善をより高速に進めていきましょう。