RAILはGoogleの開発者によって提案されたWEBサイトのパフォーマンスモデルである。このモデルは人間が感じる「速さ」を具体的なパフォーマンス指標に落とし込んでいる。指標はResponse(応答)、Animation(アニメーション)、Idle(アイドル処理)、Load(読み込み)の四つに分類されており、それぞれの頭文字を取ってRAILと呼ばれる。

参照サイト : Measure performance with the RAIL model

Response(応答)

Responseはユーザーのサイト上でのアクションに対して、WEBサイトがどれだけ速く応答するかという時間を意味する。具体的には、「ボタンをクリックするとモーダルが表示される」ようなアクションに対するWEBサイトの応答時間である。ベストプラクティスとしては、この応答時間を100ms未満に抑えることが望ましい。なぜなら、100ms以内の応答時間では、ユーザーは遅延をほとんど感じないからだ。100ms〜300ms程度になると、ユーザーは微妙な遅延を感じる可能性が高くなる。

Animation(アニメーション)

Animationに関しては、フレーム処理を16ms以内で完了させるという目標が設定されている。この16msという数値は、60fps(フレーム・パー・セカンド)を維持するためのものである。1秒は1000msであり、1000msを60で割った数値が約16.67msである。この数値を基に16ms以内での処理が推奨される。例としては、ビジュアルフィードバックやハンバーガーメニューのアイコン変更などがある。具体的な対策としては、JavaScriptを非同期関数(requestAnimationFrameなど)で実行したり、CSSを活用してパフォーマンスを向上させる方法が挙げられる。

Idle(アイドル処理)

Idleでは、ウェブサイトがアイドル状態、つまりユーザーの入力を待っている状態で行われるJavaScriptの処理時間を50ms未満に抑えることが推奨されている。この指標は特にrequestIdleCallback APIを使用して、優先度の低いJavaScript処理をアイドル状態で実行する際に重要である。処理時間が50msを超えると、新たなユーザーアクションが発生した場合、その応答が遅れる可能性がある。

Load(読み込み)

LoadはWEBサイトのコンテンツがどれだけ速く読み込まれるかという指標である。RAILモデルでは1000ms未満での読み込みが理想とされているが、この目標は極めて厳しい。実際の状況では、ネットワークの遅延やサーバーの処理速度、ブラウザのレンダリング速度など多くの要素が影響するため、5秒以内の読み込みが一般的な目標とされている。パフォーマンスの最適化には、サーバーとネットワーク、さらにはフロントエンドのレンダリングにかかる時間を詳細に計測し、各フェーズでの最適化が必要である。