An Overview of the RAIL Performance Model

How do you measure web performance? Whether you care more about speed or image quality, you should always consider multiple metrics when optimizing your web apps. Fortunately, the RAIL model provides an accurate and comprehensive way to evaluate the user experience so that you can make meaningful improvements.

What is the RAIL model?

First things first, what exactly is the RAIL performance model?

While getting your initial page load time down is essential to reducing bounce rates, that's only half of the battle. Users spend far more time waiting for responses to inputs, so if you want visitors to stick around, then your website must be consistently fast. The RAIL model takes into account all possible user actions to ensure every aspect of a page is up to speed.

RAIL is an acronym for "Response, Animation, Idle and Load." These four areas of performance are the key components that make up the RAIL model, and they are used to help developers optimize the performance of their web applications. Users have different expectations whenever they tap, click on or scroll over your various page elements. Therefore, the RAIL model measures each user interaction with different context-specific goals in mind.

The RAIL model was proposed by developer Paul Irish in 2015, and Google has since codified the method. Let's break down the four aspects of the RAIL model and Google's recommended benchmarks:

Response

Response time reflects how rapidly your website reacts to inputs. This includes things like button clicks, form submissions, and other interactive elements. Response optimization means ensuring that users do not experience delays or lag when interacting with your website.

The goal is to respond quickly to user input, ideally in under 100 milliseconds; anything slower is noticeable to the user. However, the budget for input handling is set to only 50 milliseconds. This is because there are other tasks that need to be done in addition to handling user input, and those tasks also take up some of the available time for input handling.

Animation

Animation speed applies to any visual animations you have on the page as well as user scrolling and dragging. The ideal goal is one frame every 10 ms or less.

In other words, the aim is to make sure that these elements are visually appealing and responsive to user interaction, without causing any performance issues that could lead to a negative user experience. By optimizing animation performance, developers can make their web applications more engaging and enjoyable to use.

Idle

Idle refers to the time when a user is not interacting with a web page, such as when they are reading content or waiting for a page to load. The goal of idle optimization is to ensure that the page remains responsive and doesn't slow down or freeze during these periods.

Idle work should be divided into 50 ms blocks so that it doesn't drag down response time.

Load

Load, in the context of the RAIL model, means the first meaningful paint, which should appear less than one second after the user requests your page.

Load refers to the time it takes for a web page to fully load and become interactive. This includes things like images, scripts, and other resources. The goal of load optimization is to minimize the time it takes for a page to load, so that users can start interacting with your site as quickly as possible.

Why is the RAIL performance model important?

Well, it provides a structured framework for developers to optimize the performance of their web applications. By breaking down performance into these four key areas, developers can focus on specific aspects of performance that need improvement.

For example, if a developer notices that the animation on their site is janky and stuttering, they can focus on optimizing the animation performance using techniques like hardware acceleration and reducing the amount of work done during animations.

Or, if a developer notices that their page is taking a long time to load, they can focus on optimizing the loading performance by reducing the size of images and scripts and leveraging techniques like lazy loading to defer the loading of non-critical resources.

Web users shifting perceptions of time

It's often said that the internet is shortening people's attention spans, but humans have always been pretty impatient by nature. We're wired to crave instant gratification, so the brain can register delays as small as one-tenth of a second. Nonetheless, today's web users are used to waiting for about a second for a response whenever they click on a link. If a task takes longer than that, users become more likely to give up and turn away. For instance, BBC News famously noticed that their website was losing 10 percent of visitors for every extra second their homepage took to load.

That said, each user's patience is dependent on their expectations. Back in the 1990s, people waited for over a minute just to connect to the internet. Today, some desktop users with fast connections won't wait one second for an image to load. Mobile users who are accustomed to 3G connections are more forgiving than desktop users; they tend to wait around for three seconds before abandoning a task according to Think with Google.

You can never satisfy everyone, but using the RAIL model will improve your chances of retaining new visitors. Google and other search engines consider website speed in their rankings, so faster pages are also likely to get more unique views.

Defining your performance goals

Once you know which metrics you want to measure, you must decide on some achievable performance goals. We've covered what users expect, but you should always strive to exceed users' expectations. If you're constrained by limited resources, then your goal should be to make the most out of what's available to you. If resource limitations are not a concern, here are some goals suggested by Google:

1. Respond to user inputs within 50 ms

The Google Developer's Guide recommends providing some form of feedback for any user action that takes longer than 50 ms. That may sound like overkill, but aiming for such a goal ensures that the link between action and response always feels instantaneous to the user.

Let's say you have a button on your website that generates a random image on the page. If it takes 100 ms for the image to appear, then you should include something to let the user know that their input was received. For example, the button could change colors, or a placeholder graphic could appear while the image finishes loading.

2. Produce animation frames in 10 ms

