前端RAIL指标

[yihan12]

• 前端性能优化 - 用RAIL模型分析性能
• 使用 RAIL 模型衡量性能

[yihan12]

用于测量 RAIL 的工具：

• Chrome DevTools
• Lighthouse
• WebPageTest
• PageSpeed Insights

核心网页指标：

• Largest Contentful Paint (LCP)：衡量加载性能。 为了提供良好的用户体验，LCP 应在网页首次开始加载后的 2.5 秒内发生。
• First Input Delay (FID)：衡量互动。为了提供良好的用户体验，网页的 FID 不应超过 100 毫秒。
• Cumulative Layout Shift (CLS)：衡量的是视觉稳定性。为了提供良好的用户体验，页面应将 CLS 保持在 0.1. 或更低。

需要衡量的重要指标

• 首次内容绘制 (FCP)：衡量从网页开始加载到网页任何部分呈现在屏幕上所用的时间。（lab，字段）
• Largest Contentful Paint (LCP)：衡量从网页开始加载到屏幕上渲染最大的文本块或图片元素所用的时间。（lab，字段）
• 首次输入延迟 (FID)：衡量从用户首次与您的网站互动（点击链接、点按按钮或使用由 JavaScript 提供支持的自定义控件）到浏览器实际能够响应该互动的时间。（字段）
• Interaction to Next Paint (INP)：衡量与网页进行每次点按、点击或键盘交互的延迟时间，并根据互动次数选择该网页最差的互动延迟时间（或接近最高延迟时间）作为单个代表性值，以描述网页的整体响应速度。（lab，字段）
• 可交互时间 (TTI)：衡量的是从网页开始加载到视觉呈现、其初始脚本（若有）已加载且能够快速可靠地响应用户输入的时间。（实验）
• 总阻塞时间 (TBT)：测量 FCP 和 TTI 之间的总时间，在此期间，主线程处于屏蔽状态的时间够长，足以阻止输入响应。（实验）
• Cumulative Layout Shift (CLS)：衡量从页面开始加载到其生命周期状态更改为隐藏之间发生的所有意外布局偏移的累计得分。（lab，字段）
• 首字节时间 (TTFB)：测量网络使用资源的第一个字节响应用户请求所需的时间。（lab，字段）