Web Performance

概要

このスキルは、Next.js App Router におけるパフォーマンス最適化の ベストプラクティスを提供します。Core Web Vitals の改善と ユーザー体験の向上を実現します。

核心哲学:

• Speed First: 初期ロードの最小化とインタラクション最適化
• Progressive Loading: 必要な時に必要なものだけを読み込む
• Measurable: 測定可能な指標に基づく最適化

主要な価値:

• Core Web Vitals（LCP、FID、CLS）の改善
• バンドルサイズの最適化
• ユーザー体験の向上

リソース構造

web-performance/
├── SKILL.md                                    # 本ファイル（概要とワークフロー）
├── resources/
│   ├── dynamic-import.md                       # 動的インポートガイド
│   ├── image-optimization.md                   # 画像最適化ガイド
│   ├── font-optimization.md                    # フォント最適化ガイド
│   └── code-splitting.md                       # Code Splittingガイド
├── scripts/
│   └── analyze-bundle.mjs                      # バンドル分析スクリプト
└── templates/
    ├── dynamic-import-template.md              # 動的インポートテンプレート
    └── image-component-template.md             # 画像コンポーネントテンプレート

コマンドリファレンス

リソース読み取り

# 動的インポートガイド
cat .claude/skills/web-performance/resources/dynamic-import.md

# 画像最適化ガイド
cat .claude/skills/web-performance/resources/image-optimization.md

# フォント最適化ガイド
cat .claude/skills/web-performance/resources/font-optimization.md

# Code Splittingガイド
cat .claude/skills/web-performance/resources/code-splitting.md

スクリプト実行

# バンドル分析
node .claude/skills/web-performance/scripts/analyze-bundle.mjs <build-output-dir>

テンプレート参照

# 動的インポートテンプレート
cat .claude/skills/web-performance/templates/dynamic-import-template.md

# 画像コンポーネントテンプレート
cat .claude/skills/web-performance/templates/image-component-template.md

いつ使うか

シナリオ 1: 初期ロード最適化

状況: ページの初期読み込みが遅い

適用条件:

• LCP が 2.5 秒を超えている
• バンドルサイズが大きい
• 不要な JavaScript が初期ロードに含まれている

期待される成果: LCP の改善、TTFB の短縮

シナリオ 2: インタラクション最適化

状況: ユーザー操作への応答が遅い

適用条件:

• FID/INP が 100ms を超えている
• 重いコンポーネントがある
• サードパーティスクリプトが多い

期待される成果: インタラクション応答性の向上

シナリオ 3: 視覚的安定性

状況: ページ読み込み時にレイアウトがずれる

適用条件:

• CLS が 0.1 を超えている
• 画像サイズが未指定
• フォントが FOUT を引き起こしている

期待される成果: 視覚的安定性の向上

知識領域

領域 1: 動的インポート

next/dynamic:

import dynamic from "next/dynamic";

const HeavyComponent = dynamic(() => import("./HeavyComponent"), {
  loading: () => <Skeleton />,
  ssr: false, // クライアントのみ
});

React.lazy（Client Components 内）:

"use client";
import { lazy, Suspense } from "react";

const LazyComponent = lazy(() => import("./LazyComponent"));

詳細は: resources/dynamic-import.md を参照

領域 2: 画像最適化

next/image:

import Image from "next/image";

<Image
  src="/image.jpg"
  alt="説明"
  width={800}
  height={600}
  priority // LCP画像の場合
  placeholder="blur"
/>;

詳細は: resources/image-optimization.md を参照

領域 3: フォント最適化

next/font:

import { Inter } from "next/font/google";

const inter = Inter({
  subsets: ["latin"],
  display: "swap",
});

詳細は: resources/font-optimization.md を参照

領域 4: Code Splitting

ルートベース分割（自動）:

• App Router は各ルートを自動的に分割
• Layout は共有、Page は個別バンドル

コンポーネントベース分割:

• 条件付きコンポーネントを dynamic import で分割
• モーダル、ドロワー、タブコンテンツなど

詳細は: resources/code-splitting.md を参照

ワークフロー

Phase 1: 測定

1. Lighthouse でベースラインを測定
2. Core Web Vitals を記録
3. バンドルサイズを分析

Phase 2: 分析

1. ボトルネックを特定
2. 優先順位を決定
3. 改善計画を策定

Phase 3: 最適化

1. 画像/フォント最適化
2. 動的インポート適用
3. Code Splitting 実装

Phase 4: 検証

1. Lighthouse で再測定
2. 改善効果を確認
3. 回帰テスト実施

Phase 5: 監視

1. Real User Monitoring 設定
2. パフォーマンスバジェット設定
3. 継続的な監視

設計原則

遅延読み込みの原則

Above the Fold（ファーストビュー）以外は遅延読み込みを検討する。

優先度の原則

LCP 要素にはpriorityを設定し、その他は遅延読み込みする。

測定の原則

最適化前後で必ず測定し、効果を検証する。

予算の原則

パフォーマンスバジェットを設定し、超過を監視する。

Core Web Vitals 目標値

指標	良好	改善が必要	不良
LCP	≤2.5s	≤4.0s	>4.0s
FID	≤100ms	≤300ms	>300ms
INP	≤200ms	≤500ms	>500ms
CLS	≤0.1	≤0.25	>0.25

関連スキル

• .claude/skills/nextjs-app-router/SKILL.md - ルーティング構造
• .claude/skills/server-components-patterns/SKILL.md - データフェッチ最適化
• .claude/skills/seo-optimization/SKILL.md - SEO 最適化

変更履歴

バージョン	日付	変更内容
1.0.0	2025-11-25	初版リリース