Loading indicators, scrolling, dragging and zooming are all considered animations under the RAIL model. If you're trying to achieve 60 FPS, then your budget per frame is theoretically 16 ms; however, browsers typically need about 6 ms just to render a frame, which is why you should shoot for 10 ms or less. Users can detect the slightest variations, so the animation speed must be consistent to maintain a sense of visual seamlessness.

3. Make the most of idle time

To improve your chances of always achieving a 50 ms response time, you should make good use of idle time. Try loading only the most critical elements of your page during the initial page load, and then load everything else when the user is idle. That said, you must make sure that work performed during idle time doesn't interfere with responsiveness since that would defeat your purpose. Give user interactions the highest priority so that they interrupt idle work instead of the other way around.

4. Make your page interactive within five seconds

Ideally, users should be able start interacting with your page within five seconds (at most) of requesting your URL for the first time. Based on research conducted by Google, websites that become functional in just five seconds achieve an average of 70 percent longer session lengths, 35 percent lower bounce rates and 25 percent higher ad views compared to slower websites. Furthermore, mobile sites that load within five seconds earn double the ad revenue of slower competitors.

As of 2018, the "five second rule" is a good target for mid-range mobile devices over a 3G connection. For returning visitors, utilize caching to aim for a two second load time. However, keep in mind that as technology continues to evolve, so will people's expectations. It is indeed true that people will keep growing more impatient as the internet gets faster.

Tools to use with the RAIL model

You can use your favorite web testing tool to automate the tracking of your RAIL metrics. Google Lighthouse is helpful since it can tell you how your website performs on an average device over a 3G connection in addition to providing suggestions to make your pages faster, more accessible and easier to maintain. It's available as an extension for Chrome DevTools, and it can be combined with WebPageTest to give you a thorough understanding of how your website looks to users.

More tips for using the RAIL model

1. Know your audience

When setting your own goals, think about the network capabilities of your users. If your app or website is targeted at a local audience, then you'll have different technical considerations than if you were trying to reach international users.

Test your site's performance on the types of devices and network connections your audience uses. You can use traffic monitoring software to learn more information about your visitors.

2. Keep up with web development trends

Web optimization is a never-ending race to stay ahead of the competition, which means your projects must keep up with the latest technological trends to stay relevant. Likewise, new models for measuring performance will likely emerge. Do your own research regularly, follow some web development blogs and re-evaluate your benchmarks every few months to make sure your apps are always up to speed.

Here is a list of popular web development blogs you can visit to keep up on recent trends in the industry.

3. Know when to upgrade

Keep in mind that it usually takes a few years for new technologies to catch on. For example, the newly unveiled fifth generation of wireless internet infrastructure could eventually make 3G and 4G obsolete, but that day is probably far off since 5G isn't available in most places as of 2018. Therefore, there is no rush to optimize your apps for 5G users just yet.

4. Prioritize your critical rendering path

Achieving a time-to-interact of five seconds or less doesn't require the whole page to be loaded. You can implement progressive rendering by deferring non-essential work to the background. Take care of anything that blocks rendering first, then load everything else during idle time.

Learn more about how to optimize your critical rendering path.

5. Identify solutions, not just problems

We've discussed the metrics used to quantify performance, but evaluating your website is just the first part of the optimization process. Once you've identified areas for improvement, you must be able to diagnose the source of your problems. For example, the many factors that can potentially impact page load include network latency, cache eviction, and hardware limitations. All of these factors should be looked at before you start making changes.

6. Set performance budgets

Performance budgets can help you prioritize your optimizations and ensure that your website meets your performance goals. Set budgets for key metrics like load time and time to interact, and use the above-mentioned tools like Lighthouse or WebPageTest to track your performance against these goals.

7. Use performance optimization tools

There are many tools available that can help you optimize your website's performance. Use tools like PageSpeed Insights,or KeyCDN's Website Speed Test to identify performance bottlenecks and get recommendations for improvements.

8. Optimize for mobile devices

More and more users are accessing the web on mobile devices, so make sure your website is optimized for mobile performance. Consider using techniques like responsive design, lazy loading, and mobile-specific optimizations like smaller image sizes.

9. Consider the user's context

The user's context can have a big impact on their perception of your website's performance. Consider factors like the user's network speed and device capabilities, and optimize your website accordingly. For example, you may want to serve smaller image sizes to users on slower connections.

10. Test and iterate

The RAIL model is a framework for thinking about performance, but it's not a one-size-fits-all solution. Test your website's performance regularly, and iterate on your optimizations to improve performance over time.

Summary

The RAIL model is ultimately just one way of thinking about web performance, yet it's a method that all working web developers should be familiar with. Your performance priorities may change depending on the type of project you're working on, but the RAIL model is helpful in most circumstances since it considers a range of metrics that matter most to users.