表示速度は遅くない。速いレスポンシブWEBデザインでのECサイト

以下はaishipRで構築したレスポンシブWEBデザインでのテンプレートECサイトと国内の主要な非レスポンシブECサイト構築ASP・モールの5社-10店舗のLTEでのスマートフォン平均表示速度(ロード時間)の比較です。

右の非レスポンシブECサイトASPとは、これまでのPC向けにはPCサイト、スマホ向けにはスマホサイトを構築したECサイトです。左はその名の通りレスポンシブECサイト構築専用ASP「aishipR」上で構築したレスポンシブECサイトです。

この数値を見ていただくと、「レスポンシブWEBデザインでのECサイトの表示速度は遅い」なんてことは全く言えません。

よくレスポンシブWEBデザインのデメリットとして「表示速度が遅い」、「デバイス毎のデザイン訴求性が低い」の２つの大きな課題がよく上げられます。もしこれらの課題で「レスポンシブWEBデザインは良くない」と主張する人がいれば、あまりレスポンシブWEBデザインの運用について詳しくない方なのかもしれません。

PCやスマホのページ毎のロード時間を比較

もう少し詳しく、以下の光回線でのPCとLTEでのスマホ各ページのロード時間やファーストビュー（FV）表示時間の比較表を見ていただくと良くわかりますが、遅いどころか「レスポンシブECサイトは速い！」ともいえます。

国内主要の優秀なECサイト構築ASP：メイクショップさん（www.makeshop.jp/）、フューチャーショップさん（www.future-shop.jp/）、スクラッチ型ECサイト構築のECbeingさん（www.ecbeing.net/）、そしてYahoo!ショッピングさん、楽天さんからそれぞれ2店選定した非レスポンシブECサイト10店とレスポンシブECサイトについて、スマートフォンでの表示の速度比較詳細です。

