one web world one web ワールド

 
レスポンシブone web ワールド学び

レスポンシブWEBデザインは亀ですか? 表示スピードを速くできない理由

0909-7

未来の画期的なWEB構築方法の1つが、レスポンシブWEBデザインです。このコーナーでも何回か取り上げていますが、最大のメリットは、「1URL、1HTML=ページが1つである」こと。つまりどのデバイスでも、同じページを表示できることです。

これまでのモバイルサイト構築は、てっとりばやく専用のモバイルサイトを作る、ということが主流でした。しかし、専用サイトを作ってしまうと、ランディングページが異なることから、SEOやソーシャル共有、メールリンクなどの点で不都合が発生してしまいます。

その点、レスポンシブウェブデザインは、それらの同一性が保たれ、WEBデザイナーにとっても、注目されている構築方法のひとつです。

最大の問題は、表示スピードが遅いこと

レスポンシブWEBデザインの最大の課題は、表示スピードが遅くなってしまうことです。どれくらい遅いか。サイトの中には、1分経過しても表示されないものがあったりします。表示スピードが遅いということは、端的にいって、検索率が大幅減少し、直帰率も増えてしまいます。Googleの発表でも「表示に5秒以上かかると、ユーザーの74%は、離脱する」というものがありました。

Google発表

表示速度が0.5秒遅くなると、検索数が20%減少します。
表示時間が5秒以上かかると74%のユーザーが離脱します。

Yahoo! JAPAN発表

表示速度が0.4秒遅くなると、検索結果閲覧が5-9%減少。
また、最大の問題といえば、表示スピードが遅くなることで、資料請求や会員登録などのコンバージョンレートが減少し、Eコマースでいえば、売上げそのものが大きく下がってしまいます。

そのため、Eコマーストップ300企業の中でも、レスポンシブWEBデザインを採用している企業はわずか2社しかありません。

PC用の画像まで全部読み込んでしまうのが原因だ

なぜ、遅い表示という問題がレスポンシブWEBデザインで起こってしまうのでしょうか?

レスポンシブWEBデザインの場合、モバイルでアクセスしてもPC用の画像までもが全部読み込まれてしまいます。つまりモバイルでは、表示もしないのに、すべてを読みこむために、容量が大きくなり表示が遅くなるというわけです。不安定なモバイル回線においては「ファイル容量の大きさは致命的」となってきます。

どれくらいの容量なのでしょうか? 通常のモバイルサイトの容量が500K前後なのに対して、レスポンシブWebデザインの場合は、1MB~2MB前後。中には3MBを超えるもの(信じられないでしょうが、5MBや8MBなんてサイトも)があったりします。そのため、不安定な回線においては、1分程度かかっても表示されないという、笑えない事実だってでてきます。こうした問題を解決にするには、ファイル容量を極力小さくすることです。

平均スピードは 38/100という評価

では最新のレスポンシブWEBデザインだと、どれくらいの表示スピードとなっているのでしょうか? ということが知りたくなってきたので、Googleが提供している「Page Speed Insight」という計測ツールを使って各サイトを調べてみることにしました。

