スポーツ大手：PWA、モバイルCV+18%、Lighthouse 92。

モバイルLighthouseが38でトラフィックの72%がモバイルなら、ポイントを失っているのではなく、カートを失っています。

コンテキスト

スポーツ・アウトドア専門欧州eコマースリーダー、年商2.4億ユーロ、月間600万訪問者。既存フロントはモノリシックReact SPA、重いハイドレーション、ガバナンスなしのサードパーティスクリプト。18人のプロダクトチーム、パリハブ。

問題

• モバイルLighthouse：38（Performance）、4GでLCP 4.8秒
• モバイル離脱率：61%、6か月で9ポイント上昇
• モバイルコンバージョン自由落下（-14% YoY）
• 同期ロードされた27サードパーティスクリプト、うち9つは未使用
• 商品ページ3.2 MBのJS

アプローチ

スクラッチ書き直しではなく、段階的オーバーホール。デフォルトでServer ComponentsのNext.js App Routerへのマイグレーション、ハイドレーションはインタラクティブアイランドのみ。監査後、サードパーティスクリプトの残酷なトリアージ。

レバー

• cart、search、filters以外すべてServer Components
• next/image経由のAVIF/WebPイメージパイプライン、sizes正しく設定
• ルートごとのコードスプリッティング、ホバー時のスマートプリフェッチ
• 最近閲覧商品ページのService Worker
• タグマネージャをサーバーサイド非同期ロードに置き換え

スタック

• Next.js 16 App Router、React 19
• Vercel Edge Network、オンデマンド再検証付きISR
• ビジュアル変換のためのCloudflare Images
• GA4、Vercel Speed Insights経由のWeb Vitalsレポート

結果

1. モバイルLighthouse：38から92
2. LCP：4Gで4.8秒から1.4秒
3. モバイルコンバージョン：本番投入後90日で+18%
4. 離脱率：-40%
5. 平均カート：+12%（ページ速度/AOV相関A/B確認済み）

学んだこと

Server Componentsは強力ですが、どこでもuseStateに慣れた開発者の習慣を壊します。最低3週間の社内トレーニングを計算。オフラインService Workerは不安定接続で+3%のコンバージョンをもたらしました、もっと早く優先すべきでした。やり直すなら：サードパーティスクリプトのトリアージから始め、残りすべてのブロックを解除します。