モバイル時代を生き抜くためのWebパフォーマンスモデル「RAIL」 ~Response,Animation,Idle,Loadから来る「速さの目安」を知って改善しよう!~

第1回 Webの「速さ」について考える

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

はじめに

スマートフォンの流行,ソーシャルの活発化が進む中で,Webは単にPVを求めるのみならず,ユーザのエンゲージメントを掴みとるUXが求められるようになりました。

特に注目すべきはモバイル。デスクトップ主流の時代より制限が強くなったネットワーク,狭いスクリーン,そしてマウスやキーボードはどこにもありません。ちょっとしたことで,ユーザは「待つ」という行為を強いられるでしょう。

インターネットの情報は日々増え続け,モバイルでいつでもつながれる以上,それをどのような形でユーザへ届けるのかが,競合との勝負に勝つカギとなってきます。⁠待つ」という行為は,人の集中を発散させ,気持ちを別の関心事へと吸い寄せてしまいます。たとえ欲しいと思う情報がそのWebサイトにあったとしても,⁠待つ」という行動が伴っただけで,簡単に諦めさせてしまいます。他のもっと楽しいことに,時間を使おうとしてしまいます。

では,Webはどの程度の速さが求められているのでしょうか。人間は何を待ちと感じるのでしょうか。集中力が発散する待ち時間,別のことを考え始めるような待ち時間,あるいは,諦めようと感じるような時間とは,どれぐらいのものでしょうか。

それを知るベストな方法は,実際に運用しているWebサイトでデータを蓄積し分析することです。……とは言え,実際の問題として,まだそういうレベルには至れていない現場も少なくないでしょう。とっかかりが欲しい,そう感じている人もいるはずです。

そこでいくつかの,目安となる速さについて紹介します。

人間は何を「遅い」と認識するのか

以下は,GoogleのIlya Grigorik氏の著書High Performance Browser Networkingからの引用です。

図1 Ilya Grigorik「High Performance Browser Networking」より

図1 Ilya Grigorik「High Performance Browser Networking」より

100ミリ秒を超えたあたりから人間は「遅さ」を感じ,1,000ミリ秒を超えると思考が別の方向に向かいはじめます。認知心理学においても,人間が視覚の刺激を得てから,脳がそれを情報として認識するまでに100~200ミリ秒程度の時間が必要と言われています。⁠反応速度」という観点で,この100ミリ秒という時間には,重要な意味があると捉えられるでしょう。

別の視点から見ましょう。アニメーションや動画といった,動きの速さについてです。

以下は,GoogleのPaul Bakaus氏のブログエントリThe Illusion of Motionからの引用です。

図2 Paul Bakaus「The Illusion of Motion」より

図2 Paul Bakaus「The Illusion of Motion」より

人間は,10fps(100ミリ秒)で連続性のある静止画が切り替わると,それを「動き」のように感じます。それが60fps(約16.7ミリ秒)を超えたあたりが,スムーズと感じられるスイートスポットだと説明されています。⁠動作速度」の観点では,ストレスの無い速さとしては16.7ミリ秒という時間に意味がある,と捉えられます。

こうした速さに関する人間の特性を,Webサイトのパフォーマンスというコンテキストに当てはめたモデルがあります。それが「RAIL」です。

Webパフォーマンスモデル「RAIL」とは?

2015年半ばあたりからWebパフォーマンスコミュニティの間で囁かれ,Google I/O 2015においては,多くのセッションで語られたWebパフォーマンスのモデル「RAIL」⁠一言で言うなら,ユーザの気持ちを別の物事に発散させない,ストレス無く,集中してWebサイトを使って頂くための「速さの目安」です。

RAILは,Response(応答)⁠Animation(動き)⁠Idle(非実行)⁠Load(読込み)と,Webのパフォーマンスに関わる4つ要素の頭文字を取った略称です。これらの要素に対し,上記でも説明したような,人間工学的に「充分に速い」と言えるボーダーラインを与えています。

各項目について掘り下げます。

Response(応答)は100ミリ秒未満で

デスクトップPCであればクリックやホバー,モバイルであればタッチやスクロールといったユーザ操作が,スクリーン上に何かしらの変化を与えることがあります。ボタンのような形状をしていれば,押されたような反応を視覚的に表現し,ユーザに押した感を与えるというのは往々にしてあります。

こうしたアクションに対する応答は,100ミリ秒未満となるようにデザインしましょう。

Animation(動き)は16.7ミリ秒未満で

スクリーン上で何かしらのオブジェクトをアニメーションさせることはよくあることでしょう。モバイルの場合は特に,インタラクションがUXに大きく影響します。

メニューボタンなどタップすると,項目がスライドダウンされることがしばしばあります。こうしたアニメーションは,オブジェクトのサイズや場所を,短い時間ごとにじわじわと変更させることで実現できます。この時間が短いほど,アニメーションは滑らかに動きます。

この時間は,16.7ミリ秒未満で完結するようにデザインしましょう。

Idle(非実行)を100ミリ秒未満で

ブラウザ上で実行されるJavaScriptは,Workerと呼ばれる機能を使わない限り,基本的にはシングルスレッドで動きます。JavaScriptで何かしらの処理を行っている間,ユーザはスクリーン上でどんな操作を行っても反応しなくなります。JavaScriptは長い処理が必要な場合,他の処理が割り込む余裕みたいなものを作りこむ必要があります。

その期間は,100ミリ秒未満となるようにデザインしましょう。

Load(読込み)は1,000ミリ秒未満で

Webの一番の特徴は,なんといってもナビゲーションと呼ばれる操作です。ハイパーリンクやサブミットボタンをクリック/タップすると,サーバからHTMLドキュメントを読み込み,スクリーン上へ逐次レンダリングを行っていきます。この手続きは,通信処理という,他の項目とは比べ物にならない大きな壁が存在します。

処理の時間は1,000ミリ秒未満になるようデザインしましょう。

著者プロフィール

川田寛(かわだひろし)

元NTTグループのSE。現在はピクシブ株式会社にて,テクノロジーで世の中のクリエーターをハッピーにする方法を模索しています。「ふろしき」の愛称で,「html5jパフォーマンス部」「日本Cordovaユーザーグループ」といったコミュニティを立ち上げたり,「東京 Web パフォーマンス」というコアなエンジニア向けの勉強会を主催したり,Webの標準化(W3C)の議論にほんの少しだけ横槍を入れてみたり。

Microsoft MVP 2014/2015受賞。HTML5 Experts.jpエキスパート。Developers Summit(翔泳社)ステアリングコミッティー。「Web標準技術ではじめる,Webのパフォーマンス改善(Software Design 2014年5~7月号)」他,多数の技術雑誌への寄稿も行う。

コメント

コメントの記入