ECサイトなどで利用されるレコメンド機能は、ユーザーの興味や閲覧履歴に応じた商品を表示できる便利な機能です。

一方で、商品画像や商品情報の取得、JavaScriptによる表示処理などによって、サイトの表示速度に影響を与える場合があります。

本記事では、独自検証を用いてレコメンド機能が表示速度に与える影響と具体的な最適化方法を解説します。

レコメンド機能がサイトの表示速度に与える影響

レコメンド機能の仕組みとWebサイトでの利用例

レコメンド機能とは、ユーザーの閲覧履歴や購入履歴、商品の属性などをもとに、一人ひとりの興味・関心に合った商品やコンテンツをおすすめとして表示する機能です。

ECサイトでは、ユーザーの行動データや商品情報を分析し、関連性の高い商品を自動的に選定して表示します。

主に、商品詳細ページの「この商品を見た人におすすめの商品」、トップページの「あなたへのおすすめ」、カートページの「一緒に購入されている商品」などで活用されています。

ユーザーが興味を持ちそうな商品を効率的に見つけられるため、サイト内の回遊促進や購入率の向上、客単価のアップなどが期待できます。

レコメンド機能が表示速度に影響する3つの原因

複数の商品画像を読み込むことによる通信量の増加

レコメンド機能では、ユーザーにおすすめする複数の商品画像を表示するため、一度に多くの画像を読み込むことがあります。

特に、容量の大きな高解像度画像を使用していたり、画面外にある商品画像まで初期表示時に取得したりすると、通信量が増加し、ページの読み込みに時間がかかる原因になります。

また、画像の読み込みが集中することで、ファーストビューの表示にも影響を与える可能性があります。

商品データの取得による読み込み時間の増加

レコメンド機能は、商品名や価格、商品画像などの情報を取得して表示する仕組みです。

外部APIやレコメンドサービスと連携している場合、商品データを取得するための通信が発生します。

特に、ページを開いたタイミングですべての商品情報を取得する設計では、通信の完了を待つことで表示が遅れる場合があります。

また、取得する商品数が多いほどデータ量や処理時間が増加し、ページ全体の表示速度に影響する可能性があります。

JavaScriptによる処理負荷の増加

レコメンド機能では、取得した商品情報をもとに商品の選定や並び替え、画面への表示などをJavaScriptで処理することがあります。

さらに、スライダーやカルーセルなどの表示機能を組み合わせている場合、初期化やアニメーションなどの処理も発生します。

こうしたJavaScriptの実行負荷が大きくなると、ブラウザのメインスレッドを占有し、ページの描画やユーザー操作への応答が遅れる原因になります。

特に、複数のレコメンドエリアを設置しているサイトでは注意が必要です。

【独自検証】レコメンド機能の最適化で表示速度は改善される？

実際に検証してみた結果を動画で撮影しています。

まずはこちらをご覧ください。

左側が修正前（ビフォー）ページで、右側が改善後（アフター）のページとなります。

検証方法は、下記で解説していきます。

レコメンド機能の表示速度を比較する検証条件

レコメンド機能を設置したテストページを用意し、最適化前（BEFORE）と最適化後（AFTER）で表示速度を比較します。

検証条件を表にまとめます。

上記のような条件のページにビフォーアフター比較できるレコメンド機能を設置し比較検証を行いました。

また、実施した改善内容は下記に解説していきます。

今回実施するレコメンド機能の最適化・改善内容

今回最適化・改善した内容を先にまとめておきます。

商品画像の遅延読み込みを設定する

1つ目の方法として、初期表示に必要な画像を優先的に読み込むようにし、2枚目以降の画像を遅延読み込みさせます。

すべての画像を一度に読み込むと、初期表示時の通信量が増え、表示速度への影響を防げます。

具体的には、初期表示の画像にはfetchpriority="high"を指定し、2枚目以降の画像で表示を遅らせてもいい画像にはloading="lazy"を設定します。

