Web fundamentals — Notes of RAIL Model
Study Notes of Google Developer Web Fundamental Guilds
User Perception of Performance Delays
- 0 to 16ms: Animation is smooth in 60 fps which means a frame in 16ms.
- 0 to 100ms: If over this time window, the connect between action and reaction is broken.
- 100 to 300ms: Users experience a slight perceptible delay.
- 300 to 1000ms: Tasks(loading page or changing view) feel continuous progression in this window.
- 1000ms or more: Beyond 1 second, user lost focus on task.
- 10000ms or more: Beyond 10 seconds, user abandon tasks and may not come back again.
RAIL
RAIL is a user-centric performance model that breaks down the user’s experience into four key actions.
Response
process an event in under 50ms
Because there is usually other works in queue, it’s safer to make a event be processed in 50ms so each event can be done in 100ms window.
Animation
produce a frame in 10ms
To keep 60fps, it needs to produce a frame in 16ms(1000ms / 60 ≈ 16ms). But browser needs about 6ms to render each frame, it may be safe to aiming 10ms per frame.
Animation includes not only UI animation but:
- Visual animations: entrances and exits, tweens and loading indicators
- Scrolling and flinging
- Dragging
Idle
maximize idle time
- Use idle time to complete deferred work
- Also 50ms limitation of a work
- Always be preemptive if user interaction is coming
Load
deliver content and become interactive in under 5 seconds
- Target on mid-range Android phone with slow 3G
- Optimize critical rendering path
- Enable progressive rendering and do some works in background/idle time
