Measuring Web Performance with the RAIL Model

Introduction to RAIL Model

RAIL is a model that allows us to understand a website's performance and also, after understanding how a website performs, we can implement performance. Enhancement tools like a lighthouse to improve the performance of our site. RAIL stands for:

Response- When a user performs any action on-site, the action and reaction should be on proper window time called response.
Animation- All things like scrolling dragging come under Animation.
Idle- Background process comes under idle time on site.
Load- Load is achieved when First Contentful paint is achieved.

A tool that enables end users, administrators and organizations to gauge and evaluate the performance of a given system. Click to explore about, Performance Monitoring Tools

Focus on user perception

For improving our performance, we have to focus on user perception or, in simple words, how users react to different times of action on our website. User perception of performance delays. Users are very good at tracking the motions of the site, animations, clickability, etc., and users. I do not like it when animations, clickability, and other aspects are not good.

0 to 16ms: When animation displays on-screen are not good, users dislike it. Users are pretty good at detecting the loopholes of our site. They perceive it good when it is 16ms per frame.
0 to 100ms: If our site responds to users' actions between this time interval feels good otherwise, users experience is broken.
100 to 1000ms: Within this interval of time, it feels user a natural progression of the task.
1000ms or more: Beyond 10000ms, users do not take any interest in the site.
10000ms or more: Beyond 10000ms, it is irritating for the users to remain on site. Users will not come back to the site if they take this experience.

Why do we use the RAIL Model?

Since we know that there are millions of websites on the internet today, what makes a user come to our site and maintain visits is our site's performance.RAIL is the model that allows us to understand the performance of our site. And also Rail Model provides us with various tools that help us improve our site's performance in various aspects.

The main aim or purpose of this testing is to determine and identify any performance-related issues or bottlenecks in the application under test. Click to explore about, Performance Testing Tools and Its Best Practices

What are the components of performance Model in RAIL?

The components of performance Model in RAIL are listed below:

Response

The response is the time how immediately our website responds to user actions. Time under 100ms is considered good. If response time is high, the user experience will not be very good, and it is an excellent possibility that users will not come back to our website. We can analyze the site's response time through the RAIL model and improve it through some tools.

Animations

Animation is going on to our website like scrolling, dragging, or something applied to our site, etc. We can analyze what makes our site heavy in animation through the rail model and improve it by passing some audit fixes. The estimated time goal is one frame after 16ms.

Idle

Idle is happening in the background of our website once our website loads. With the RAIL model, we can minimize our idle time, which means that we can minimize the time of the processes running on the background of our application bypassing some failing audits.

Load

Load is when you initially reach into your page or in terms of matrices. It is the first meaningful paint. Whenever our first content is loaded, it is expected to load in less than a second after a user tries to access our website so that a user can appear on our site next time. The rail model helps us minimize the load time, and we can pass some audits that fail while testing our site.

A process to check the system accepts the requirements of a user or not. It's performed at a time when the system used by actual users. Click to explore about, User Acceptance Testing

What are the goals and guidelines of RAIL Model?

In the context of the RAIL model, some specific goals and guidelines let us see what Goals and Guidelines exactly are, let us see all keywords of the RAIL model in the context of goals and guidelines. Let us define the RAIL model in the context of goals and guidelines:

Response

Goal: The goal for response is to complete any action selected by the user in under 100ms.
Guidelines: The guideline for response does not respond to the user immediately. We can use this 100ms time to do other tasks in the background but not block users. For those actions that take more than 50ms, please give a message to the user.

Animation

Goal: The goal of animation is to render each frame in 10ms or less.
The aim is visual smoothness.
Guidelines: Guidelines for Animations is do nothing where you can and absolute minimum where you can't.

Idle

Goal: The goal for idle is to maximize idle time.
Guidelines: Guidelines for idle is to complete tasks under 50ms or less than 50ms.
If a user performs any action idle, user action priority should be high and performed first.

Load

Goal: The goal for load is the first load should be under 5 seconds, and the next subsequent load should be under 2 seconds.
Guidelines: Test performance in different devices and networks which are the same among different users.

