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, 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.Jaime González García