mcpField
P
performance-optimizer

performance-optimizer

github.com/oakoss開発21118 回インストール12 週間前に更新
リポジトリ

performance-optimizer について

performance-optimizerは、フロントエンド、バックエンド、データベースを対象に、計測に基づくアプリケーション性能改善の方法を示すスキルです。遅延やスケーリングの問題を調査する開発者向けに、プロファイリング、キャッシュ、監視を扱います。

主な機能

  1. 01性能予算と目標指標
  2. 02プロファイリングとボトルネック特定
  3. 03データベースクエリ最適化の指針
  4. 04各層のキャッシュ戦略
  5. 05フロントエンドとバックエンドの改善段階
  6. 06監視とアラートの指針

活用シーン

  1. 01ページ読み込みの遅さを調査
  2. 02APIの高レイテンシを診断
  3. 03データベースクエリのボトルネックを特定
  4. 04性能監視とアラートを計画

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/oakoss/agent-skills --skill performance-optimizer

インストール後、Claude Code で/performance-optimizerを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
backend.md
caching.md
database.md
frontend.md
monitoring.md
profiling.md

詳細

パフォーマンス最適化

概要

スタック全体にわたるアプリケーションのパフォーマンス最適化に、体系的なアプローチを提供します。ページの読み込みが遅い場合、API のレイテンシが高い場合、データベースにボトルネックがある場合、またはスケーリングに問題がある場合に使用してください。アプリケーション固有のプロファイリングの代わりにはなりません。最適化の前に、必ず測定してください。

クイックリファレンス

パフォーマンス予算
指標目標カテゴリー
Largest Contentful Paint（LCP）< 2.5sCore Web Vital
Interaction to Next Paint（INP）< 200msCore Web Vital
Cumulative Layout Shift（CLS）< 0.1Core Web Vital
First Contentful Paint（FCP）< 1.8sフロントエンド
Time to Interactive（TTI）< 3.8sフロントエンド
Total Blocking Time（TBT）< 200msフロントエンド
API 応答時間（P95）< 500msバックエンド
データベースクエリ時間（P95）< 100msデータベース
サーバー応答時間（TTFB）< 600msバックエンド
最適化のフェーズ
フェーズ焦点主なアクション
1. プロファイリング実際のボトルネックを特定するChrome DevTools、React Profiler、EXPLAIN ANALYZE
2. データベース遅いクエリを解消する戦略的なインデックス、N+1 の修正、コネクションプーリング
3. キャッシュ重複した処理を減らすRedis、HTTP ヘッダー、静的アセット向け CDN
4. フロントエンドバンドルとレンダリング時間を短縮するバンドル分析、コード分割、リソースヒント、遅延読み込み
5. バックエンドAPI 応答を高速化するサーバーレス最適化、ストリーミング、条件付きリクエスト、キュー
6. モニタリングパフォーマンスを維持するAPM ツール、アラートしきい値、ダッシュボード
キャッシュレイヤー
レイヤー範囲期間
ブラウザーキャッシュHTTP ヘッダー静的アセット：1 年（immutable）、HTML：no-cache
CDNCloudflare、CloudFrontブラウザーと同じ。デプロイ時にパージ
アプリケーションRedis、Memcached可変（例：ユーザーデータは 1 時間）
データベースクエリキャッシュ自動

よくある誤り

誤り正しいパターン
プロファイリング前に最適化するChrome DevTools、EXPLAIN ANALYZE、または APM ツールで最初に測定し、実際のボトルネックを特定します
すべてのカラムにインデックスを追加するWHERE、ORDER BY、JOIN 句のカラムに戦略的にインデックスを設定し、スロークエリログで監視します
大きなテーブルで SELECT * を使う必要なカラムのみを選択して、I/O とメモリ使用量を削減します
ループ内で N+1 クエリを実行するイーガーローディングまたは DataLoader によるバッチ処理を使います
WHERE 句内で関数を使う正規化した値を保存し、生成列を使ってインデックスの利用を維持します
無効化戦略なしでキャッシュするTTL と書き込み時の無効化ポリシーを定義します。古いキャッシュはキャッシュがない状態よりも悪影響があります
単一のユーティリティのためにライブラリ全体を読み込む直接インポートとツリーシェイキングを使います
リクエストハンドラー内で重い計算を同期的に実行するバックグラウンドジョブキュー（BullMQ）に委譲し、すぐに応答します

委譲

パフォーマンス最適化に取り組む際は、以下に委譲してください。

  • frontend-builder -- React 固有のパフォーマンスパターン
  • application-security -- レート制限と DDoS 対策
  • ci-cd-architecture -- ビルドパイプラインの最適化

参考資料

コメント

Markdown 対応