調査対象は、日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイトを集めた「レスポンシブウェブデザインジェーピー(RWDJP https://responsive-jp.com/)」というサイトから、最新の該当サイトを100件ほど、ピックアップして計測してみました(計測エラーや特殊なものを除くと、93サイトになりました)。

すると、分布は図1のようになりました。Googleの推奨スピードは60/100以上です。この条件でいえば、図2のように、基準を満たしたサイトはわずか5サイト!しかありません。まあまあの速度の50-59の満たすのが11サイト。残りの83%は、50に足らない「不満足」なサイトという結果がでました。ちなみに80以上はグリーン、60以上はオレンジ、それ以下はレッドのマークで表示が装飾されます。

表示スピードの分布

[図1]Googleでは、60点以上を推奨。すると、わずか5%にしか適合しません。

ほとんどのサイトが遅い

[図2]基準を満たしたサイトはわずか5サイト!

結果、最新のレスポンシブWEBデザインでは、平均スピードが38/100となり、表示スピードにかなりの課題がある結果となりました。

Web制作会社のRWDは、実はかなり遅い!

PageSpeed Insightsたまごクリニック

点数66点のためオレンジ。80を超えるとグリーンで表示されます。

調査した中でトップだったのは、66/100の金沢たまごクリニックという病院のサイトです。

ほとんどの上位のサイトは、モバイルファーストで設計されているということが分かりました。タブレットデザインを軸として、PC側はそのまま拡張し、モバイル側はカラムを1列に並べるという手法です。つまりPC用のデザインUIは持たせない設計で、タブレット用デザインをそのまま拡張する形です。グリッドをどんどん切り替える設計のサイトは、大半が40以下の低評価となっていました。

また、Page Speed InsightではPCサイトのスピードも計測できますが、PCとモバイルとを比較し、モバイルでどれだけ遅くなるかも探ってみました。平均で28%も遅くなっていました。この数字が大きいほど、PCに比べて、モバイル側の設計になんらかの問題があり、パフォーマンスがしっかり出ていない可能性があります。

少々残念なのが、WEB制作やデジタルクリエイティブの会社のレスポンシブWEBデザインが総じて、評価が低いということです。これはショーケースの意味合いもあるためでしょうか? 見た目を重視し、画像を大きく、多く使っている傾向にあります。

UXの評価は、意外と高く98点!

UXの評価

UXの平均は98.2点。

UXの評価はどうでしょうか? なんと100点満点が21サイト。99/100が31サイト。平均は98.2と、総じてレスポンシブWebデザインのUXは高いと言えます。 もっとも、この計測ツールはUXに関しては、モバイル対応をしていれば95以上を表示することが多く、この計測サイトでは、厳しいスピード評価に比べて、UXの評価が甘いと言えるでしょう。

ここまで調べてみて思うのが、スピードの平均が38点。60点を超えたサイトが5つしかないという事実です。パフォーマンスという点では、レスポンシブWEBデザインは、ほぼ全滅です。

レスポンシブWebデザインは、Google基準をパスできない!?

ならば英知とお金をふんだんにかけた大企業のサイトはどうでしょうか? このサンプルとは別に、40のサイトを無作為にピックアップして調査をおこなってみました。すると、平均では47.9点。ここでの最高評価はマイクロソフトのsurfaceのサイトで、評価は68/100でした。このサイトは、モバイルデバイスの販売サイトなので、当然といえば当然ですが、さすがです。しかし、よく見ると、このサイトもモバイルファーストで設計され、PC専用のUIはなく、タブレットを拡張したただけのデザインとなっています。

さらにレスポンシブWebデザインの制作で評価の高いX社のサイトを計測してみました。5サイトのみの平均ですが、平均57.6点というという結果となりました。そして高速なものほど、PCのUIは用意されておらず、タブレットの拡張になっています。

つまり、従来型のレスポンシブWEBデザインの限界値は、上手に作ったとしても50前後ではないでしょうか? これでは、Googleのスピード基準をクリアすることはできません。

脅威の表示スピードを誇るAmazonのサイト

ちなみに、スピードキングであるAmazonはどれくらいのスピードでしょうか? Amazonは、専用のモバイルサイト用意しています。条件は違いますが、最速96点を出しています(2014年7月下旬)。

また、弊社があつかった花王のキュレル、モビファイのサービスサイトは、それぞれ76点、69点と、One WEBながら、極めて速いスピードを実現しています。

花王株式会社 キュレル https://www.kao.co.jp/curel/
株式会社ドーモ モビファイ https://www.domore.co.jp/mobify/

つまり、従来の手法のレスポンシブWEBデザインである限り、PCを含めたデザインだと限界値は50前後。PCサイトをやめて、モバイルファーストに設計した場合、60前後。となるのではないでしょうか?

モバイルファーストで設計しなければクリアできない

Googleが推奨しているにも関わらず、このテストをレスポンシブWEBデザインでは、クリアできないということになります。それでいいのでしょうか?

クリアするためには、次の秘策が必要です。

■完全にモバイルファーストに徹した設計とする。PCのUIをあきらめる。
■画像や写真を極力少なく、小さく扱う。
■バックヤードのサーバーの能力を高くする。
■CDN(コンテンツデリバリーネットワーク)を導入する。

上記項目の優先順位の判断と、インフラ強化を考えましょう。

金沢たまごクリニック

Google PageSpeed Insightsで66点の金沢たまごクリニック

北米でそうであるように、 第二世代のモバイル対応には、間違いなくスピードが問われてきます。見た目の美しさだけでなく、表示スピードを上げ、いかにCVR、売上げに貢献するか、また企業でいえば、高速化によりモバイルマーケティングを最大化させることが重要になってきます。

そういった意味では、レスポンシブWEBデザインにはまだまだ大きな壁がありそうです。

注:Google page Speed Insightですが、現在もいろんな改良が加えられているようで、大きく数字が変動することもあります。ぜひ時期を変えて試してみてください。

この記事を書いた人
C1-5 占部雅一
株式会社ドーモ 代表取締役
雑誌の編集者を経て1995年にWeb制作会社を設立。女性コミュニティサイトの立ち上げ・運営、メディアサイトのコンテンツや広告開発に従事。近年は「マルチスクリーン対応」を意識した企業サイトのモバイル対応を推進。ユーザーベネフィットを生み出すモバイルWebの在り方を提唱している。
タグ

記事mobifyロゴ
Mobify(モビファイ)とは

Googleが認定しているマルチスクリーン対応のための最適化サービス。
デバイスに応じ、専用にデザインされたサイトを表示することができます。
ページの表示を高速化させる仕組みも持ち合せており、ユーザーの離脱を防ぐことが可能です。

▸Mobify(モビファイ)についてさらに詳しく

 最新記事