auditing-performance

パフォーマンス監査

ユーザーがパフォーマンスの最適化、読み込み時間の短縮、ページの遅さの解消、または Core Web Vitals の監査を求めた場合に、このスキルを使用します。

手順

1. バンドルサイズを分析する

   • npx @next/bundle-analyzer（Next.js）または npx vite-bundle-visualizer（Vite）を実行し、サイズの大きい依存関係を特定します。
   • より軽量な代替手段に置き換えられる大規模なライブラリを探します（例：moment → date-fns、lodash → 個別のインポートまたはネイティブメソッド）。
   • バンドル内に重複した依存関係がないか確認します。
   • ツリーシェイキングが機能していることを確認します（バレルファイルからの再エクスポートによって未使用コードが取り込まれていないか確認します）。

2. レンダリングパフォーマンスを監査する

   • 不必要に再レンダリングされるコンポーネントを特定します。JSX の props 内でインラインのオブジェクト／配列／関数を作成していないか確認します。
   • useMemo を使うべき、レンダリングパス内の高コストな計算を確認します。
   • リストで適切な key props が使われていることを確認します（動的なリストでは配列インデックスを使わないでください）。
   • レイアウトスラッシング（ループ内で DOM のサイズを読み取った後、スタイルを書き込む処理）がないか確認します。

3. データ取得を確認する

   • リクエストのウォーターフォールを特定します。Promise.all で並列化できる、逐次的な API 呼び出しを確認します。
   • クライアントで取得しているデータのうち、サーバーで取得できるものがないか確認します。
   • 大規模なデータセットでページネーションが欠けていないか確認します。
   • API レスポンスで過剰にデータを取得していないことを確認します（クライアントが必要としないフィールドを返していないか確認します）。

4. データベースクエリを最適化する

   • N+1 クエリのパターンを探します（リスト内の各項目に対してクエリを実行する処理）。
   • WHERE、ORDER BY、JOIN 句で使用される列にインデックスが不足していないか確認します。
   • SELECT * の代わりに、特定の列を指定した SELECT を使用できるクエリを特定します。
   • コネクションプーリングが不足していないか確認します。

5. アセットを確認する

   • 画像に最新の形式（WebP／AVIF）が使われ、適切なサイズになっていることを確認します。
   • ファーストビュー以降の画像で loading="lazy" が不足していないか確認します。
   • フォントで font-display: swap が使われ、プリロードされていることを確認します。
   • レンダリングをブロックする CSS や JavaScript がないか確認します。

6. 推奨事項を作成する — 効果（高／中／低）に基づいて優先順位を付け、各項目の推定作業量を含む最適化案の一覧を作成します。

注意事項

• Lighthouse、WebPageTest、または DevTools のパフォーマンスタブを使い、測定可能な改善に注力します。
• 早まった最適化は避けてください。まずプロファイリングを行い、ボトルネックを最適化します。
• React アプリでは、React DevTools Profiler を使って処理の遅いコンポーネントを特定します。