Web Performance
A Way To Measure Performane with the RAIL model
The RAIL model is a user-centric way to measure the performance of your websites. It is based on how users perceive your application delays:
- People are great at tracking motion and dislike when animations aren’t smooth. Smooth animations require the famous 60 frames per second which leaves 16ms to render a frame (6ms for the browser to paint the new frame on the screen, 10ms for your app to produce the frame)
- The attention span of a user is limited. Under 100ms he user will perceive something as being immediate, any longer and the user will be able to perceive a delay. 100-300ms and the user will perceive a small delay. 300-1000ms and things will still feel part of continuum. Beyond 1 second a user will lose focus and beyond 10 seconds the user gets frustrated and is likely to abandon the task at hand, your web app and never come back (:D).
RAIL focuses on 4 points of interaction between a user and your app:
- Response: Respond in under 100ms
- Animation: Produce a frame in 10ms
- Idle: Maximize idel time
- Load: Deliver content in under 1000ms
Response: respond in under 100ms
The analysis on user perception reveals that you need to respond to use input in under 100 ms before they notice a lag. This applies to most points of interaction between a user and your web app: clicking a button, checkbox, form input, triggering an animation, etc. For actions that take longer to complete, you’ll need to provide some sort of immediate feedback to the user so he/she knows that his request is being processed.
Animation: produce a frame in 10ms
Idle: maximize idle time
Load: deliver content under 1000ms
Core Web Vitals
TODO
Addy Osmani has a great hands on talk where he goes through an actual real world case study of optimizing a website performance for Core Web Vitals:
Web performance metrics
In addition to the Core Web Vitals metrics defined above, there are more metrics that are interesting from a web performance perspective:
- TODO
Fonts and Web Performance
Tools for measuring and debugging web performance
- Web Page Test
- PageSpeed Insights
- Chrome Dev Tools
References
- Google Developers on Web Performance
- Web.dev
- Core Web Vitals
- Web vitals patterns contain a collection of common UX patterns optimized to provide great Core Web Vitals. It contains patterns that are specially tricky to implement while maintaining good Core Web Vitals scores.
- Metrics
- Fast load times
- Measure performance with the RAIL model
- Best practices
- Core Web Vitals
Written by Jaime González García , dad, husband, software engineer, ux designer, amateur pixel artist, tinkerer and master of the arcane arts. You can also find him on Twitter jabbering about random stuff.