Edited at

Webパフォーマンス最適化のために「RAIL」というパフォーマンス基準を知っておく

More than 3 years have passed since last update.

最近以下のようなWebパフォーマンスに関する記事を見かけたので

パフォーマンスに関して調べていたら、Googleが去年提唱した「RAIL」というWebパフォーマンスモデルがあったのでそれに関しての備忘録です。


RAILとは

タップ、ドラッグ、スクロール、ページ読み込みなどのユーザー体験に関して

最適化の基準(目標)を定めたWebパフォーマンスモデルのこと。

Googleが提唱したものであり、以下の4つのパフォーマンスに関する項目の頭文字をとったもの。



  • Response


  • Animation


  • Idole


  • Load


RAILにおいての最適化の基準対象は時間

RAILにおいての最適化の基準対象は時間のことを指している。

ヤコブ・ニールセン博士の記事である

Response Times: The 3 Important Limits(英語)

において反応速度に対して以下のように述べられている。


  • 応答が瞬時に返ってきたと感じられるのは0.1秒まで。

  • 思考の流れが妨げられないのは1秒まで。

  • 注意力を保てる限界は10秒まで。

また、Paul Bakaus氏の記事である

The Illusion of Motion(英語)

において60fpsを超えたあたりが、人間がスムーズと感じられるスイートスポットだと述べられている。

このような根拠に基づき、それぞれの項目に最適化の基準時間(目標時間)が設定されている。


Response


Responseは100ms未満に

何かしらのアクション(タップ、フォーム入力等)を行った場合、そのResponseを100ms未満に返す。


Animation


Animation中の1フレームの処理を16ms未満に

60FPSを保つために1フレームの処理を16ms(1000ms / 60 = 16.666...ms)未満に抑える。

ガベージコレクタなどのアニメーション処理以外のコストもあるため実際には10ms未満に抑える必要がある。


Idle


Idle(アイドル状態)は100ms未満で発生するように

Idle(アイドル状態)はユーザー操作が行われるまでの待機時間(処理が何も行われていない状態)のこと。

Idle中に実行されるJavascriptの処理時間(Idleになるまでの時間)が長いと、

その処理が完了するまで他の処理ができないため、ユーザー操作があった時にレスポンス遅延が生じてしまう。

それを防ぐため、Idleは100ms未満で発生するようにして、他の処理が割り込みで実行できる作りにする。

そのような作りにするため、Idle中に実行される処理単体の時間は50ms未満に抑える。


Load


Loadは1000ms未満に

ページのLoadを1000ms未満に抑える。

最初にページがレンダリングされる時間を1000msに抑え、ページがロードされたとユーザーに

知覚させれば良いため1000ms未満に全てのコンテンツをLoadする必要はない。

レンダリング開始時間を1000ms未満に抑えるためにクリティカル レンダリング パスを最適化する。


終わり

最適化の基準は理解しましたが、

上記のパフォーマンスの測定方法、それらに対しての改善方法は理解していないので、

理解でき次第、記事を書いていこうと思います。

認識に間違いがあればご指摘ください。


参考