我们都知道效果的重要性。但是,当我们谈到性能和提高网站“速度”时,具体是指什么呢?
事实上,效果是相对的:
- 对一位用户而言,网站速度可能较快(使用功能强大的设备时网络速度较快),但对另一用户而言速度较慢(使用低端设备的网络较慢)。
- 两个网站可能在完全相同的时间内完成加载,但加载速度可能更快(如果该网站加载内容的速度会变快,而不是等到最后才显示任何内容)。
- 网站可能看起来加载很快,但对用户互动的响应速度很慢(或根本不响应)。
在谈论效果时,一定要做到准确无误,并指明 从指标来衡量效果可量化的客观标准 但同样重要的是确保你衡量的指标 实用。
定义指标
过去,网站性能使用 load
事件来衡量。不过,尽管 load
是网页生命周期中一个明确定义的时刻,但该时刻不一定与用户关心的任何时刻相对应。
例如,服务器可返回一个“加载”的最小网页作为响应。但要等到 load
事件触发几秒钟后才提取内容或在网页上显示任何内容。从技术上讲,此类网页的加载时间较短,但该时间与用户在网页加载时的体验并不对应。
在过去的几年里,Chrome 团队的成员与 W3C Web 性能工作组通力合作,一直致力于对一组新的 API 和指标进行标准化,以更准确地衡量用户对网页性能的体验。
为了确保这些指标与用户相关,我们围绕几个关键问题对其进行框架设计:
是否发生? | 导航是否成功启动?服务器有响应吗? |
是否有用? | 是否呈现了足够多的内容,使用户能够与之互动? |
是否可用? | 用户是可以与页面互动,还是页面繁忙? |
是否令人愉悦? | 互动是否顺畅、自然、没有延迟? |
如何衡量指标
效果指标一般通过以下两种方式之一进行衡量:
- 实验室中:使用工具在一致且受控的环境中模拟网页加载
- 实际用户:关于真实用户实际加载网页并与之互动
这两种方式并无优劣之分。实际上,您通常希望同时使用这两种方式来确保获得良好的效果。
实验室
在实验室中测试性能对于开发新功能至关重要。在功能发布到生产环境之前,无法针对真实用户衡量其性能特征,因此在发布功能之前在实验室中进行测试是防止性能下降的最佳方法。
在野外
另一方面,虽然在实验室中进行测试是性能的合理代表性指标,但并不一定能反映出实际用户在您网站上的体验。
网站的性能可能会因用户的设备功能及其网络状况而产生巨大差异。还会根据用户是否(或如何)与网页进行互动而有所不同。
网页加载也并非总是确定性的。例如,加载个性化内容或广告的网站可能会因用户而异。实验室测试无法捕获这些差异。
要想真正了解网站对用户的效果,唯一的方法就是实际衡量网站在用户加载和互动时的性能。这种类型的衡量通常称为“真实用户监控”(RUM)。
指标类型
还有一些其他类型的指标与用户对效果的感受相关。
- 感知的加载速度:网页能够以多快的速度加载网页中的所有视觉元素并将其呈现在屏幕上。
- 加载响应速度:网页为了能够快速响应用户互动而加载和执行任何必需的 JavaScript 代码的速度
- 运行时响应速度:网页加载后,网页对用户互动的响应速度如何。
- 视觉稳定性:网页上的元素是否以用户意想不到的方式偏移,并且可能会干扰用户的互动?
- 流畅性:过渡和动画是否以一致的帧速率渲染,并在一种状态之间流畅地流动?
考虑到所有这些类型的效果指标,希望您清楚地了解,没有一个指标能够充分捕获网页的所有性能特征。
要衡量的重要指标
- 首次内容绘制 (FCP):衡量从网页开始加载到网页内容的任何部分在屏幕上呈现的时间。(实验,字段)
- Largest Contentful Paint (LCP):衡量从网页开始加载到屏幕上呈现最大的文本块或图片元素所用的时间。(实验,字段)
- Interaction to Next Paint (INP):衡量与网页进行的每个点按、点击或键盘互动的延迟时间,并根据互动次数选择网页最差(或接近最长的互动延迟时间)作为单个代表性值,以描述网页的整体响应能力。(实验,字段)
- 总阻塞时间 (TBT):衡量 FCP 和 TTI 之间的总时长,在该时间段内,主线程处于阻塞状态的时长足以阻止输入响应。(实验)
- Cumulative Layout Shift (CLS):衡量从网页开始加载到其生命周期状态变为隐藏期间发生的所有意外布局偏移的累计得分。(实验,字段)
- 首字节时间 (TTFB):衡量网络使用资源的第一个字节响应用户请求所需的时间。(实验,字段)
在某些情况下,我们会引入新指标来涵盖数据缺失的方面,但在某些情况下,最佳指标是专门针对您的网站量身定制的指标。
自定义指标
前面介绍的性能指标有助于您大致了解网络上大多数网站的性能特征。它们还适合采用一组通用指标,供网站用来与竞争对手比较效果。
不过,如果某个网站在某种程度上与众不同,就需要使用额外的指标才能全面掌握网站的情况。例如,LCP 指标旨在衡量网页的主要内容何时完成加载,但在某些情况下,最大的元素并不属于网页主要内容,因此 LCP 可能与网页不相关。
为解决此类情况,网络性能工作组还标准化了低级别 API,这些 API 可用于实现您自己的自定义指标:
- User Timing API
- Long Tasks API
- Long Animation Frames API
- Element Timing API
- Navigation Timing API
- Resource Timing API
- 服务器计时
请参阅有关自定义指标的指南,了解如何使用这些 API 衡量特定于您网站的性能特征。