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?
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.”Â The model categorizes user interactions under these four domains. 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.
Img Source: Developers.google.comTheÂ 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 time reflects how rapidly your website reacts to inputs. A response time under 100ms feels immediate; anything slower is noticeable to the user.
- Animation speed applies to any visual animations you have on the page as well as user scrolling and dragging. The ideal goal is 60fps, or one frame every 16ms.
- Idle work refers to what is happening in the background of your website after it initially loads. Idle work should be divided into 50ms blocks so that it doesn’t drag down response time.
- 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.Â
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 users’ patience is dependant on their expectations. Back in the 1990s, people waited for over a minute just to connect with 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Â Google’s DoubleClick.
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 50ms
The Google Developer’s Guide recommends providing some form of feedback for any user action that takes longer than 50ms. 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 100ms 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 10ms
Loading indicators, scrolling, dragging and zooming are all considered animations under the RAIL model. If you’re trying to achieve 60fps, then your budget per frame is theoretically 16ms; however, browsers typically need about 6ms just to render a frame, which is why you should shoot for 10ms 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 50ms 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’s 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.
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.
- 15+ Experts Share Their Web Performance Advice for 2018
- 18 Tips for Website Performance Optimization
- Google PageSpeed Insights â€“ Scoring 100/100 with WordPress
Source: Web Dev