HTMLにある画像ももちろんですが、レコメンド画像が表示される仕組みが記述されているjavascriptのファイルにもloading="lazy"の記述を追加しています。

変更前ソース（javascript内）

      <img
        src="https://landinghub.sakura.ne.jp/to/recomend/${product[2]}"
        alt="${product[0]}"
        decoding="async"
      >

変更後ソース（javascript内）

      <img
        src="https://landinghub.sakura.ne.jp/to/recomend/${product[2]}"
        loading="lazy"
        alt="${product[0]}"
        decoding="async"
      >

こちらの設定をした結果として下記の画像のようになりました。

赤枠で囲ったウォーターフォールの部分を見ると、左側（変更前）はどのファイルも同時に読み込まれています。

右側はファーストビューで表示される5つの画像までは同時に読み込まれますが、ファーストビューを読み込まれた後に読み込み始めてるのがわかります。

（厳密にはスクロールして表示される前に読み込み開始）

画像の遅延読み込みだけを行った検証も実施していますので、参考にご覧下さい。

【実践解説】画像の遅延読み込みの設定方法と表示速度の改善効果を実測比較

また、LandingHubを導入頂ければ自動的に遅延読み込み機能も入りますので作業工数も軽減されおすすめです。

商品画像を最適化（圧縮・サイズ最適化・次世代フォーマットに変更）

ここは画像の容量を圧縮する施策です。

圧縮できる要素として下記が挙げられます。

• JPEGなどの拡張子からWebP（AVIF）へ変換
• 商品画像のサイズを最適化させ容量圧縮
• 画像圧縮による通信量の削減効果を確認

これらの作業により、画像容量が削減されるため画像の読み込みが速くなります。

画像の読み込みが速くなることでページ全体の読み込みも改善される仕組みです。

LandingHubを導入頂ければ自動的に圧縮と次世代フォーマットに変更されるので作業工数が軽減されおすすめです。

拡張子が変更された画像は下記のように変更しておきましょう。

画像の拡張子が変わる際は画像のURLも変更をお忘れなく。

結果的に下記のように変化しました。

拡張子はjpegとなっているものからwebpへ代わり、容量は2MBあった画像が17kbまで圧縮されています。

拡張子の変更もそうですが、サイズ変更や画像圧縮による圧縮も大きく影響していると考えられます。

LandingHubでも画像圧縮と次世代フォーマットの変換は自動的にできますので作業工数も軽減されるためおすすめです。

レコメンドの商品表示数を最適化する

レコメンド機能では、表示する商品数が多くなるほど、商品画像の読み込みや商品カードの生成に必要な処理が増加します。

特に、ページを開いた直後から16件、20件といった大量の商品を表示すると、画像の通信量が増えるだけでなく、JavaScriptによるHTML要素の生成や描画にも負荷がかかります。

そのため、レコメンド商品の表示数を必要な範囲に絞ることも、表示速度を改善する方法の一つです。

今回の検証では、BEFOREでは16商品を表示し、AFTERでは8商品に削減することで、画像のリクエスト数やデータ転送量、表示速度にどのような変化が生じるかを確認します。

JavaScriptのソース変更例です。

変更前

