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
  • Performance insights: Get actionable insights on your website’s performance and Performance Insights video

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.
      • Self hosted fonts
      • Third-party hosted fonts
  • Metrics
  • Fast load times
  • Measure performance with the RAIL model
  • Best practices
    • Best practices for web fonts