［ECサイトPSI合格点実績］JavaScriptとAjax多用のECサイトでページスピードインサイトを合格点に劇的改善

JavaScriptとAjaxを多用したECサイトにおいて、「PageSpeed Insights（以下、PSI）」スコアを90点台まで改善するのは簡単ではありません。しかし、ECサイト本体を大きく改修することなく、“見える速さ”を高める手法で成果を上げた事例があります。

サイト構成と課題の前提

今回ご紹介するECサイトは、以下のような構成で運用されています。

• EC基盤：EC-CUBE
• 独自CMSでEC機能を拡張

このECサイトはEC-CUBEで構築していますが、以下の機能追加を行っています。

• 「本日のおすすめ」「週間おすすめ」などをトップに掲載
• 一覧ページからの一括カートイン
• 会員情報と購入実績に基づいたメルマガ配信
• ページ単位での並び順指定機能
• 月別人気商品リスト
• シリアルナンバー連動のダウンロード販売
• 基幹システム連携による在庫・売上データ処理

こうした柔軟な商品表示・販売機能を実現するために、もともとJavaScriptとAjaxを多用していました。その結果、LCP（最大コンテンツの表示）やINP（操作応答時間）に悪影響を及ぼしやすい構成となっていました。

対象ページごとのスコア推移

改善前後のPSIスコアは以下の通りです（モバイル計測）。

改善前に指摘された典型的な課題

改善前は以下のようなページスピードインサイト指摘が並んでいました。

• レンダリングを妨げるリソースの除外（2,240ms削減可能）
• 使用していないCSS/JSの削減（約450KiB）
• 過大なDOMサイズの回避（1,426要素）
• LCP画像のプリロード不足
• 過大なネットワークペイロード（3,453KiB）

それぞれに対して、「削る・遅らせる・圧縮する」対応を積み重ねることで、ユーザー体験の印象が大きく改善されました。改善結果は以下です。

主なページスピードインサイト改善対応内容

以下のような施策によって、スコア改善を実現しました。

サーバー設定の見直し

• キャッシュ制御やgzip圧縮など、.htaccessの最適化

画像最適化

• 商品画像をCMSにてWebP画像に変換
• 画像の遅延読み込みを実施
• LCP対象の画像に対しては優先表示
• width と heightの指定

HTML/CSSのクリーンアップ

• HTML軽量化、不要なDOMの削除
• CSS軽量化、インラインCSSへ変更
• Webフォントの見直し

JavaScriptの整理と分割

• 使用していないJavaScriptの削除・最小化
• Ajaxによる動的読み込みを「インタラクション後」に遅延化

トップページLCPが2.8秒でもスコア94点の理由

今回のトップページでは、Ajaxによって「本日のおすすめ商品」などのコンテンツを動的に表示しており、LCPが2.8秒にとどまっています。

本来であれば、LCPが2.5秒を超えるとスコアへの影響は大きいのですが、それ以外のボトルネックが解消されたことでスコア94点という高評価に達しています。Googleの評価指標が総合的であることを改めて示す結果となりました。

柔軟性と高速性を両立させる現実的なアプローチ

JavaScriptやAjaxを排除せずに、自由なコンテンツ展開とユーザー体験の高速化を両立させることは十分可能です。CMSやECシステムに手を加えずにできる範囲でも、「やるべき基本」が徹底できていれば、高スコアは実現可能です。