Web性能评价指标 _Web

作者 | 李玲
同一个网站，有的用户说好用，有的用户投诉慢，Web性能差吗？
从用户角度出发，收集用户的使用反馈，很多吐槽都提到了慢，经调研用户最关注的是速度，所以Web性能主要指网站加载、响应速度。它包括客观的指标和用户在访问应用时所感受到的性能情况。主观的用户性能感知受到用户设备、网速快慢和用户的主观感受影响，导致性能是相对的。
而谈论性能，重要的是精确，并且根据能够进行定量测量的客观标准来论及性能。通过什么信息来分析系统性能，如何判定好坏？google提供了思考性能问题的方法论，以用户为中心的性能模型 - RAIL 。

文章插图
RAIL性能模型
用户感知到的“性能”是什么?

0 - 16ms 动画流畅
0 - 100ms 即时响应
1s + 慢，用户失去耐心
10s 以上非常慢，用户可能放弃使用

将用户体验根据关键动作分为4个独立的模块：response （响应）、animation（动画）、idle（浏览器空置状态）和load（加载），结合用户对时间的感知，明确了对用户体验影响最大的性能目标。
如果在每个模块上，都可以达到性能优化的目标值，那么最终用户感受到的将会是极致的体验。
目标与准则
(1) Response 100ms内完成交互

50ms内处理完事件
对耗时长的操作提供即时反馈，比如说“加载中”的标识。如果用户点击后没有得到任何反馈，用户会质疑系统是否有问题

(2) RAnimation 流畅的视觉效果

动画并不止酷炫的效果，只要是视图变化都算动画，包括滚动，拖拽
16ms内生成一帧，达到60fps

(3) RIdle 即时响应用户

尽可能增加空闲时间
利用空闲时间
始终以用户操作为最高优先级

(4) RLoad 5s内可操作

1s内渲染出主要内容
如果无法快速展示页面全部内容，可以逐步渲染，使其看起来渲染快

与用户体验相关的关键性能指标

在 100 毫秒内响应用户输入。
播放动画或执行滚动时，在 10 毫秒内生成一帧。
最大限度延长主线程空闲时间。
在 5000 毫秒内加载交互式内容。

RAIL性能模型提供了分析系统性能的思路，与用户体验相关的关键性能指标和实现目标的准则建议。了解用户对不同关键动作所期望的性能，使用Chrome DevTools对加载或运行时的活动进行深入分析，识别性能问题。
Google又提出了更明细的以用户为中心的性能指标，帮助我们更好的了解真实用户对Web的整体体验。
以用户为中心的性能指标
如何定义性能指标？
从用户角度出发，考虑以下关键问题，从用户体验和关心的关键节点定义性能指标

是否正在发生？导航是否成功启动？服务器有响应吗？
是否有用？是否渲染了足够的内容让用户可以深入其中？
是否可用？页面是否繁忙，用户是否可以与页面进行交互？
是否令人愉快？交互是否流畅自然，没有延迟和卡顿？

性能指标
•  First contentful paint 首次内容绘制 (FCP)：页面开始加载到页面显示任何内容的时间。
代表服务器有响应，增大用户继续等待的信心
•  Largest contentful paint 最大内容绘制 (LCP)：页面开始加载到最大文本块或图像元素在屏幕上完成渲染的时间。
代表有用，有助于让用户确信页面有效
•  First input delay 首次输入延迟 (FID)：用户第一次与网站交互（比如单击链接、点按按钮等）直到浏览器实际能够对交互做出响应所经过的时间。