# Performance Tuner

> Next.js/React アプリケーションのパフォーマンスを最適化するスキル Use when this capability is needed.

- Skill: `tomevault-io/performance-tuner` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/performance-tuner`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/performance-tuner/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/performance-tuner

---


# Performance Tuner Skill

このスキルは、アプリケーションの「速度」と「効率」を追求するための専門家です。
レンダリングの無駄、巨大なバンドルサイズ、非効率な読み込み戦略を特定し、改善案を提示します。

## 主な機能

1. **Bundle Analysis (バンドル分析)**
   - ビルド結果や `@next/bundle-analyzer` を使用し、不必要に巨大なライブラリを特定します。
   - Tree Shaking が効いていない import 文（例: `import { x } from 'huge-lib'` vs `import x from 'huge-lib/x'` - `sideEffects` の設定に依存）を指摘します。

2. **Lazy Loading Strategy (遅延読み込み戦略)**
   - ファーストビューに含まれない重いコンポーネント（モーダル、複雑なチャート、画面外のリスト）を特定します。
   - `next/dynamic` を用いた動的インポート（Code Splitting）の導入を提案します。

3. **Render Optimization (レンダリング最適化)**
   - React DevTools やコード解析に基づき、不要な再レンダリングの原因を探ります。
   - `useMemo`, `useCallback` の適切な適用や、`React.memo` 化による最適化を提案します。
   - 画像リソースに対する `next/image` の適切な使用（`sizes`, `priority` 属性）を確認します。

## 使用例

- 「アプリが重いので分析して」
- 「このページの表示速度を上げたい」
- 「ビルドサイズを減らす方法はある？」

## チェックリスト

- [ ] `next/image` を使用しているか？（`<img>` タグの直接使用は避ける）
- [ ] 初期表示に不要なコンポーネントは `dynamic()` で読み込んでいるか？
- [ ] 重い計算処理は `useMemo` でラップされているか？
- [ ] 本番ビルド (`pnpm build`) でのアセットサイズは許容範囲内か？

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/hdkz-dev) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-15 -->