スマートフォン時代のユーザビリティの考え方

第4回 スマートフォンでも速度への配慮を忘れない

この記事を読むのに必要な時間:およそ 6 分

データ通信料が制限を超えて,アクセス規制にひっかかってしまい……

先日筆者は,スマートフォンでのデータ通信量が3日で1GBを超えてしまい,ソフトバンクのアクセス規制にひっかかり,アクセスのほとんどが封じられる,という罰ゲームを受けました。筆者の料金プランはテザリングのできないプランで,1ヶ月7GBの制限はないのですが,3日で1GBという制限はあるのですね。まったく知りませんでした……。

そして規制を受けた結果,飲み会の場所を知るのに,Gmailのメールをアプリで開くだけで何分も待たされるは,Google Mapにはまったく地図が表示されず,ピンと自分の位置だけで地図がない状態でたどり着かなければならないわで,霧雨舞う渋谷を10分以上さまよい歩く目にあいました。

規制を受けたとはいえ,最大128KBの速度は出るはずです。128KBといえば,はるか古代,ISDNが登場した際には「ものすごく速い」というCMで盛んにアピールされていた記憶があります。人間の慣れというのは恐ろしいと思うとともに,最近のウェブサービスがいかに高速なネット接続を前提としているかを思い知らされました。それでもGoogleは,相当遅い回線を意識していると思いますし,ウェブ検索はなんとか使えないことがないレベルでしたが,とにかく制限が解除されるまでは辛い日々でした。回線が遅くなると多くのサイトがまったく使えない状態になることが,そしていかに自分がスマートフォンとネット上においた外部記憶に依存しているのかがよくわかりました。

サイトの表示速度が遅いとこれだけヤバい

最近は,スマートフォンのデータ通信速度もどんどんと向上してきて,以前とは比べ物にならないくらい快適に利用できるようになりました。それにともなって,スマートフォン向けのサービスやサイトもどんどんリッチになってきています。そのおかげで,スマートフォンがより便利に利用できるようになっているのは事実です。

ガラケー時代とは違って,スマートフォンのサイトの実機チェックはWiFi接続された環境で行うのが普通ですし,2013年のAkamai Technologiesの調査によれば日本のインターネット接続速度は世界第2位でものすごく速いので,サーバがどこにあるかによってレイテンシに差こそあれ,基本的には速度を気にする必要はほとんどありません。しかもちょっとした遅さなど,開発をして何度もそのページを見ていると,なんとなく慣れてしまったりするものでもある気がします。

だからついつい忘れがちになってしまうサイトの速度ですが,サイトのユーザー体験向上のためには非常に重要です。とはいっても,⁠どれくらい重要なのか」がわからないと,優先順位もつけられないし,ボスも説得できないでしょう。そこで調べていきますと,Visualizing Web Performanceというインフォグラフィックが見つかります。ここに書かれている内容を抜粋して要約すると,以下のような感じになります。

  • 57%のユーザーは,サイトの表示に3秒以上かかるとサイトを離脱してしまう。その80%はもう二度と帰ってこず,しかもその半分はそのサイトに関してネガティブな話をほかの人にする。
  • 85%のユーザーは,同じサイトのモバイル版はデスクトップ版よりも高速であることを期待してるし,57%のユーザーは実際にモバイル版サイトにアクセスした際に問題を感じている。そして,感じた問題の3分の1は速度の問題である。
  • amazon.comでは,サイトの表示速度が0.1秒速くなると,売上が1%上がる。
  • yahoo.comでは,サイトの表示速度が0.4秒速くなると,トラフィックが9%上がる。
  • ページの読み込みが1秒遅くなると,コンバージョンは7%落ち,ページビューは11%落ち,ユーザー満足度は16%低下する。

なかなかに刺激的な数字が並んでいます。それを意図してるのであたり前なのですが,⁠とにかくサイト表示の速度を上げないとヤバい!」という気分になるには十分でしょう。

このインフォグラフィックは,PCサイト,モバイルサイト両方(そしておそらく日本のいわゆるガラケーや海外のWAP端末など含むフィーチャーフォン)を含んだ統計結果ではありますが,もちろんスマートフォンサイトにも完全に当てはまる内容です。そして回線速度が環境によって大きく変化し,時に制限を超えて128KBになってしまうスマートフォンサイトでは,いかに回線速度とうまく付き合っていくかが重要になってきます。

まずは己を知る ~とりあえずPageSpeed InsightsとYSlowでチェック

もちろん,サイトの内容やUI,装飾など,見た目に影響をするものを整理・調整してサイトを軽くするのは大きな効果があります。ただ,本連載はエンジニア目線でのユーザビリティ,ユーザー体験向上を目指すものなので,そのあたりにはあまり触れず,⁠表示結果をなるべく変えずに,パフォーマンスを上げる戦略」を検討していくことにします。実際に,こうしたパフォーマンスの向上は近年非常に注目されつつあるトピックであり,詳細なテクニックに入ってしまうととてもすべてを語り尽くせるものではないのですが,今回はその導入部分というか,注目すべき点などをいくつか見ていきましょう。

パフォーマンスの向上に着手するにあたってまず初めにすることは,己を知ることです。つまり,⁠サイトのパフォーマンスがどれくらいなのか」⁠どういった点がまずいのか」といった現状を調べるのです。

これはかんたんにできます。GoogleとYahoo!が,そのためのツールを公開してくれているからです。

Google PageSpeed Insightsは,Googleが提供する,オンラインで診断を行うことができるツールです。YSlowというYahoo!が提供する素敵な名前のツールは,ブラウザの拡張として提供されています。両方を使ってチェックするとよいと思いますが,まずはURLを入力するだけでPC版・スマートフォン版両方をチェックしてくれるGoogle PageSpeed Insightsを使ってみるとよいでしょう。

Google PageSpeed Insights

Google PageSpeed Insights

このツールを使うと,いろいろ問題点を指摘されて凹むことができますが,指摘点が多いということは,それだけ改善の余地が見込めるということです。がんばって修正しましょう。

GoogleやYahoo!がこうしたツールを公開している背景には,⁠せっかく検索結果にページを表示しても,そのページの速度が非常に遅くてユーザーが不満をいだいてしまうと,それを検索結果に表示した検索エンジンそのものの評価も下がってしまう」という考えがあると思われます。実際Googleはサイトのスピードは検索結果のランキングに影響するとアナウンスしていますし,モバイルサイトに対してもその考え方を適用する予定であると昨年6月に伝えており,SEO的にもページの速度を上げることはとても重要であることがわかります。

著者プロフィール

水野貴明(みずのたかあき)

ソフトウエア開発者兼技術系ライター。飽きっぽい性格だがプログラミングだけは小学3年生でに初めて触れて以来飽きることなく続いているのでつくづく性に合っていると感じてる。最近はウェブサービスやゲームのサーバサイド,スマートフォンのアプリケーション開発などが中心。訳書に『JavaScript: The Good Parts』(オライリー・ジャパン),『サードパーティJavaScript』(KADOKAWA/アスキー・メディアワークス)など。保育園児の息子とともに眠り,早朝起きて仕事をする生活を実践中。

URL:http://takaaki.info/

コメント

コメントの記入