パフォーマンス最適化

Lighthouse パフォーマンス監査に基づいた深いパフォーマンス最適化。読み込み速度、ランタイム効率、リソース最適化に焦点を当てています。

動作方法

1. コードとアセットのパフォーマンスボトルネックを特定
2. Core Web Vitals への影響で優先順位を付ける
3. コード例を用いた具体的な最適化を提供
4. before/after メトリクスで改善を測定

パフォーマンスバジェット

リソース	バジェット	根拠
総ページサイズ	< 1.5 MB	3G での読み込み約 4 秒
JavaScript (圧縮)	< 300 KB	パース + 実行時間
CSS (圧縮)	< 100 KB	レンダリングブロッキング
画像 (above-fold)	< 500 KB	LCP への影響
フォント	< 100 KB	FOIT/FOUT 防止
サードパーティ	< 200 KB	制御不可能なレイテンシ

クリティカルレンダリングパス

サーバーレスポンス

• TTFB < 800ms。 Time to First Byte は高速であるべき。CDN、キャッシング、効率的なバックエンドを使用してください。
• 圧縮を有効化。 テキストアセットに Gzip または Brotli を使用。Brotli が推奨 (15-20% 小さい)。
• HTTP/2 または HTTP/3。 マルチプレックスで接続オーバーヘッドを削減。
• エッジキャッシング。 可能な場合、HTML を CDN エッジでキャッシュ。
• 遅いオリジンに対して Early Hints (HTTP 103) を送信。 オリジンが最終レスポンスの組み立てに数百ミリ秒必要な場合、103 Early Hints と Link: </hero.webp>; rel=preload; as=image (重要な CSS/フォントにも同様) を返して、ブラウザが 200 OK の到着前にフェッチを開始できるようにします。Cloudflare は画像が多いページで 20–30% の LCP 改善を報告しています。HTTP/2+ が必要で、Chromium ベースのブラウザでサポートされています。他のブラウザは 103 を無視して 200 にフォールスルーするため、有効化しても安全です。CDN (Cloudflare、Fastly、Akamai) は以前のレスポンスから 103 を自動的に合成できます。自身のオリジン上では、200 を発行する同じハンドラーから 103 を送信してください。

リソース読み込み

必要なオリジンに preconnect:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://cdn.example.com" crossorigin>

クリティカルリソースを preload:

<!-- LCP 画像 -->
<link rel="preload" href="/hero.webp" as="image" fetchpriority="high">

<!-- クリティカルフォント -->
<link rel="preload" href="/font.woff2" as="font" type="font/woff2" crossorigin>

Speculation Rules API で次のナビゲーションをプレレンダー:

<script type="speculationrules">
{
  "prerender": [{
    "where": { "href_matches": "/*" },
    "eagerness": "moderate"
  }]
}
</script>

moderate は約 200ms のホバー後に動作します — 通常は意図と関連し、無駄はめったにありません。eagerness のトレードオフと必要な prerenderingchange ゲーティングの詳細については、core-web-vitals → LCP を参照してください。

重要でない CSS を遅延:

<!-- クリティカル CSS をインライン化 -->
<style>/* Above-fold スタイル */</style>

<!-- 非クリティカル CSS -->
<link rel="preload" href="/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/styles.css"></noscript>

JavaScript 最適化

必要でないスクリプトを遅延:

<!-- パーサーをブロック (回避) -->
<script src="/critical.js"></script>

<!-- 遅延 (推奨) -->
<script defer src="/app.js"></script>

<!-- 非同期 (独立したスクリプト用) -->
<script async src="/analytics.js"></script>

<!-- モジュール (デフォルトで遅延) -->
<script type="module" src="/app.mjs"></script>

コード分割パターン:

// ルートベースの分割
const Dashboard = lazy(() => import('./Dashboard'));

// コンポーネントベースの分割
const HeavyChart = lazy(() => import('./HeavyChart'));

