web-performance-optimization

Web パフォーマンス最適化

Core Web Vitals、最新のブラウザー API（View Transitions、Speculation Rules）、フレームワーク固有の手法を活用して、Web パフォーマンスを最適化します。

このスキルを使用するタイミング

• Lighthouse のスコアを改善するとき（目標：90 以上）
• ページの読み込み時間を短縮するとき（目標：LCP を 2.5 秒未満）
• SEO ランキング向上のために Core Web Vitals を最適化するとき
• 最新のパフォーマンスパターン（2025 年）を実装するとき
• パフォーマンスのボトルネックをデバッグするとき
• 継続的なパフォーマンス監視を設定するとき

ビジネスへの影響： 1 秒の遅延でコンバージョンが 7％減少します。0.1 秒の改善でコンバージョンが 8％増加します。

まずはこちら：すぐにできる改善

投資時間別の ROI の高い最適化：

1 時間でできる改善（⭐⭐⭐⭐⭐ ROI）：

• ファーストビューより下の画像に loading="lazy" を追加（容量を 40～60％削減）
• 圧縮（gzip/brotli）を有効化（転送サイズを 70～80％削減）
• 重要なオリジンに rel="preconnect" を追加（100～500ms 短縮）

1 日でできる改善（⭐⭐⭐⭐ ROI）：

• コード分割を実装（バンドルを 30～50％削減）
• fetchpriority="high" で LCP 画像を最適化（200～400ms 改善）
• 基本的なサービスワーカーを追加（再訪時の読み込みを瞬時に）

1 週間でできる包括的な改善（⭐⭐⭐⭐⭐ ROI）：

• キャッシュ戦略全体（HTTP ヘッダー＋サービスワーカー）
• バンドルの最適化（ツリーシェイキングにより 40～60％削減）
• パフォーマンス監視（Lighthouse CI＋RUM）

→ 完全な実装手順については、quick-wins.md をご覧ください

Core Web Vitals の概要

指標	目標	重み	主な最適化
LCP（Largest Contentful Paint）	2.5 秒未満	25％	画像を最適化し、重要なリソースをプリロード
INP（Interaction to Next Paint）	200ms 未満	30％	JavaScript を削減し、長いタスクを分割
CLS（Cumulative Layout Shift）	0.1 未満	25％	スペースを確保し、フォントを最適化
TBT（Total Blocking Time）	200ms 未満	30％	コード分割、重要でない JS の遅延読み込み
FCP（First Contentful Paint）	1.8 秒未満	10％	レンダリングをブロックするリソースを排除

→ 各指標の詳細については、core-web-vitals.md をご覧ください

最新のパターン（2025 年）

View Transitions API — JavaScript を使わずにスムーズなページ遷移を実現

@view-transition { navigation: auto; }

Speculation Rules API — ページをプリレンダリングして、瞬時にナビゲーション
React Server Components — バンドルサイズがゼロのサーバーコンポーネント
Priority Hints — LCP の最適化に fetchpriority="high" を使用
Content Visibility — CSS ベースのレンダリング最適化

→ 最先端の手法については、modern-patterns-2025.md をご覧ください

ナビゲーション

クイックスタート（最初に読み込む）

• ⚡ すぐにできる改善 — ROI 評価付きの時間別最適化（1 時間／1 日／1 週間）。すぐに効果を得るには、最初に読み込んでください。

詳細解説

• 📊 Core Web Vitals — LCP、INP、CLS の最適化戦略とデバッグのワークフロー。特定の指標を目標にするときに読み込んでください。
• 🔧 最適化手法 — 画像、JavaScript、CSS、リソース読み込み、キャッシュのパターン。具体的な最適化を実装するときに読み込んでください。

最新機能

• ✨ 最新のパターン 2025 — View Transitions、Speculation Rules、RSC、Islands Architecture。最先端のパターンを採用するときに読み込んでください。

フレームワーク別

• ⚛️ フレームワークのパターン — Next.js、React、Vue、Vite、Astro、SvelteKit の最適化。使用しているフレームワークに合わせて読み込んでください。

測定と監視

• 📈 監視 — Lighthouse CI、RUM のセットアップ、パフォーマンス予算、デバッグツール。継続的な監視を設定するときに読み込んでください。

主な注意点

• まず測定し、その後で最適化する - 変更前に必ず Lighthouse/WebPageTest でベースラインを測定してください
• ユーザー中心の指標に注目する - Core Web Vitals ＞ 見栄えだけの指標
• 実機でテストする - モバイルユーザーの 53% は、3 秒後に離脱します
• 継続的に監視する - 注意を怠ると、パフォーマンスは時間の経過とともに低下します
• ROI に基づいて優先順位を付ける - まずは Quick Wins（効果が高く、労力が少ない項目）から始めてください

注意すべき兆候

次の場合は、いったん停止して再検討してください。

• ベースラインを測定せずに最適化している
• Lighthouse のスコアだけに注目している（フィールドデータを無視している）
• モバイルのパフォーマンスを無視している（3 秒後の離脱率は 53%）
• すべてのリソースを即座に読み込んでいる（遅延読み込みをしていない）
• キャッシュ戦略を実装していない
• サードパーティ製スクリプトを同期読み込みしている
• パフォーマンスの監視や予算設定がない

他のスキルとの連携

• nextjs-core - Next.js の Image コンポーネント、フォントの最適化、静的生成
• react - コンポーネントの最適化、メモ化、コード分割
• vite - ビルドの最適化、チャンク分割
• typescript-core - 型安全なパフォーマンスパターン

実環境での効果

コンバージョンへの影響：

• Pinterest：体感待ち時間を 40% 短縮 = 登録数が 15% 増加し、SEO トラフィックも 15% 増加
• Zalando：0.1 秒の改善 = 収益が 0.7% 増加
• AutoAnything：読み込み時間を 50% 短縮 = 売上が 12〜13% 増加

SEO への影響：

• Core Web Vitals はランキング要因です（2021 年 6 月以降）
• ユーザーの 75% が Core Web Vitals の基準を満たすと、ランキングが向上します
• モバイルファーストインデックスでは、モバイルのパフォーマンスが優先されます

---

覚えておいてください： パフォーマンスは機能の一つであり、後回しにするものではありません。1 ミリ秒も無駄にはできません。すぐに効果を得るため、まずは Quick Wins から始めてください。