最新のレスポンシブウエッブサイトでも、8割のサイトはまだまだ高速化が可能！

続々増え続けるレスポンシブウエッブデザインだが、

8割のサイトは、表示スピードが遅いサイト

　スマートフォン、タブレットなどのマルチスクリーン時代において、その表示対応方法として注目されているのが、レスポンシブウエッブデザイン（RWD)です。

　2012年にはGoogleがこのレスポンシブデザインを推奨Webとしたことから、にわかに注目をあびてきましたが、ここに来て多くのサイトが作られるようになりました。

　

　なぜ、レスポンシブウエッブデザインが注目されるかについてですが、どのスクリーンでも同じURLを維持し、クローラーがひとつで済ませられることができ、ひいてはSEO対策、Facebookなどのソーシャルシェアに有効、さらにはアクセス解析の面で無駄がない。など、Webのマーケティング活動において無駄のない環境を作り得るからです。

　ところが、このレスポンシブウエッブデザインですが、軽量化においては、まだまだ多くの課題があります。どれくらい課題があるかをちょっと調べてみました。次の表は、最近公開された新しいレスポンシブサイトです。
　　　　　　　　

　　　　　2013年後半に公開されたレスポンシブウエッブデザイン・サイト

※モビファイで計測。白地の部分で約8割は削減が可能なサイト。ピンク地のみ0.5秒以下。つまり8割のサイトではさらに高速化が可能です。

　これらのサイトは、レスポンシブウエッブデザインのまとめサイトで有名な「RWDJP(http://responsive-jp.com/）からピックアップした４５のサイトです。最新からのアトランダムなので、大小いろんなサイトが混じっていますがどれも2013年後半に公開されたものです。これらのサイトが「どれだけ軽量化できるか」について弊社のモビファイの軽量化シュミレーションでテストしてみました。11月6日に実施。

シュミレーターについて

※モビファイ　シュミレーター　　http://www.mobify.com/

※モビファイスピードについて　　http://www.domore.co.jp/mobify/lp_speed.html

　

　すると、なんということでしょう。４５サイト中、６サイトをのぞいて３９サイトにおいて、0.5秒以上の高速化が可能という結果になりました。また、容量の削減においても２０％以上の効果が得られるのが３８サイトでした。

※読み込みスピードは３Gで平均ダウンロードを１Mbpsで試算

　容量は１／２に削減可能。だから速くロードが可能に

モビファイのシミュレート画面。ご覧のように、このサイトでは容量を１／２に削減可能です。表示スピードも2秒ほど改善が見込まれます。（ダウンロードが1Mbpsの場合）。

　これが意味するものは、こういうことです。

ポイント１：レスポンシブデザインの画像は軽量化が不十分であること

ポイント２：それを徹底的にやるには、テクニックとコストが必要になる。

日本を代表するレスポンシブウエッブデザインのサイトを調査

次に、レスポンシブデザインで優れた作品だとされるものを計測してみました。こちらは、あまりにもびっくりです。

　１１サイト中８サイトで、２０％以上の容量削減を期待することができ、0.5秒以上の高速化が見込めることができるからです。この中には、数百万円の予算を投じたと予測されるメガ級のレスポンシブウエッブサイトも中にはあります。

　
　しかし、誰もが知っているような企業のサイトでも、ダウンロードに数十秒がかかってしまうわけです。そしてモビファイで試算すると、短縮効果も４～8秒も期待されるというサイトもでてきました。

※モビファイで計測。代表的な評判のいいとされるサイトでもこの結果に。11サイト中、８サイト(白地部分）は0.6秒以上の短縮が可能でした。これが日本のレスポンシブウエッブデザインの実力かもしれません。

　繰り返しいいますが、評判のいいとされる大手のレスポンシブウエッブデザインでもこの結果です。

従来のレスポンシブウエッブデザインサイトでは限界？
読み込みスピードに時間のかかりすぎます

　なぜ、このようなことが起こってしまうのでしょうか？

その理由を私なりにまとめてみました。問題は次です。

１．現状のモバイル対応とは、「表示の対応」にすぎなく、高速化はあまり考慮されていない

２．上記を対応しようとすると、画像の軽量化などの対応に工数がかかる

３．高度なレスポンシブウエッブの技術、例えば、response.jsなどの高速化手段を使うと、複雑な行程が必要となる。

４．必然的に高度なテクニックが増えてコストが割高になってしまう。

５．そもそも手作業のデザインでは、画像の軽量化に限界がある。

絞られてきたマルチスクリーン対応。１つは、レスポンシブウエッブデザイン。もうひとつはサーバーサイドテンプレートの調整になる。

　これまでさまざまなモバイル対応のテクニックやサービスが紹介されてきました。これらもいろんなトライアルがされてきましたが、どうやら２つに絞られてきたようです。
北米では、マルチスクリーン時代への対応は、１）レスポンシブウエッブデザインと、２）サーバーサイドデザイン調整　の２つに絞られてきました。

　サーバーサイドのテンプレート調整ですが、これは予算や内部の運用体制があればこれでもいいのでしょう。サーバーサイドの調整の問題点は、3倍から5倍のコスト増が必要だとされています。これは大企業や大規模なEコマースのオペレーション体制が内部にあることが前提です。

　しかし、９５％の企業は、１）のレスポンシブウエッブデザインを選択せざるえません。やはり、まだ課題が大きいとはいえ、レスポンシブウエッブデザインには未来があるわけです。

モビファイは「クラウド型レスポンシブウエッブデザイン」である。

　モビファイのPRになって恐縮ですが、ではモビファイはどのポジションに属するかです。元々、アダプティブWebだというカテゴリーで表示されてきましたが、要は「クラウドで対応するレスポンシブウエッブデザイン」です。Googleが2013年の5月にモビファイを推奨のマルチスクリーンベンダーとしました。これはモビファイがレスポンシブウエッブの基本を充実に再現しているからです。
また、従来のレスポンシブウエッブにはない優れた特徴をもっています。

　それは、
・元のサイトのPCウエッブをリニューアルする必要がなくモバイル側のサイトでレスポンシブデザインにする。
・初期構築費も複雑なレスポンシブデザインを組む必要がなくコストを下げられる
・運用において、画像処理、リサイズ、軽量化をクラウドに任せて運用作業を削減できる。
・読み込みが遅い時に表れるJSのエラーの発生を抑えられる
・レスポンシブに詳しいデザイナーでなくても運用は可能である。
など、いいことがたくさんあります。

　モビファイのようなサービスと絡めたほうが、実は運用工数をさげ、コストダウンを図れるという大きなメリットが生まれます。ツールの費用を払ったとしても、この結果は大きいでしょう。モビファイは将来につなげられる「クラウド型レスポンシブウエッブだから」です。