RAIL (Response Animation Idle Load)

concept

RAIL (Response Animation Idle Load) is a user-centered performance model that decompresses user experience into key operation. Browser page and mobile App belong to RAIL model. RAIL’s goal and guidelines are to help developers and designers ensure that every user action (click, keystroke, drag and drop, etc.) provides a friendly response to ensure a friendly experience. RAIL allows developers and designers to reliably work on their goals and impact the user experience in a highly effective (and high quality) way through a performance-sensitive structure.

(Figure: RAIL’s representation model — for webApp)

Users’ feelings about performance latency

Users don’t like it when the animation doesn’t flow. As long as they render 60 frames per second, they think the animation is smooth. This equates to 16 milliseconds per frame, including the time it takes the browser to draw a new frame onto the screen, compared to about 10 milliseconds for an application to generate a frame.

Users perceive performance latency differently, depending on network conditions and hardware. For example, it is possible to load a 1000ms experience over a fast Wi-Fi connection on a powerful desktop, so users are used to a 1000ms loading experience. But for mobile devices with slower 3G connections, 5000ms is a more realistic target, so mobile users are generally more patient.

Objectives and Criteria

• Process user input events within 50ms

• Response within 100ms, so that the user can see the visible response

  The above 2 points apply to any action (click, slide, drag, etc.).

• Users can see the content and respond to user actions within 5s

evernotecid://E6FB590A-664F-47BB-8E48-D99D9C95AA62/appyinxiangcom/29499089/ENResource/p42

Render to standard (within 5s) criteria

1. Focus on optimizing critical render paths to de-block render.
2. You don’t need to load everything in five seconds to feel like it’s fully loaded. Enable progressive rendering and do some work in the background. Delay non-essential loads to idle time. See Site performance optimization.
3. Identify factors that affect page loading performance:
   • Network speed and latency
   • Hardware (for example, slower cpus)
   • Cache expelled
   • Differences in L2/L3 caches
   • Parse the JavaScript

RAIL measuring tool

• Chrome DevTools
• Lighthouse
• WebPageTest

Chrome DevTools measurement method

• Throttle your CPU: Simulate poor CPU performance
• Throttle the network: Simulates the difference in network speed
• View main Thread Activity: View main thread activity to see each event that occurs on the main thread while recording
• View main thread Activities in a table: View the main thread activities in the table and sort them according to the activities that occupy the most time
• Analyze Frames per second (FPS): Analyze the number of frames per second (FPS) to measure whether the animation is really running smoothly
• Monitor CPU usage, JS heap size, DOM Nodes, layouts per second: Use performance monitors to Monitor CPU usage, JS heap size, DOM nodes, and layouts per second in real time
• Visualize Network Requests: Visualize the network request that occurred when you were recording using the network section
• Capture Screenshots while recording: Capture screenshots while recording to accurately replay the appearance of the page when it loads or animation is triggered, etc
• View Interactions: To quickly determine what happens on the page after the user interacts with the page
• Find Scroll performance issues in real-time: Find scroll performance issues in real-time by highlighting pages when potential problem listeners trigger
• View Paint Events in real-time: View paint events in real-time to identify expensive paint events that may harm animation performance

lighthouse

The easiest way

The input to measure web site at https://developers.google.com/speed/pagespeed/insights

(Figure — report results, including mobile devices and desktop devices by default)

Other ways:

1. 2. Open the link and enter the url of the Audit to be audited, web.dev/measure/
2. The node command line

    npm install -g lighthouse
    lighthouse <url>
Copy the code

4. Install the Google Lighthouse plug-in

5. Lighthouse Viewer https://googlechrome.github.io/lighthouse/viewer/ for viewing and sharing the report

< https://developers.google.com/web/tools/lighthouse#get-started
>
Copy the code

WebPageTest

Input in the https://webpagetest.org/easy web site you want to measure.

(Picture — home page)

(Figure — results are presented in tabular form)

Refer to the article

<
1.https://developers.google.com/web/fundamentals/performance/rail
>
Copy the code