// フィーチャーベースの分割
if (user.isPremium) {
  const PremiumFeatures = await import('./PremiumFeatures');
}

Tree shaking ベストプラクティス:

// ❌ ライブラリ全体をインポート
import _ from 'lodash';
_.debounce(fn, 300);

// ✅ 必要なもだけをインポート
import debounce from 'lodash/debounce';
debounce(fn, 300);

画像最適化

フォーマット選択

フォーマット	使用例	ブラウザ対応
AVIF	写真、最高の圧縮	92%+
WebP	写真、良い代替案	97%+
PNG	透明度付きのグラフィック	ユニバーサル
SVG	アイコン、ロゴ、イラスト	ユニバーサル

レスポンシブ画像

<picture>
  <!-- 最新ブラウザ用 AVIF -->
  <source 
    type="image/avif"
    srcset="hero-400.avif 400w,
            hero-800.avif 800w,
            hero-1200.avif 1200w"
    sizes="(max-width: 600px) 100vw, 50vw">
  
  <!-- WebP 代替案 -->
  <source 
    type="image/webp"
    srcset="hero-400.webp 400w,
            hero-800.webp 800w,
            hero-1200.webp 1200w"
    sizes="(max-width: 600px) 100vw, 50vw">
  
  <!-- JPEG 代替案 -->
  <img 
    src="hero-800.jpg"
    srcset="hero-400.jpg 400w,
            hero-800.jpg 800w,
            hero-1200.jpg 1200w"
    sizes="(max-width: 600px) 100vw, 50vw"
    width="1200" 
    height="600"
    alt="Hero image"
    loading="lazy"
    decoding="async">
</picture>

LCP 画像優先度

<!-- Above-fold LCP 画像: 即座読み込み、高優先度 -->
<img 
  src="hero.webp" 
  fetchpriority="high"
  loading="eager"
  decoding="sync"
  alt="Hero">

<!-- Below-fold 画像: 遅延読み込み -->
<img 
  src="product.webp" 
  loading="lazy"
  decoding="async"
  alt="Product">

フォント最適化

読み込み戦略

/* フォールバックとしてシステムフォントスタック */
body {
  font-family: 'Custom Font', -apple-system, BlinkMacSystemFont, 
               'Segoe UI', Roboto, sans-serif;
}

/* テキストの非表示を防止 */
@font-face {
  font-family: 'Custom Font';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap; /* またはオプション (非クリティカル) */
  font-weight: 400;
  font-style: normal;
  unicode-range: U+0000-00FF; /* ラテンにサブセット化 */
}

クリティカルフォントの preload

<link rel="preload" href="/fonts/heading.woff2" as="font" type="font/woff2" crossorigin>

バリアブルフォント

/* 複数のウェイトではなく 1 ファイル */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

キャッシング戦略

Cache-Control ヘッダー

# HTML (短い、またはキャッシュなし)
Cache-Control: no-cache, must-revalidate

# ハッシュ付き静的アセット (イミュータブル)
Cache-Control: public, max-age=31536000, immutable

# ハッシュなし静的アセット
Cache-Control: public, max-age=86400, stale-while-revalidate=604800

# API レスポンス
Cache-Control: private, max-age=0, must-revalidate

Service Worker キャッシング

// 静的アセット用キャッシュファースト
self.addEventListener('fetch', (event) => {
  if (event.request.destination === 'image' ||
      event.request.destination === 'style' ||
      event.request.destination === 'script') {
    event.respondWith(
      caches.match(event.request).then((cached) => {
        return cached || fetch(event.request).then((response) => {
          const clone = response.clone();
          caches.open('static-v1').then((cache) => cache.put(event.request, clone));
          return response;
        });
      })
    );
  }
});

ランタイムパフォーマンス

レイアウトスラッシングを回避

// ❌ 複数のリフローを強制
elements.forEach(el => {
  const height = el.offsetHeight; // 読み込み
  el.style.height = height + 10 + 'px'; // 書き込み
});

