performance-profiler

パフォーマンスプロファイラー

手順

パフォーマンスをプロファイリングする際は、次の手順に従います。

1. ボトルネックの種類を特定する：ネットワーク、レンダリング、メモリ、または計算
2. 最適化の前にベースラインを測定する
3. 適切なツールでプロファイリングする
4. 最適化を適用する
5. 改善を測定する

Web パフォーマンス

Core Web Vitals

# Lighthouse CLI
npx lighthouse https://yoursite.com --view

# With specific metrics
npx lighthouse https://yoursite.com --only-categories=performance

目標指標：

指標	良好	要改善	不良
LCP（Largest Contentful Paint）	< 2.5s	2.5-4s	> 4s
INP（Interaction to Next Paint）	< 200ms	200-500ms	> 500ms
CLS（Cumulative Layout Shift）	< 0.1	0.1-0.25	> 0.25

バンドルの分析

# Next.js
ANALYZE=true npm run build

# Webpack
npx webpack-bundle-analyzer stats.json

# Vite
npx vite-bundle-visualizer

React のパフォーマンス

React DevTools Profiler

1. React DevTools のブラウザー拡張機能をインストールします
2. DevTools を開き、Profiler タブを選択します
3. Record をクリックしてアプリを操作し、記録を停止します
4. フレームグラフを分析して、遅いコンポーネントを特定します

React の一般的な最適化

// 1. Memoize expensive components
const MemoizedList = React.memo(function List({ items }) {
  return items.map(item => <Item key={item.id} {...item} />);
});

// 2. Use useMemo for expensive calculations
const sortedItems = useMemo(() => {
  return [...items].sort((a, b) => a.name.localeCompare(b.name));
}, [items]);

// 3. Use useCallback for stable function references
const handleClick = useCallback((id: string) => {
  setSelected(id);
}, []);

// 4. Virtualize long lists
import { FixedSizeList } from 'react-window';

function VirtualList({ items }) {
  return (
    <FixedSizeList
      height={400}
      itemCount={items.length}
      itemSize={50}
      width="100%"
    >
      {({ index, style }) => (
        <div style={style}>{items[index].name}</div>
      )}
    </FixedSizeList>
  );
}

// 5. Lazy load components
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <HeavyComponent />
    </Suspense>
  );
}

Node.js のパフォーマンス

プロファイリング

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

# Heap snapshot
node --inspect app.js
# Then use Chrome DevTools Memory tab

# Clinic.js (comprehensive)
npx clinic doctor -- node app.js
npx clinic flame -- node app.js
npx clinic bubbleprof -- node app.js

メモリリークの検出

// Add to app for debugging
const used = process.memoryUsage();
console.log({
  heapUsed: `${Math.round(used.heapUsed / 1024 / 1024)} MB`,
  heapTotal: `${Math.round(used.heapTotal / 1024 / 1024)} MB`,
  external: `${Math.round(used.external / 1024 / 1024)} MB`,
});

データベースのパフォーマンス

-- PostgreSQL: Analyze slow queries
EXPLAIN ANALYZE SELECT * FROM users WHERE email = '[email protected]';

-- Find missing indexes
SELECT relname, seq_scan, idx_scan
FROM pg_stat_user_tables
WHERE seq_scan > idx_scan;

クエリの最適化

// Bad: N+1 query
const users = await db.user.findMany();
for (const user of users) {
  const posts = await db.post.findMany({ where: { userId: user.id } });
}

// Good: Single query with include
const users = await db.user.findMany({
  include: { posts: true }
});

// Good: Select only needed fields
const users = await db.user.findMany({
  select: { id: true, name: true, email: true }
});

すぐにできる対策のチェックリスト

• gzip/brotli 圧縮を有効にする
• キャッシュヘッダーを追加する
• 画像を遅延読み込みする（loading="lazy"）
• 外部ドメインに事前接続する
• 静的アセットに CDN を使用する
• JavaScript バンドルを最小化する
• 重要度の低い JS の読み込みを遅らせる
• 画像を最適化する（WebP、適切なサイズ）
• データベースのインデックスを追加する
• コネクションプーリングを使用する