2012 年 3 月 8 日

楽天ページの表示を速くする方法

rakutenRMS

楽天店長から、”ページの表示が遅くて、お客様からクレームがくる”という声をたまに聞きます。

バナー画像、商品画像が多い楽天サイトは、特に表示速度が遅くなりがちです。
あまり遅いと、離脱率も上がります。まず画像を減らすことが重要です。

次にひとつひとつの画像サイズを小さくすることも重要です。

楽天の商品画像は拡大表示したとき、お客様に商品の詳細がよくわかるように、できるだけ大きめの画像を作成したくなります。
しかし、その画像をトップページやサイドバーで、そのまま利用すると、ページの表示速度が非常に遅くなります。
見た目は小さくても、画像サイズ自体が大きいですから、ブラウザがダウンロードするのに時間が掛かかります。

しかし、小さな画像を作るのは手間ですし、キャビネットのサイズが限られているので、あまり多くの画像も作れません。

こういうとき、こんな方法は、いかがでしょうか。

例えば、店舗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の中において利用するのは問題ないと考えています。

もし、表示速度が遅いとお悩みの楽天店長様は、一度試してみてはいかがでしょうか。