1. マニュアル

トラフィックを減らす(ページを軽くする)には？

トラフィックについて

ネットワーク上では送受信される通信データの量のことを意味します。
情報をやりとりするための通信データは「トラフィック量が多い」という場合、道路で例えるなら「交通量が多く、混雑している道路」のようなイメージです。

トラフィック量が増加すると、ネットワーク上におけるデータの渋滞が発生し、データが先に進めなくなるため、通信速度が低下したり途中で通信が切断されてしまいます。
また、大量のデータが届くとサーバーの処理能力を超え、想定以上の負荷をかけることがあります。




トラフィック集計について

基本情報管理＞トラフィック集計よりトラフィック量を集計し、確認する事ができる機能です。

リピストクロスにおけるデータ量は、以下となります。
①フロントページのアクセス 「ページサイズ」×「外部（ユーザー様や外部システム）からの接続要求数やアクセス数」の和
②管理画面の操作 「操作（アクセス、データのアップ・ダウンロード）」×「SHOP担当者様の接続要求数やアクセス数、操作回数」の和


データ量のイメージ



例1）LPフォームのページサイズ20MBに対し、アクセス数が500人いた場合
20MB　×　500　＝　10000MB（10GB）　となり、「10GB」がデータ量となります。

例2）LPフォームのページサイズ10MBに対し、アクセス数が500人いた場合
10MB　×　500　＝　5000MB（5GB）　となり、「5GB」がデータ量となります。




トラフィックを減らすための有効な手段は？

前述の通り、トラフィックは大きく分けて、ページのアクセスに伴うデータ通信と、管理画面の操作に伴うデータ通信があります。

管理画面の操作は通常業務の範囲内であればトラフィック過多の影響になることは殆どありません。
一方で、ページのアクセスはページサイズが大きくなりやすく、トラフィック過多の原因となる可能性が高いです。
また、ページサイズが大きいとページ読み込みにも時間がかかり、CVRが低下します。

最も効果的にトラフィックを減らすには、アクセス数の多いページ（LPフォームなど）のチューニングを行うことが有効です。






ページサイズを減らすメリット

リピストクロス　のトラフィック制限値を超えることがなくなるだけでなく、ページの表示速度も向上するため、CVRが上がります。
※トラフィック制限に関しては、基本情報管理＞トラフィック集計トラフィック集計をご確認ください。




トラフィック（データ転送量）を減らすには

トラフィックは、データ量とアクセス数が相互作用するため、どちらかを減らす必要がございます。
アクセス数を減らすことは得策ではないため、この場合、ページサイズを減らす対応をとってください。




通信回数を抑える方法

広告出稿などでLPフォームへの大量アクセスが予想される場合は、商品選択リストのテンプレートファイルの編集を行うことで、商品の初期情報を読み込むための通信が抑えられ、アクセス数×通信回数によるサイトへの負荷を軽減することが可能となります。

テンプレートファイルの編集は下記を参考にご対応ください。

■対象ファイル
・pc/templates/ユーザーテンプレート/shopping/lp.tpl
・smp/templates/ユーザーテンプレート/shopping/lp.tpl

■編集方法
pc/templates/ユーザーテンプレート/shopping/lp.tpl
41行目付近に下記のように赤文字の記述を追記してください。


▼下記をコピーしてご使用ください。 
<option value="" class="js-lp-product-empty-option">商品を選択してください</option>
1342行目付近に黄色く囲んだ箇所の記述を追記してください。


▼下記をコピーしてご使用ください。 
$emptyOptions = APP$('.js-lp-product-empty-option');
        if ($emptyOptions.length > 0 && $emptyOptions.length == $emptyOptions.filter(':selected').length) {
        lp.emit('lpFetched');
        return;
    }
smp/templates/ユーザーテンプレート/shopping/lp.tpl
23行目付近に下記のように赤文字の記述を追記してください。


▼下記をコピーしてご使用ください。 
<option value="" class="js-lp-product-empty-option">商品を選択してください</option>
1378行目付近に黄色く囲んだ箇所の記述を追記してください。


▼下記をコピーしてご使用ください。 
 $emptyOptions = APP$('.js-lp-product-empty-option');
        if ($emptyOptions.length > 0 && $emptyOptions.length == $emptyOptions.filter(':selected').length) {
        lp.emit('lpFetched');
        return;
            }
※各テンプレートファイルの正確な箇所については、pr_defaultの同ファイルをご参照ください。


■編集後のイメージ
テンプレートファイルを編集すると、以下のように商品名の個所が変わります。




CTAボタンによる商品の自動選択方法も併せてご活用ください。


ページサイズを減らす方法

ページ容量で最も大きな割合を占めているものの一つが画像や動画のファイルです。
画像や動画に対して行える簡単な方法としては、下記の4点になります。

① 不必要に大きな画像を使用しない
表示領域の最大幅が600ピクセルであれば、1000ピクセルの画像をアップロードする必要はありません。
その場合は、画像そのものを適正サイズ（600ピクセル）に変更してください。

※画像を作成したご担当者様にご依頼するか、画像サイズが変更出来るWEBサイト・フリーソフトをご利用ください。
（「画像サイズ 変更」などの検索ワードで探すことが出来ます。）

② 画像容量を圧縮する
画像を圧縮することでファイルサイズが小さくなります。
※画像を作成したご担当者様にご依頼するか、画像容量が変更出来るWEBサイト・フリーソフトをご利用ください。
（「画像サイズ 圧縮」などの検索ワードで探すことが出来ます。）

③ 画像に対し、lazyload の設定を行なう
lazyload(レイジーロード)とは　
ページアクセス時に"すべての画像"を読み込むのではなく、"ブラウザに表示された領域の画像"を都度読み込ませる設定になります。
■実装方法
対象画像imgタグに「loading="lazy"」を追加するだけでOKです。

実装例） 
<img src="abc.png" alt="abc" loading="lazy" style="min-height:XXXpx">
※min-heightの値（XXXpx）は、各画像ごとに最低限表示させたい高さを指定してください。
※tplを編集する際は、必ずバックアップをお取りになってから作業を行なってください。
※編集後は必ず動作のご確認をお願いいたします。

④ 動画ファイルを変更する
動画をGIFアニメーションを用いて再生しているとファイルサイズが大きくなり、ページの読み込みに時間がかかります。
動画を再生する場合は、MP4フォーマット形式に変更する事を推奨します。




よくある質問

この記事の目次

  1. トラフィックについて
  2. トラフィック集計について
  3. トラフィック減少の有効な手段
  4. ページサイズを減らすメリット
  5. トラフィックを減らすに
  6. よくある質問

ありがとうございました。
よろしければ、ご意見をお聞かせください。

件名、コメントをご入力いただき、『送信』ボタンをクリックしてください。

ご意見を送られない場合は、『閉じる』ボタンをクリックしてください。

件名：

お問い合わせ内容：

閉じる

© RPST Inc.