Performance tuning improves the price to performance ratio for a system or set of services by reallocating the available computing, network, or storage resources. Click to explore about, What is performance tuning?

What are the best Tools to measure performance?

The best Tools to measure performance are listed below:

Lighthouse

Lighthouse is a tool that helps us check our website's performance and allows us to improve the performance so that more users can appear on our website. Lighthouse is available in developer tools in google chrome. We give the Lighthouse a url, and it generates audit reports based on that and tells us where what, and how to improve. The following audit reports is mainly relevant:-

Response

Maximum first input delay:- It is when a user interacts with the site to when browsers respond to the particular selected action in the site. Lighthouse measures Maximum first input delay by calculating the duration of the longest task after the first contentful paint.
Do not use passive listeners to improve scrolling performance. Touch and wheel event listeners help create scrolling functionality but these can also delay scrolling functionality.

Lighthouse does the following steps for analyzing that event listeners can affect scrolling functionality.

Select all event listeners present on-page.
Filter non-touch and non wheel event listeners.
Filter listeners that call preventDefault() function.
Filter listeners that are from different hosts.

Make event listener Passive. We can make event listeners passive by adding a passive flag to Lighthouse identified listeners. Example :- document. addEventListener(‘touchstart’,{passive: true});

Total Blocking Time: Total blocking time is the time up to when users are blocked to make an action such as mouse click, scrolling, etc.
Time to interact: Total time till our website becomes fully interactive.

Load

Do not register a service worker that controls the page and starts the url.
Lighthouse check through chrome remote debugging protocol returns a service worker. If it does not return it, then the audit fails.
Page load is not fast enough on mobile networks. Mobile users can get a positive experience if their load speed is good on mobile devices. Lighthouse flags pages that are not working fast on mobile devices.
Eliminate render-blocking resources. Lighthouse flags two types of render-blocking URLs scripts and stylesheets.
Defer offscreen images. Apply lazy loading to the images not included in the first contentful paint. The opportunity section of the Lighthouse tells us about images.
Properly Size Images. We do not have to serve images larger than mobile or desktop viewport because it will consume more bytes in the memory. We can store different versions of images for different viewports, and with the help of media queries, we can decide which image to render in which particular viewport.
Avoid chaining critical requests. Critical requests chains are the series of dependent network requests necessary for page rendering. The greater the length of the chain larger the download size to minimize the download size we have to minimize the chain size.
Does not use HTTP/2 for all of its resources. Using HTTP/2 uses less time and less data moving over the network. Lighthouse filters all resources not using HTTP/2.To pass the audit, use HTTP/2 overall resources.
Efficiently encode images. The optimized images load faster than unoptimized images. Lighthouse collect all the images in our page compress them to 85 and then compare it with the original version of image if the resulting image is greater than or Equal to 4Kib, then lighthouse flags the image as optimizable.

A tool that is especially valuable for assisting in the design of particular mental, physical and professional training programs. Click to explore about, Performance Profiling Tools and Benefits

Chrome Devtool

Chrome devtool is a tool that is present in the Google Chrome browser. Chrome
devtool is the analysis of everything while our page loads.
Below given some chrome dev tools which we can use to improve our
performance

Throttle your CPU as a less powerful device to check it for other devices.
Throttle your device to work for slower connections as compared to usual connections.
We should also view to main thread activity, events that occur in the main thread while We were recording.
We should also view the main thread activity in a table to view which activity takes the most time.
Analyze frame per second to measure whether your animation truly runs smoothly or not.
We can use a performance monitor to monitor CPU usage, JS Heap size, etc.
Visualize network requests that occur when we are monitoring network sections.
View interaction to identify what happened when the user interacted with the page.

Web Page Test

webpagetest is a web performance tool that uses a real browser to work with web
pages and timing matrices.

Conclusion

Rail is a model that helps us to understand the performance of our website and provide us with tools to improve the performance of our website. Such as Focus on user, Respond to user input in under 100ms, For animations such as scrolling, produce a frame under 10ms, Maximize the idle time of the main thread, the first load should be under 5000ms and the subsequent load under 2000ms.