optimizing-performance

パフォーマンスの最適化

読み込むタイミング

• 対象：遅延の診断、プロファイリング、キャッシュ戦略、読み込み時間の短縮、バンドルサイズの最適化
• 対象外：パフォーマンスが問題にならない、正確性に重点を置いた作業

パフォーマンス最適化のワークフロー

このチェックリストをコピーして、進捗を記録してください。

Performance Optimization Progress:
- [ ] Step 1: Measure baseline performance
- [ ] Step 2: Identify bottlenecks
- [ ] Step 3: Apply targeted optimizations
- [ ] Step 4: Measure again and compare
- [ ] Step 5: Repeat if targets not met

重要なルール：データなしで最適化しないでください。変更の前後に必ずプロファイリングを行ってください。

ステップ 1：ベースラインを測定する

プロファイリングコマンド

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

# Python profiling
python -m cProfile -o profile.stats app.py
python -m pstats profile.stats

# Web performance
lighthouse https://example.com --output=json

ステップ 2：ボトルネックを特定する

一般的なボトルネックのカテゴリ

カテゴリ	症状	ツール
CPU	CPU 使用率が高い、計算が遅い	プロファイラー、フレームグラフ
メモリ	RAM 使用量が多い、GC の一時停止、OOM	ヒープスナップショット、メモリプロファイラー
I/O	ディスク／ネットワークが遅い、待機	strace、ネットワークインスペクター
データベース	クエリが遅い、ロック競合	クエリアナライザー、EXPLAIN

ステップ 3：最適化を適用する

フロントエンドの最適化

バンドルサイズ：

// ❌ Import entire library
import _ from "lodash";

// ✅ Import only needed functions
import debounce from "lodash/debounce";

// ✅ Use dynamic imports for code splitting
const HeavyComponent = lazy(() => import("./HeavyComponent"));

レンダリング：

// ❌ Render on every parent update
function Child({ data }) {
  return <ExpensiveComponent data={data} />;
}

// ✅ Memoize when props don't change
const Child = memo(function Child({ data }) {
  return <ExpensiveComponent data={data} />;
});

// ✅ Use useMemo for expensive computations
const processed = useMemo(() => expensiveCalc(data), [data]);

画像：

<img src="large-image.jpg" />


<img
  src="image.webp"
  srcset="image-300.webp 300w, image-600.webp 600w"
  sizes="(max-width: 600px) 300px, 600px"
  width="600"
  height="400"
  alt="Description"
  loading="lazy"
  decoding="async"
/>

バックエンドの最適化

データベースクエリ：

-- ❌ N+1 Query Problem
SELECT * FROM users;
-- Then for each user:
SELECT * FROM orders WHERE user_id = ?;

-- ✅ Single query with JOIN
SELECT u.id, u.name, o.id AS order_id, o.total
FROM users u
LEFT JOIN orders o ON u.id = o.user_id;

-- ✅ Or use pagination
SELECT id, name FROM users WHERE id > :last_id ORDER BY id LIMIT 100;

キャッシュ戦略：

// Multi-layer caching
const getUser = async (id) => {
  // L1: In-memory cache (fastest)
  let user = memoryCache.get(`user:${id}`);
  if (user) return user;

  // L2: Redis cache (fast)
  user = await redis.get(`user:${id}`);
  if (user) {
    user = JSON.parse(user);
    memoryCache.set(`user:${id}`, user, 60);
    return user;
  }

  // L3: Database (slow)
  user = await db.users.findById(id);
  await redis.setex(`user:${id}`, 3600, JSON.stringify(user));
  memoryCache.set(`user:${id}`, user, 60);

  return user;
};

非同期処理：

// ❌ Blocking operation
app.post("/upload", async (req, res) => {
  await processVideo(req.file); // Takes 5 minutes
  res.send("Done");
});

// ✅ Queue for background processing
app.post("/upload", async (req, res) => {
  const jobId = await queue.add("processVideo", { file: req.file });
  res.status(202).send({ jobId, status: "processing" });
});

アルゴリズムの最適化

// ❌ O(n²) - nested loops
function findDuplicates(arr) {
  const duplicates = [];
  for (let i = 0; i < arr.length; i++) {
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[i] === arr[j]) duplicates.push(arr[i]);
    }
  }
  return duplicates;
}

// ✅ O(n) - hash map
function findDuplicates(arr) {
  const seen = new Set();
  const duplicates = new Set();
  for (const item of arr) {
    if (seen.has(item)) duplicates.add(item);
    seen.add(item);
  }
  return [...duplicates];
}

ステップ 4：再度測定する

最適化を適用した後、プロファイリングを再実行して比較します。

Comparison Checklist:
- [ ] Run same profiling tools as baseline
- [ ] Compare metrics before vs after
- [ ] Verify no regressions in other areas
- [ ] Document improvement percentages

パフォーマンス目標

Web Vitals

指標	良好	要改善	不良
LCP	< 2.5s	2.5-4s	> 4s
INP	< 200ms	200-500ms	> 500ms
CLS	< 0.1	0.1-0.25	> 0.25
TTFB	< 800ms	800ms-1.8s	> 1.8s

API のパフォーマンス

指標	目標
P50 レイテンシ	< 100ms
P95 レイテンシ	< 500ms
P99 レイテンシ	< 1s
エラー率	< 0.1%

検証

最適化の後、結果を検証します。

Performance Validation:
- [ ] Metrics improved from baseline
- [ ] No functionality regressions
- [ ] No new errors introduced
- [ ] Changes are sustainable (not one-time fixes)
- [ ] Performance gains documented

目標を達成できていない場合は、ステップ 2 に戻り、残りのボトルネックを特定してください。