楽天店長から、”ページの表示が遅くて、お客様からクレームがくる”という声をたまに聞きます。
バナー画像、商品画像が多い楽天サイトは、特に表示速度が遅くなりがちです。
あまり遅いと、離脱率も上がります。まず画像を減らすことが重要です。
次にひとつひとつの画像サイズを小さくすることも重要です。
楽天の商品画像は拡大表示したとき、お客様に商品の詳細がよくわかるように、できるだけ大きめの画像を作成したくなります。
しかし、その画像をトップページやサイドバーで、そのまま利用すると、ページの表示速度が非常に遅くなります。
見た目は小さくても、画像サイズ自体が大きいですから、ブラウザがダウンロードするのに時間が掛かかります。
しかし、小さな画像を作るのは手間ですし、キャビネットのサイズが限られているので、あまり多くの画像も作れません。
こういうとき、こんな方法は、いかがでしょうか。
例えば、店舗URLが
‘http://www.rakuten.ne.jp/gold/youraccuont/’で、
表示したい画像のRキャビネットの位置が、
cabinet/120306/item0001_800x800.jpgとします。
このjpgファイルの解像度は800x800pxだとして、今、75x75pxに縮小したいとします。
imgタグは以下のように記述します。 <img src="http://image.rakuten.co.jp/youraccuont/cabinet/120306/item0001_800x800.jpg" alt="hoge" title="hoge" style="width:75px;height:75px" /> src属性を次のように書き換えます。 src="http://thumbnail.image.rakuten.co.jp/@0_mall/youraccuont/cabinet/120306/item0001_800x800.jpg?_ex=75x75"
http://thumbnail.image.rakuten.co.jp/@0_mall/の後に、キャビネットの画像パスを付加して、縮小したい画像サイズを指定します。
＃GOLDの領域にある画像には適用できないようです。
こうすると、画像が縮小されてから、ブラウザに転送されるので、転送速度が向上します。
名前からわかるように、サムネイルを作成する楽天の画像縮小サーバーです。
特に推奨されている方法ではないですが、楽天RMSが生成するページの中ではよくでてきます。
楽天RMS,GOLDの中において利用するのは問題ないと考えています。
もし、表示速度が遅いとお悩みの楽天店長様は、一度試してみてはいかがでしょうか。
