Agently/Skill Store/パフォーマンス改善スキル
💻

パフォーマンス改善スキル

Webアプリケーションのパフォーマンスを計測・分析・改善するスキル。

codingby agently-team

パフォーマンス改善スキル


概要

Webアプリケーションのパフォーマンスを計測・分析・改善するスキル。

Core Web Vitals を中心に、ボトルネック特定から具体的な修正コードの提案まで行う。


発動条件

「遅い」「重い」「パフォーマンス」「表示速度」「Core Web Vitals」「LCP」「CLS」に関する相談を受けたとき。


改善サイクル

**計測 → 分析 → 改善 → 再計測** を必ず1セットで行う。

推測ではなくデータに基づいて判断する。


Core Web Vitals 基準値


| 指標 | 良好 | 改善が必要 | 不良 |

|------|------|-----------|------|

| LCP (Largest Contentful Paint) | ≤ 2.5s | ≤ 4.0s | > 4.0s |

| INP (Interaction to Next Paint) | ≤ 200ms | ≤ 500ms | > 500ms |

| CLS (Cumulative Layout Shift) | ≤ 0.1 | ≤ 0.25 | > 0.25 |


分析カテゴリ


1. レンダリング最適化

  • **LCP 改善**:

    • - ヒーロー画像: `` + 適切なフォーマット（WebP/AVIF）

    - Web フォント: `font-display: swap` + プリロード

    - サーバーレスポンス: TTFB 短縮（CDN、キャッシュ、DB最適化）

    - レンダリングブロック CSS/JS の排除

  • **CLS 改善**:

    • - 画像/動画に `width` / `height` 属性を明示

    - 動的コンテンツの挿入位置を固定

    - Web フォントの FOUT/FOIT 対策

    - `aspect-ratio` CSS プロパティの活用


    2. JavaScript 最適化

  • **バンドルサイズ削減**:

    • - `import { specific } from 'lib'` でツリーシェイキング有効化

    - 動的 import (`React.lazy`, `import()`) でコード分割

    - `bundle-analyzer` で巨大依存を特定

    - 軽量代替ライブラリの提案（moment→dayjs、lodash→lodash-es/個別import）

  • **実行時間短縮**:

    • - 重い計算は `requestIdleCallback` / Web Worker に移す

    - 長いタスクを `scheduler.yield()` で分割

    - 不要な再レンダリングの排除（React Profiler で計測）


    3. ネットワーク最適化

  • **リソース読み込み**:

    • - クリティカルリソース: `preload` / `preconnect`

    - 非クリティカル: `defer` / `async` / `loading="lazy"`

    - 画像: レスポンシブ (`srcset` + `sizes`)、次世代フォーマット

    - HTTP/2 or HTTP/3 の活用

  • **キャッシュ戦略**:

    • - 静的アセット: `Cache-Control: public, max-age=31536000, immutable`

    - HTML: `Cache-Control: no-cache`（常に再検証）

    - API レスポンス: `stale-while-revalidate` パターン

    - Service Worker によるオフラインキャッシュ


    4. React 固有の最適化

  • 不要な再レンダリング: `React.memo` / `useMemo` / `useCallback`
  • 仮想化: 大量リストは `@tanstack/react-virtual` で仮想スクロール
  • 状態管理: グローバル状態の粒度を細かくする
  • Suspense + lazy で非同期コンポーネントを分割
  • `startTransition` で優先度の低い更新を遅延

    • 5. サーバーサイド最適化

  • DB クエリ: N+1 問題の解消、インデックス追加
  • レスポンス圧縮: gzip / Brotli
  • CDN 活用: 静的アセットをエッジ配信
  • SSR / SSG の使い分け（動的→SSR、静的→SSG）

    • 計測ツール・コマンド


    ```bash

    Lighthouse CLI

    npx lighthouse https://example.com --output=json --output-path=./report.json


    バンドル分析（webpack）

    npx webpack-bundle-analyzer stats.json


    バンドル分析（Vite）

    npx vite-bundle-visualizer

    ```


    改善提案の出力ルール

  • 影響度（大/中/小）と実装コスト（高/中/低）を明記
  • 影響度が大きく実装コストが低いものから着手する
  • 具体的な修正コードを提示する
  • 改善前後の期待値を数値で示す

    • 出力フォーマット

    1. **現状分析**（指標の現在値と問題点）

    2. **ボトルネック一覧**（優先度順）

    3. **改善施策**（施策ごとに影響度・コスト・コード例）

    4. **計測方法**（改善後の確認手順）