Barbarian Meets Coding

WebDev, UX & a Pinch of Fantasy

3 minutes readdraft

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


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


Jaime González García

Written by Jaime González García , Dad, Husband, Front-end software engineer, UX designer, amateur pixel artist, tinkerer and master of the arcane arts. You should follow him on Twitter where he shares useful stuff! (and is funny too).Jaime González García