商品ページの表示時間について

Question

いつもありがとうございます。

商品ページですが、
ヘッダーやレフト、フッター等に
styleやiframeを加えたせいか、
速度がかなり遅くなったように感じます。

商品ページ自体は、すぐに表示され、
スクロールもでき、ページ全体を読んで
いくことはできますが、

画像やテキストリンクがクリックできるまで
少し時間を生じてしまい、ちょっとストレスです。
買い物カゴに入れるボタンも同様です。

styleやiframeを外せばこの点は
解決できるとは思いますが、
何か他に改善策はありますでしょうか。

よろしくお願いいたします。

Answer

ECマスターズの田中です。

私でも確認したところ、
確かにiframeが多いために
読み込む必要があるパーツ（画像、JavaScript、スタイルシート、情報計測用ページなど）
が多くなり、結果としてページの読込が遅くなり、
ページ読込完了と共に動作する機能が使えるようになるタイミングが
遅くなっている模様です。

一度、ヘッダー・フッター・レフトナビにて
現在使用中の設定をコピーし、
コピーした設定からiframeタグをすべて削除していただき、
商品ページ１つに適用してみて、
どの程度読み込み速度が改善されるか
ご確認いただけますでしょうか。

読み込み速度が大幅に改善されましたら、
また１つずつiframeタグを復旧し、ページを読み込んでみて
どの程度読み込み速度が遅くなるかご確認いただくことで、
速度低下の原因となっているiframeタグの特定をお願いします。

Answer

ありがとうございます。
いくつか削除したりしてやってみたのですが、
どうもうまくいかなかったもので。
再度試して確認してみます。

Answer

ヘッダー・フッター・レフトナビのテンプレート設定にて
ひとつのテンプレートをコピーして、
iframeタグをすべて削除したプンレートを別で作成し、
一つの商品に反映してみましたが、ほとんど変わらないようです。

完全に読み込むまで、商品ページは、トップページの7、8倍程時間が
かかります。
店舗内レコメンド等も削除してみても同じでした。
何か漏れている箇所があるのでしょうか。
他のショップさんでも同じように時間がかかることもあれば、
当店より3分の1～3分の2くらいの速さで読み込むことも
あるようです。
何かわかりましたらと思います。

Answer

ECマスターズの田中です。

実際の様子を確認させていただきたいのですが、
別途作成していただいたテンプレートを適用した商品ページの
商品管理番号をいただくことはできますでしょうか。
既存の商品ページをコピーし、サーチ非表示に設定した商品などで結構です。

Answer

おはようございます。

商品管理番号は ar-02 です。
今朝確認したら、昨日確認した時点よりは
だいぶ読み込みが早くなっていました。
iframeを抜いて10秒程。

再度iframeを設置しながら確認したいと思います。

Answer

遅くなってしまいました。

普段の作業に追われて正確に確認できていませんが、
ifram、一つづつ加えるごとに読み込みに時間がかかるようです。

商品管理番号zakka16に関しては（その他はわかりませんが）、
今ページを開いてみると読み込みまで1分近くかかったようです。



も遅くなり原因のようではありますが、

現在ページ右側で表示している
縦に流れる商品画像に関しまして、

当店で扱っている商品案内として
良いかとも思いますが、

商品を見に来たお客さま視点では
あまり意味が無いでしょうか？

実際にシステム利用料として毎月払って
いますが、あまり意味が無いようなら
できるだけiframを外したほうが良いのかと
思っています。

読み込み速度はあまり気にしなく良いものでしょうか？

現在利用しているものと言いますと、
商品ページによっては表示されないものもありますが↓

・商品ページ右側で縦に流れる商品画像
・左メニューの沖縄情報館ランキング
・左メニューの現在の店舗情報
・左メニュー下部のランキング入賞アイテム
・商品ページ下部のお客様の声

雑な質問内容になってしまい恐れ入りますが、
よろしくお願いします。

Answer

ECマスターズの田中です。

読み込み速度について、改めて
Google Chromeを使って確認する方法を調べましたので、
ご案内いたします。

最初に、こちらのページの手順に従って、
開発者ツールの「Network」タブを開いてください。
http://hakuhin.jp/js/network_capture.html#NETWORK_CAPTURE_02
（Chromeのバージョンの違いにより、ボタンの配置が若干異なる可能性があります）

開いた状態で、商品管理番号zakka16を開いていただくと、
開発者ツールの一番下に、時間の表示が更新されていきます。
更新が停止すると、たとえば

68 requests | 13.1 KB transferred | Finish: 881ms | DOMContentLoaded: 763ms | Load: 870ms

このような表記になります。

上の例ですと、
赤文字で表示されている「Load: 870ms」が、ページの読み込み完了までの時間、
「Finish: 881ms」が、ページ読み込み完了後に発生した通信も含めて完了した時間になります。
msは「1/1000秒」ですので、上の例の場合は、いずれもほぼ0.9秒程度となります。

この方法で、商品ページ（例えば、商品管理番号zakka16のページ）を読み込んでみると、
数秒かけて一度ページ読み込み完了した後で、
数倍の時間をかけて様々なパーツの読み込みを行っていることが分かります。
（私の環境では、平均的にLoadが5秒程度、Finishが20秒程度となりました）

同じ方法で、iframeで埋め込んでいる各HTMLを計測しても
ほぼ1秒もかかることなく全体の読み込みが完了いたしますので、

状況からの推測になりますが、
商品ページにて一度読み込み完了した後のパーツ読み込みが
重さの原因となっている模様です。

他のショップの商品ページを同じ方法で計測しても、ほぼ同様に
読み込み完了後のパーツ読み込みで
時間がかかっておりますので、重さの原因は
iframeではなく、商品ページの元々の構造が原因であると考えられます。

お手数ですが、改めて
iframeがある状態、ない状態の商品ページをこの方法で計測していただき、
「Load」の時間がどれだけ変化するかを
ご確認いただけますでしょうか。

Loadの時間にそれほど差がなければ、
iframeは読み込み速度に与える影響が少ないということですので、
入れていただいても問題ないと思いますが、

2009年に調査されたデータによりますと、
ページの読み込みに2秒以上かかるとイライラし始めるという結果が
出ております。
下記URLをご参照ください。
http://web-tan.forum.impressrd.jp/e/2010/04/27/7848

特に、ネットショップで買い物をする人は
表示時間を気にする傾向にあるとの結果が出ておりますので、

Loadの時間に数秒単位で差がでるようでしたら、
なるべく読み込み速度を優先するように、
iframeを埋め込む数を調整していただければと思います。

まずは、iframeがある状態、ない状態の商品ページそれぞれで
「Load」の時間を計測していただけますでしょうか。

Answer

お世話になっております。
上記の通り計測してみました。

計測した商品ページは「商品管理番号：ar-01」です。

こちらの環境で、Load時間の結果は
↓のとおり表示されました。

iframe有　⇒　4.19s

iframe無　⇒　2.45s


関係無いですが、本店サイトの商品ページの
Load時間は確認した限り1s前後でした。

やはりiframeの影響でしょうか。

Answer

ECマスターズの田中です。

Load時間は、複数回計測された平均の結果で間違いないでしょうか。
1回だけの計測ですと、キャッシュの有無など、
不確定要素が多いのでご注意ください。

複数回計った結果であれば、
確かにiframeの影響である模様です。

Answer

1回だけの計測でした。。
また確認してみます。