products.forEach((product) => {

変更後

products.slice(0, 8).forEach((product) => {

ソースは作り方によって変わると思いますので、制作された方と相談して調整してみてください。

今回の調整は下記の通りになります。

左の修正前はレコメンドの画像数が16画像だったのに対し、右の修正後は8画像の表示に削減しています。

これは少なくすればもちろん軽くなりますが、画像が多い方がマーケティング的に良いということであれば検討してみましょう。

逆に数が多くても売り上げなど貢献しないようであれば削減してもいいかもしれません。

商品データの取得タイミングを最適化する

レコメンド機能では、ページを開いた直後にすべての商品データを取得・処理すると、メインコンテンツの表示と処理が重なり、初期表示に影響する場合があります。

そこで、商品データの取得タイミングを見直し、ページの初期表示に必要な処理を優先させることが重要です。

今回の検証では、BEFOREではページ読み込み時にレコメンド商品を一括で生成し、AFTERではレコメンドエリアが画面に近づいたタイミングで商品カードを生成する方法に変更します。

これにより、初期表示時のJavaScript処理を抑え、表示速度にどのような変化が生じるかを確認します。

ソース例

修正前

products.forEach((product) => {
  // 商品カードを生成
});

修正後

const target = document.querySelector(".recommendations");

const observer = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting) {
    products.forEach((product) => {
      // 商品カードを生成
    });

    observer.disconnect();
  }
}, {
  rootMargin: "300px"
});

observer.observe(target);

修正後は、レコメンドエリアが画面の300px手前に近づいてからカードを生成し、一度生成した後は監視を終了し重複生成を防止するという指示にしています。

設定方法は様々ありますので、制作した技術社と相談しながら決めてみてください。

JavaScriptの読み込み・実行処理を見直す

レコメンド機能では、商品カードの生成や表示制御などにJavaScriptが使用されています。

JavaScriptの読み込みや実行方法によっては、HTMLの解析や初期描画と処理が重なり、ページの表示速度に影響する場合があります。

そのため、JavaScriptの読み込みタイミングを見直し、HTMLの解析を妨げずにスクリプトを実行できるようにすることが重要です。

今回の検証では、BEFOREでは通常のJavaScript読み込み、AFTERではdefer属性を付けて読み込む方法に変更し、初期表示や読み込み時間にどのような変化が生じるかを確認します。

変更前

<script src="before.js"></script>

変更後

<script src="after.js" defer></script>

defer属性を付けることで、JavaScriptのダウンロードによるHTML解析の中断を避けられます。

ただし、JavaScriptの処理量そのものが減るわけではありません。

【検証結果】レコメンド機能の最適化による表示速度の変化

レコメンド機能の最適化前後の比較結果

実測値を表にまとめます。

改善効果1：ページ全体の読み込み時間の変化

今回の検証では、ページ全体の読み込み完了時間がBEFOREの26.1秒からAFTERは9.1秒に短縮されました。

約17秒の短縮となり、読み込み時間を約65.1%削減できたことになります。

これは、レコメンド商品の表示数を減らしたことによる画像リクエスト数や転送量の削減、商品カードの生成タイミングの見直し、JavaScriptの読み込み方法の最適化などが影響したと考えられます。

特に、ページ表示直後に発生する処理や通信を抑えることで、ページ全体の読み込み負荷を軽減できたと考えられます。

今回の結果から、レコメンド機能は商品を表示する数だけでなく、データの生成タイミングやJavaScriptの読み込み方法も含めて最適化することが重要だと分かりました。

改善効果2：LCPの数値の変化

今回の検証では、LCP（Largest Contentful Paint）の数値がBEFOREの27.2秒からAFTERは1.9秒に短縮されました。

約25.3秒の短縮となり、LCPを約93％改善できたことになります。

LCPは、ページ内で最も大きなコンテンツが表示されるまでの時間を示す指標です。

今回の改善では、レコメンド商品の画像読み込みや商品カードの生成処理を遅らせることで、メインコンテンツの表示を優先できるようになったと考えられます。

Googleが推奨するLCPの目安は2.5秒以内です。今回のAFTERの結果は1.9秒となり、この基準を満たしました。

レコメンド機能の読み込みがメインコンテンツの表示を妨げないように最適化することは、ユーザーがページを快適に閲覧できる環境づくりにもつながります。

改善効果3：ページ全体のデータ容量の変化

レコメンド機能の最適化によって、ページ全体で読み込まれるデータ容量にも大きな変化が見られました。

BEFOREではページ全体の転送量が25.6MBだったのに対し、AFTERでは299KBまで削減されました。

これは約98.8%の削減で、転送量を約85分の1に抑えられたことになります。

今回の改善では、レコメンド商品の表示数を16商品から8商品に削減したことに加え、商品カードの生成タイミングを遅らせることで、初期表示時に不要な商品画像や関連リソースの読み込みを抑えています。

この結果から、レコメンド機能は表示する商品数や画像の読み込みタイミングによって、ページ全体のデータ転送量に大きく影響することが分かりました。

特に画像を多く使用するECサイトでは、必要なタイミングで必要な商品情報だけを読み込む設計が、表示速度の改善に有効です。

※転送量はChrome DevToolsのNetworkパネルに表示される「Transferred」の値を使用しています。

改善効果4：レコメンド機能の表示・動作の変化

今回の検証では、表示速度だけでなく、レコメンド機能の商品表示や動作に問題が発生していないかも確認しました。

BEFOREではページ読み込み時に16商品を一括で生成していましたが、AFTERでは表示商品数を8商品に削減し、レコメンドエリアが画面に近づいたタイミングで商品カードを生成するように変更しています。

その結果、初期表示時にレコメンド商品の生成や画像読み込みを行う必要がなくなり、メインコンテンツの表示を優先できる構成になりました。

また、レコメンドエリアまでスクロールすると商品が表示されるため、ユーザーが商品を閲覧する際の機能も維持できます。

ただし、最適化によって表示商品数が減るため、商品を選べる幅が狭くなる可能性があります。

表示速度だけを重視するのではなく、商品数や表示タイミングがユーザーの回遊・購買行動に与える影響も考慮することが重要です。

今回の検証から、レコメンド機能は単純に削除・縮小するのではなく、ユーザーが必要とするタイミングに合わせて商品を表示することで、利便性と表示速度を両立できる可能性があると分かりました。

レコメンド機能の表示速度改善に関するよくある質問

レコメンド機能を設置すると表示速度は遅くなる？

レコメンド機能は、商品データの取得や画像の読み込み、JavaScriptによる表示処理が発生するため、ページの表示速度に影響する場合があります。

特に商品数が多い場合は注意が必要です。

レコメンドの商品画像をLazy Loadにすると効果はある？

効果が期待できます。

画面外にあるレコメンド商品の画像をLazy Loadで遅延読み込みすることで、初期表示時の画像リクエスト数やデータ転送量を削減できます。

レコメンド機能の表示数を減らすと表示速度は改善する？

改善につながる可能性があります。表示する商品数を減らすことで、商品画像の読み込みやHTML要素の生成処理が少なくなり、通信量やブラウザの処理負荷を抑えられます。

外部のレコメンドサービスを利用すると表示速度に影響する？

影響する場合があります。外部サービスでは、商品データの取得やJavaScriptの読み込みに加え、外部サーバーとの通信が発生します。

読み込み方式やスクリプトの実行タイミングが重要です。

レコメンド機能の最適化にはJavaScriptの知識が必要？

最適化の内容によって異なります。画像のLazy Load設定などは比較的簡単ですが、商品データの取得タイミングや表示処理の変更にはJavaScriptの知識が必要になる場合があります。

レコメンド機能は読み込み方法の最適化で高速化できる

今回の検証では、レコメンド機能の表示数を16商品から8商品に削減し、商品カードの生成タイミングやJavaScriptの読み込み方法を見直しました。

その結果、ページ全体の読み込み完了時間は26.1秒から9.1秒へ約65％短縮され、データ転送量も25.6MBから299KBへ約98.8％削減されました。

このように、レコメンド機能は商品数や画像の読み込み、JavaScriptの実行タイミングを最適化することで、表示速度の改善が期待できます。

ただし、商品数を減らすと回遊や購買への影響も考えられるため、ユーザーの利便性を維持しながら、必要な情報を適切なタイミングで読み込むことが重要です。