// ✅ 読み込みをバッチ化し、その後に書き込みをバッチ化
const heights = elements.map(el => el.offsetHeight); // すべて読み込み
elements.forEach((el, i) => {
  el.style.height = heights[i] + 10 + 'px'; // すべて書き込み
});

高コストな操作のデバウンス

function debounce(fn, delay) {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => fn(...args), delay);
  };
}

// スクロール/リサイズハンドラーをデバウンス
window.addEventListener('scroll', debounce(handleScroll, 100));

requestAnimationFrame を使用

// ❌ ジャンク (カクつき) を引き起こす可能性
setInterval(animate, 16);

// ✅ ディスプレイリフレッシュと同期
function animate() {
  // アニメーションロジック
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

長いリストの仮想化

// 100 項目以上のリストの場合、表示可能な項目のみをレンダリング
// react-window、vue-virtual-scroller などのライブラリ、またはネイティブ CSS を使用:
.virtual-list {
  content-visibility: auto;
  contain-intrinsic-size: 0 50px; /* 推定項目高さ */
}

View Transitions でスムーズなナビゲーション

View Transitions API は、ブラウザが 2 つの DOM 状態間でクロスフェード (またはカスタムアニメーション) を実行でき、GPU 合成スナップショットを 1 つ使用できます — ダブルレンダーなし、レイアウトスラッシュなし、スナップショットは CLS にカウントされません。

同一ドキュメント (SPA スタイル) — Baseline 2026:

// DOM ミューテーションをラップしてビューをスワップ
function navigate(newView) {
  if (!document.startViewTransition) return swapDOM(newView);
  document.startViewTransition(() => swapDOM(newView));
}

クロスドキュメント (MPA スタイル) — Chromium 安定版、他の場所でプログレッシブエンハンスメント:

/* ソースページと宛先ページの両方 */
@view-transition { navigation: auto; }

全体の統合はこれだけです — 同一オリジンのナビゲーションは自動的にフェードします。特定のエレメントを共有エレメント トランジション (例: サムネイルがヒーローに展開) にオプトインするには、マッチング view-transition-name を付与します:

.product-thumb[data-id="42"], .product-hero { view-transition-name: product-42; }

上記の Speculation Rules とペアにして、インスタント + アニメーション ナビゲーションを実現。

サードパーティスクリプト

読み込み戦略

// ❌ メインスレッドをブロック
<script src="https://analytics.example.com/script.js"></script>

// ✅ 非同期読み込み
<script async src="https://analytics.example.com/script.js"></script>

// ✅ インタラクション後に遅延
<script>
document.addEventListener('DOMContentLoaded', () => {
  const observer = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
      const script = document.createElement('script');
      script.src = 'https://widget.example.com/embed.js';
      document.body.appendChild(script);
      observer.disconnect();
    }
  });
  observer.observe(document.querySelector('#widget-container'));
});
</script>

ファサードパターン

<!-- インタラクション前に静的プレースホルダーを表示 -->
<div class="youtube-facade" 
     data-video-id="abc123" 
     onclick="loadYouTube(this)">
  <img src="/thumbnails/abc123.jpg" alt="Video title">
  <button aria-label="Play video">▶</button>
</div>

測定

主要メトリクス

メトリクス	ターゲット	ツール
LCP	< 2.5s	Lighthouse、CrUX
FCP	< 1.8s	Lighthouse
Speed Index	< 3.4s	Lighthouse
TBT	< 200ms	Lighthouse
TTI	< 3.8s	Lighthouse

テストコマンド

# Lighthouse CLI
npx lighthouse https://example.com --output html --output-path report.html

# Web Vitals ライブラリ
import {onLCP, onINP, onCLS} from 'web-vitals';
onLCP(console.log);
onINP(console.log);
onCLS(console.log);

参考資料

Core Web Vitals 固有の最適化については、Core Web Vitals を参照してください。