ajaxで外部サイトからデータを取得する際、リソースを抑えたい。

いつもお世話になっております。
ajaxで、商品ページからレビュー件数と平均評価を取得し、商品一覧ページに出力するプログラムを作成しています。
商品一覧ページ事体は軽いのですが、各商品ページにはサイズの大きい画像が複数あるので、それらをajaxで取得すると転送量が莫大になってしまいます。

プログラムを適応する前はリクエスト数は50程度、転送量は10MB程度ですが、ajaxのプログラムを適応すると、リクエスト数が200で転送料は100M近くになります。
遅延読み込みを使用しているので描写を妨げる事はないですが、転送量が多すぎてブラウザが落ちてしまう不安があります。

###ソース

       callback: function (element, op){
         if(op === 'load') {
         var itemID = element.src.match(/\/product\/(.+)_th/);
         if(itemID < 1){
           // console.log(element)
         }else{
           $.ajax({
             type: 'GET',
             url: '//sample.com/?pid=' + itemID[1],
             dataType: 'html',
             success: function(data){
               review_total = $(data).find('#review_data').attr('alt');
               if(review_total > 0){
                 src = $(data).find('#review_data').attr('src');
                 text = '<div class="review_wrap"><img src="'+ src +'"/></div>(' + review_total + '件)';
                 $(element).parent().nextAll('.review_ave').append(text);                  
               }
             },
             error:function(){
               console.log("ajaxエラーがありました。")
             }
           });
         }
         }
       }

###質問

どのように改善すれば良いかアドバイスお願い致します。

###備考
各画像はファースビュー以外、遅延読み込みを施し、各画像の圧縮済みです。
該当ページはECサイトです。ajaxで読み込む先は同ドメインです。

行動規範の内容に同意します

回答1件

ベストアンサー

転送量が多すぎてブラウザが落ちてしまう

どれくらいでそれが起こるかテストしてみてはいかがでしょう。

表示しない画像要素（HTML）を削除する
ajaxのデータをHTMLではなくJSONで受け取る（「JSON 使用言語」で検索）
通信をgzip圧縮する
srcsetを使って画像を出し分ける（最適なサイズの画像のみ転送）

【gzip 圧縮によるサイトパフォーマンスを向上させる方法 | murashun.jp】
https://murashun.jp/blog/20141223-01.html

【HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう | Kia King】
http://kia-king.com/blog/tutorial/responsive-images-with-srcset/

【srcset属性について - Qiita】
http://qiita.com/C058/items/643a9ff2d23dfe3a0b37

投稿2017/05/06 15:24

kei344

総合スコア69407

yuki_90453

2017/05/07 00:40

>どれくらいでそれが起こるかテストしてみてはいかがでしょう。該当のサイトはスマートフォンなので、古い端末の場合どの程度でブラウザが落ちるか判断するのが難しいです。またページ100Mだと、10ページ閲覧すると1Gになってしまいモバイル回線のお客さんにとって迷惑なサイトになってしまいます。(笑) 頂いた選択肢の内、1か2で考えております。 1の場合、リクエストが発生する前に要素を削除するという事ですよね。 Ajax側でdatafilterを設定し正規表現で必要な箇所だけ取得する設定にしていますが、リクエスト数は変わりませんでした。 2,こちらについてまだ、試していません。HTMLをJSONで出力すると抽出したう要素を選択するのに苦労しそうですね。

kei344

2017/05/07 04:17

> 1の場合、リクエストが発生する前に要素を削除するという事ですよね。 html上のimg要素を消すということなので、リクエスト数は変わりませんよ。リクエスト数は設計の問題なので、今提示されているものだけでは判断できませんが、複数のリクエストがあるのであればまとめてリクエストできるようにすればよいとは思います。 > HTMLをJSONで出力すると抽出したう要素を選択するのに苦労しそうですね。 JSONはJavaScriptからとても使いやすいので、一度勉強されては。 HTMLで要素を返すと少なくとも下記のようになると思います。 <html><div><img src="http://example.com/img.jpg" alt="example"></div></html> JSONで返す場合はデータだけ送ればよいので下記のようにできます。 {[{”src”:"img.jpg","alt":"example"}]} で、下記のように取り出せばよいだけです。 response[0].src // img.jpg response[0].alt// example むしろ一番圧縮効果が出るのが srcset なのですが、それは試されないのですね。

行動規範の内容に同意します