目次
近年、Webサイトの表示速度や安定性といった“パフォーマンス”の重要性が高まっています。特に大規模なECサイトでは、ユーザー体験が売上に直結するため、改善のインパクトも大きくなります。
しかし、現実のWebサイトには、長年蓄積された技術的負債や組織的な壁が存在し、ツールだけでは解決しきれないケースも多く見られます。
そこで、私たちは「Repro Booster」の提供に加えて、クライアントと共に課題解決に取り組む「伴走支援」という形で、より本質的なパフォーマンス改善を支援しています。この記事では、ある大手ECサイトで行った具体的なパフォーマンス改善事例を基に、どのように技術的・組織的なハードルを乗り越えながら改善を実現したかを紹介します。
課題設定と対象ページ
クライアントは大規模なECプラットフォームを運営しており、サイト全体のパフォーマンス指標として、
- LCP（Largest Contentful Paint）: 約2.5秒
- CLS（Cumulative Layout Shift）: 1.23
- INP（Interaction to Next Paint）: 約200ms
という状況にありました。
全ページを一度に改修するのは現実的ではないため、まずは最も流入が多いトップページに対象を絞り、「コアウェブバイタル（Core Web Vitals）」の改善に取り組むことになりました。
5つの改修ポイントと技術的アプローチ
改善に向けて、主に以下の5つの修正を施しました。
- カルーセル画像の優先読み込み
ファーストビューに表示される1枚目のカルーセル画像に fetchpriority="high"を設定し、それ以降の画像は loading="lazy" と fetchpriority="low"を指定。ネットワーク資源を優先度に応じて割り当て、初期表示速度を向上させました。 - コンテンツ非表示処理の排除
JavaScriptによって、カルーセル画像がすべて読み込まれるまでコンテナ要素を非表示にしていた処理を削除。これにより、読み込み途中でもコンテンツが表示され、ユーザー体験を改善しました。 - レイアウトシフト対策
カルーセルの高さをCSSで明示的に指定。これにより、画像の読み込みタイミングに依存する要素のズレ（CLS）を防止しました。 - ウィジェットスクリプトの読み込みタイミング調整
動的に読み込まれるレコメンドウィジェットのスクリプトを、タグマネージャー経由ではなく <head> 内に直接記述。DOM構築初期に読み込みを行い、レイアウトの安定性を確保しました。 - ネイティブ遅延読み込みへの移行
画像の遅延読み込みを従来のJavaScriptライブラリから、ブラウザネイティブの loading="lazy" に統一。不要なスクリプト実行を避け、ページ全体のパフォーマンスを向上させました。
LCPを1.1秒、CLSは1.05の大幅改善
これらの施策により、以下のような明確な改善が確認できました（Chrome UX Reportより、75パーセンタイルの値）。
| 指標 | Before | After | 改善幅 |
| LCP | 2.5秒 | 1.4秒 | ▲1.1秒 |
| CLS | 1.23 | 0.18 | ▲85% |
特にCLSは施策直後から大きく改善が見られました。LCPについても、見た目には小さな変化に見えつつも、1秒以上の短縮は体感速度に大きく影響するものであり、改善の意義は大きいと考えています。
また、これらの改善によりトップページからの直帰率も低下し、ビジネスKPIへの貢献も確認されています。
改善推進のポイント
今回の経験から、パフォーマンス改善を推進する上で重要と感じたポイントを3つ紹介します。
- 横断的な調整は避ける
大規模サイトでは部門ごとにKPIや管轄領域が分かれており、全体横断的な施策は合意形成のハードルが高くなります。そこで、まずは影響範囲を限定した「スモールスタート」を行い、成功体験を積み上げることが重要です。 - コスパの良い施策を優先
パフォーマンス分析により、費用対効果の高い施策を特定することが成功の鍵です。実装の難易度が低く、改善幅が大きい領域から取り組むことで、関係者の合意も得やすくなります。 - 定性・定量の両面で効果を伝える
数値的な改善はもちろん重要ですが、ユーザー体験がどう変化したかという“定性的な変化”もあわせて伝えることで、さらなる改善へのモチベーションを高めることができます。
LCPとCLSの意外な関係性─連動するパフォーマンス指標の奥深さ
本来、LCPとCLSは、それぞれ独立したCore Web Vitalsの指標とされています。LCPは主に「表示速度」に関わる指標であり、CLSは「レイアウトの安定性」を表すものです。
しかし、今回の事例では、カルーセル画像の読み込み優先度を調整した結果、LCPの改善と同時にCLSも大きく改善されるという、興味深い現象が確認されました。具体的には、最初の画像を fetchpriority="high" で優先的に読み込むことで、ブラウザのレンダリング処理が初期段階で完了し、レイアウトの確定が早まったと考えられます。これにより、画像の読み込み遅延に伴うズレ（シフト）が起きづらくなったのです。
これは「LCPの改善によって、結果的にCLSも改善される」ような相関関係が存在する可能性を示しています。つまり、パフォーマンス施策は一つひとつが単独で効果を発揮するというよりも、互いに連鎖・干渉し合う構造で成り立っているということです。
この経験から学んだのは、パフォーマンス改善を進める際には、単一指標に囚われすぎず、関連指標への波及効果も意識して設計・検証を行うことの重要性です。また、リソース配分──例えばネットワーク帯域やCPU時間──をどのタイミングで、どの要素に集中させるかという観点が、UX全体のバランスを左右するポイントになると強く感じました。
このように、Webパフォーマンスは単なる指標の最適化にとどまらず、複合的な設計判断が求められる分野であることを改めて認識する機会となりました。
持続可能なパフォーマンス改善に向けて
本記事では、実際の改善事例を通じて、パフォーマンス改善の技術的アプローチと推進のポイントを紹介しました。改善のインパクトは表示速度の指標改善にとどまらず、ユーザー体験やビジネス指標にも直結します。ツールによる改善と合わせて、組織を巻き込んだ施策推進の視点も持ちながら、継続的な改善活動を進めていくことが重要です。
表示速度に課題を感じたら
表示速度の改善は、すべてのユーザー体験に直結する重要な取り組みです。もし「改善したいけど、何から始めればいいかわからない」「リソースが足りない」とお悩みであれば、サイトスピード改善ツール「Repro Booster」をご活用ください。
「タグを入れたその日から、Webサイトが速くなる」魔法のようなツールです。特許取得の独自技術でWebサイトの表示速度を“かんたん”かつ“飛躍的”に高速化し、サイトを訪れるすべてのユーザーの体験を改善します。
あわせて読みたいコアウェブバイタル（Core Web Vitals）関連記事
コアウェブバイタル（Core Web Vitals）とは？
コアウェブバイタルの意味や確認方法、SEOへの影響を、WebマーケターやSEO担当者に向けてわかりやすく解説しています。
⇒ コアウェブバイタルの意味とSEOへの影響を詳しく見る
LCP（Largest Contentful Paint）とは？
LCPの意味や計測の対象・方法、改善策を、WebマーケターやSEO担当者に向けてわかりやすく解説しています。
⇒ LCPの意味と改善方法を詳しく見る
CLS（Cumulative Layout Shift）とは？
CLSの意味や計測の対象・方法、改善策を、WebマーケターやSEO担当者に向けてわかりやすく解説しています。
⇒ CLSの意味と改善方法を詳しく見る
執筆者
