perf-web-optimization

Web パフォーマンスの最適化

体系的なアプローチ：測定 → 問題の特定 → 優先順位付け → 実装 → 検証。

目標指標

指標	良好	要改善	不良
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

すぐにできる改善

1. 画像（通常、LCP への影響が最も大きい項目）

<img src="/hero.webp" alt="Hero" width="1200" height="600" loading="eager" fetchpriority="high" decoding="async" />


<img src="/product.webp" alt="Product" width="400" height="300" loading="lazy" decoding="async" />

CLS を防ぐため、必ず width と height を設定してください。

2. フォント（LCP／CLS のよくある原因）

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />


<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Inter&display=swap"
  media="print"
  onload="this.media='all'"
/>

3. サードパーティスクリプト（INP を悪化させるよくある原因）

<script>
  function loadThirdParty() {
    // Load analytics, chat widgets, etc.
  }
  ;['scroll', 'click', 'touchstart'].forEach((e) => addEventListener(e, loadThirdParty, { once: true, passive: true }))
  setTimeout(loadThirdParty, 5000)
</script>

4. クリティカル CSS

クリティカル CSS を <head> 内にインライン化し、残りは遅延読み込みします。

<style>
  /* critical styles */
</style>
<link rel="preload" href="/styles.css" as="style" onload="this.rel='stylesheet'" />

バンドル分析

# Webpack
npx webpack-bundle-analyzer dist/stats.json

# Vite
npx vite-bundle-visualizer

# Check package size before installing
npx bundlephobia <package-name>

置き換えを検討する、サイズの大きい一般的なパッケージ：

• moment（67KB）→ date-fns（12KB）または dayjs（2KB）
• lodash（72KB）→ 必要なものだけをインポートするか、ネイティブメソッドを使用

コード分割パターン

// React lazy
const Chart = lazy(() => import('./Chart'))

// Next.js dynamic
const Admin = dynamic(() => import('./Admin'), { ssr: false })

// Vite/Rollup manual chunks
build: {
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: ['react', 'react-dom']
      }
    }
  }
}

キャッシュヘッダー

# Static assets (immutable hash in filename)
Cache-Control: public, max-age=31536000, immutable

# HTML (revalidate)
Cache-Control: no-cache

# API responses
Cache-Control: private, max-age=0, must-revalidate

測定

監査の実行、レポートの確認、予算の設定には、perf-lighthouse スキルを使用してください。

チェックリスト

画像

• 最新の形式（WebP／AVIF）
• レスポンシブな srcset
• width／height 属性
• ファーストビューより下では loading="lazy"
• LCP 画像に fetchpriority="high"

JavaScript

• バンドルサイズが gzip 圧縮後 200KB 未満
• ルートごとにコードを分割
• サードパーティスクリプトを遅延読み込み
• 未使用の依存関係がない

CSS

• クリティカル CSS をインライン化
• クリティカルでない CSS を遅延読み込み
• 未使用の CSS がない

フォント

• font-display: swap
• フォントのオリジンに事前接続
• 可能であればサブセット化

詳細な例

詳細な最適化パターンについては、以下を参照してください。

• references/core-web-vitals.md - LCP、CLS、INP の問題の修正
• references/bundle-optimization.md - JS バンドルサイズの削減
• references/image-optimization.md - 画像形式、レスポンシブ画像、sharp スクリプト