[比較サンプル]
◇自社ECサイト構築ASP
メイクショップ（www.makeshop.jp/）
フューチャーショップ（www.future-shop.jp/）
◇スクラッチ型ECサイト構築
ECbeing（www.ecbeing.net/）
◇モール店舗
Yahoo!ショッピング
楽天
◇同等データ量・コンテンツ量かつスマートフォンサイト対応済のサイトを無作為に2つ選び、サンプルとして計測。
※aishipR(レスポンシブadテンプレ)：aishipRのadvanceテンプレートレスポンシブECサイト(http://abc-net.info/)

[計測方法]
◇同場所、同時間、同回線、同端末
◇ロード時間測定方法
　スマートフォン：WebDevTools
　PC：Google Chrome Developer Tools
　それぞれ3回計測の平均値／測定実施前には必ずキャッシュ削除を実施
◇ファーストビュー（FV）表示時間測定方法
　ストップウォッチによる3回計測の平均値

参考に以下がレスポンシブECサイト(aishipR)と主要5社のASP毎の非レスポンシブECサイト表示速度比較です。

レスポンシブWEBデザインの「遅い表示速度」をどのように速く解決しているのか

レスポンシブWEBデザインでのECサイトの表示速度が遅い理由としてよく以下の内容が言われています。

「どのようなデバイスに対しても、同じURL-同じソースコードで対応させようというのがレスポンシブWEBデザインで、そうするとスマホに対してもPC向けの無駄なソースや画像サイズなどを読み込むから動作が遅くなる」

どのようにして表示速度の問題解決したのか。

ではaishipRではどのように表示速度の問題を解決しているのでしょうか。なぜaishipRでレスポンシブECサイトを構築運用すると「遅くない」のでしょうか。少し詳しい技術情報は控えますが、大きくは以下の３点です。

1. RESS技術
2. CDN(コンテンツ・デリバリ・ネットワーク)
3. レスポンシブWEBデザインのマークアップ技術

レスポンシブWEBデザインはそもそもCSS側で各デバイスのレイアウトを調整します。普通にデザイン制作するだけでは課題解決がなかなか難しいのが現状です。

そこで、aishipRではレスポンシブWEBデザインでECサイトをデザイン制作する側でなく、そのレスポンシブWEBデザインのECサイトを運用するサーバやネットワーク側で表示速度を早くする処理を施しています。上記の「RESS技術」「CDN」がそれに該当します。

具体的には、RESS技術とはサーバサイドでアクセスデバイスに応じて画像を圧縮する処理やソースコードをチューニングする処理を施し、サイト全体の容量を軽量化し表示速度を改善しています。

またCDNとはコンテンツ（ECの場合は多くは画像）をインターネット経由で配信するために最適化されたネットワークを通じてユーザの端末に表示することで、表示速度を速くするものです。

参考：CDNでウェブサイトを高速化

これらRESS技術やCDNにより、ECサイトの制作者はあまり難しいことを考えずにレスポンシブWEBデザインのECサイトをaishipR上に制作すれば、サーバやネットワーク上で勝手に表示速度を早くしてくれます。

また３.レスポンシブWEBデザインのマークアップ技術については、当然ながらレスポンシブWEBデザインの制作の際に「軽くすることを考えて作る」ということです。（詳細はaishipR虎の巻：aishipRを利用するときにご案内する資料参照）また画像の読み込みを遅延ロードさせるjQueryプラグインLazy Load（レイジーロード）なども重要な技術です。

これらを組み合わせることで、レスポンシブWEBデザイン「遅い表示速度」の課題は解決すると言えます。

ここでレスポンシブECサイトの表示速度を速くするポイントと言えるのは、aishipRのようなレスポンシブ専用のRESS技術やCDNなどを標準搭載したクラウド型ECサイト構築ASP上で、レスポンシブECサイトを構築運用する必要があるということです。

これらの施策を自社で準備するのは難しい

自分たちで準備したサーバやこれまでのECサイトASP上では、この問題解決が難しいため結局レスポンシブECサイトの運用は上手く行きません。（膨大な設備投資をして自前でこれらのサーバやネットワーク導入すれば別ですが）これらのついては以下の2つ（オープンソースのECCUBEとレスポンシブ専用aishipR）のレスポンシブWEBデザインでのECサイトのロード時間を比べるとよくわかります。

【１】普通のサーバ上に構築したECCUBEレスポンシブECテンプレートサイト（右）

ロード時間……6.42秒

【２】RESS技術やCDNが施されたaishipRサーバ・プラットフォーム上に構築したaishipRレスポンシブECテンプレートサイト（左）
　　　
ロード時間……2.65秒

※ロード時間計測方法
同場所、同時間、同回線、同端末、WebDevToolsにてそれぞれ3回計測の平均値を採用。測定実施前には必ずキャッシュ削除を実施。

優秀なECのオープンソース：ECCUBEでも、結局ECCUBE側（オープンソース側）や制作側ではこれらの問題解決ができないため、普通にECCUBEでレスポンシブECサイトを構築するだけでは表示速度の問題は解決できません。

要は、レスポンシブWEBデザインのECサイトはレスポンシブECサイトを運用するための専用プラットフォームを利用してはじめて遅さの問題を解決でき、その運用が実現できるということが言えます。

レスポンシブWEBデザインでのECサイト、残された課題は？

この１年でECサイトのレスポンシブ化にチャレンジしたECサイト様の売上前年比は、ほぼ全サイト様がすこぶる好調です。レスポンシブ化の直接的な影響はどこまであるのか等含め現在aishipRでこれらの検証中で、レスポンシブ化したECサイト様の導入メリット・デメリット含め調査を行っているので、近く一部の情報を公開する予定です。

私たちはこの１年でレスポンシブECサイト導入100社の取組を通じて、これらの問題を解決しマルチスクリーン対応が必要なECサイトには「レスポンシブWEBデザイン」が最も優れた構成であることを確信しました。

当然ながら、表示速度の改善はあくなき追求をしていくことには変わりなく、当面目指す絶対指標はファーストビューを1秒以内で表示することです。

残された、レスポンシブWEBデザインのECサイトへの適用課題は組織的に導入することに関する意識だけのように思います。

岩波