RAIL Model - Web Performance Optimization Basics

RAIL is a naming convention for the main tasks of a web site: Response, Animation, Idle, Load. RAIL helps you divide the user experience into key tasks and define performance goals for each one. The performance goals recommended by RAIL are based on context and UX research on how users perceive delays.

Response

Response refers to responding to most inputs after they occur, such as button clicks and animation starts. Touch drag and scroll are part of Animation.

To make the user feel that the input starts and responds instantly, you need to respond within 100ms. To respond within 100ms, the JavaScript processing time for events related to the input must be within 50ms. If it is difficult to process within 50ms, it is better to provide a different response to the user first.

Why the processing time is only 50ms when you need to respond within 100ms

[1] Idle Time Garbage Collection Scheduling > 4. Idle Task Scheduling

Chrome browser limits Idle Time (idle time) to 50ms. Therefore, the input generated by the user can wait up to 50ms, so the input processing time is assumed to be 50ms.

Animation

Animation refers to things like visual animation, loading, scrolling, touch drag.

Since humans are proficient at motion tracking, to feel that the animation is smooth, the maximum time of the frame must respond within 16ms.

The maximum time of the frame is 16ms, but the browser needs about 6ms to render, so the frame processing time should be assumed to be 10ms. If it is difficult to respond within 16ms, refer to rendering performance to solve it.

Idle

Idle means that the browser has no work to do. When Idle, data loading and user input responses occur, and if you don't have Idle, they can interfere.

Load

Load means completing the load of the site when the user accesses the web site. The factors that affect the load are network speed and latency, hardware (e.g., slow CPU), caching, JavaScript parsing, etc.

When the user first accesses the web site, it should be loaded within 5 seconds considering the mobile user device and slow network. When a subsequent load occurs when moving to another page, it is better to load within 2 seconds.

User's performance delay experience depending on network status and hardware

Users perceive performance delays differently depending on their network status and hardware. In a fast network and fast hardware state, it is familiar to load the web site within 1 second. However, in a slow network or mobile device, it takes longer, so you are used to waiting. Therefore, in a mobile environment, it is realistic to load within 5 seconds.