ECサイトの表示速度を横断改善しLCP目標を達成

JOGGOは、ユーザーが色やパーツを選んでカスタマイズした革製品を注文できるオーダーメイドレザーグッズのECサイトです。2026年5月から7月にかけて、サイト体験の底上げを目的に表示速度の集中改善を実施しました。

ボトルネックが全域に分散

商品詳細ページはモバイルで FCP が最大9.6秒に達し、初回ロードでは動画だけで約8MBが転送される状態でした。個別施策では改善が頭打ちになったため、原因分析の集中日を設けてボトルネックを洗い出したところ、問題は一箇所ではなく全域に分散していました。

• ヒーロー動画のPC版とSP版を出し分けせず両方ダウンロードしていた
• サブセット分割した日本語Webフォント32ファイル・計2.7MBを毎ページ読み込んでいた
• ABテストツールのアンチフリッカー処理が最大2秒レンダリングをブロックしていた
• 多数の計測タグが初期ロードで一斉発火しメインスレッドを阻害していた
• カート追加時にサムネイル画像の生成完了を同期的に待っていた
• 画像CDNのレスポンスに Cache-Control が付与されておらずブラウザキャッシュが効いていなかった

解法: フロントエンドからCDNまで横断的に対処

• 動画: デバイス別の <source media> で1本化し帯域を半減。下部の動画は preload="none" + IntersectionObserver で遅延読み込み
• フォント: 使用文字のみのサブセットに差し替え、font-display: swap を適用
• JS・計測タグ: ABテストツールを除外し、コード分割・未使用ライブラリ削除・タグの遅延読み込みを実施。SSRペイロードの過剰シリアライズも削減
• 画像: 静的画像・動画をWebP/WebM化し、管理画面の入稿からCDN配信までWebP対応を整備。ギャラリー転送量を約40%削減（開発環境実測）
• カート遷移: サムネイル生成を待たず、白画像+CSS合成によるクライアント描画で即座に遷移する方式へ変更
• CDNキャッシュ: コンテンツの更新頻度に応じてパス別に Cache-Control を設計（長期不変のものは1年+immutable、更新されうるものは短時間）

成果

• LCP 1.5秒の目標を達成
• 商品詳細ページのLCPを28%短縮
• 注文フロー画面のLighthouseスコアを55-73から96-99へ改善
• トップページのLighthouseモバイルスコア97を達成
• リリース後、セッション・トラフィックの伸びを確認

改善は一度きりではなく、リリース後もキャッシュ設計の調整やモバイル向け画像配信の最適化など、継続的なチューニングを行っています。