我们都知道性能有多重要。但当我们谈论性能和让网站“快速”时,我们具体指的是什么?
事实上,性能是相对的:
-
一个站点对于一个用户来说可能是快的(在一个具有强大设备的快速网络上),但是对于另一个用户(在一个具有低端设备的慢速网络上)。
-
两个站点可能在完全相同的时间内完成加载,但其中一个站点的加载速度似乎更快(如果它逐渐加载内容,而不是等到最后才显示任何内容)。
-
一个站点可能看起来加载速度很快,但是对用户交互的响应很慢(或者根本没有响应)。
因此,在谈到性能时,一定要准确,并以可以定量衡量的客观标准来指代性能。这些标准被称为度量。
但是,仅仅因为一个度量是基于客观标准的,并且可以定量地度量,并不一定意味着这些度量是有用的。
定义指标
从历史上看,web性能是用load事件来衡量的。然而,即使加载是页面生命周期中定义良好的时刻,该时刻并不一定与用户关心的任何事情对应。
例如,服务器可以用一个最小的页面来响应,该页面会立即“加载”,但是在加载事件触发后的几秒钟内,服务器会延迟获取内容并在页面上显示任何内容。虽然这样的页面在技术上可能有一个快速的加载时间,但这个时间与用户实际体验页面加载的方式不符。
在过去的几年里,Chrome团队的成员与w3cweb性能工作组协作,一直致力于标准化一组新的api和度量标准,这些api和度量更准确地度量用户对Web页面性能的体验。
为了帮助确保这些指标与用户相关,我们围绕几个关键问题对其进行框架:
-
发生了吗?-- 导航是否成功启动?服务器响应了吗?
-
有用吗? -- 是否有足够的内容呈现给用户?
-
它可用吗? -- 用户可以与页面交互吗,还是它很忙?
-
它令人愉快吗? -- 互动是否流畅自然,没有滞后和张扬?
如何衡量指标
性能指标通常采用以下两种方法之一进行衡量:
-
在实验室中:使用工具在一致的受控环境中模拟页面加载
-
在现场:真实用户实际加载和与页面交互
这两个选项都不一定比另一个更好或更差事实上,您通常都希望使用这两个选项来确保良好的性能。
在实验室里#
在开发新功能时,在实验室测试性能是必不可少的。在特性发布到产品中之前,不可能在实际用户上测量它们的性能特性,因此在特性发布之前在实验室中对它们进行测试是防止性能退化的最好方法。
在现场
另一方面,虽然实验室测试是一个合理的性能代理,但它不一定反映出所有用户在现场如何体验您的站点。
根据用户的设备功能和网络状况,站点的性能可能会有很大的变化。它还可以根据用户是否(或如何)与页面交互而有所不同。
此外,页面加载可能不是确定性的。例如,加载个性化内容或广告的网站在不同用户之间可能会体验到截然不同的性能特征。实验室测试无法捕捉到这些差异。
要真正了解站点对用户的性能如何,唯一的方法是在用户加载和交互时实际测量其性能。这种类型的测量通常称为真实用户监视或简称RUM。
指标类型
还有几种其他类型的指标与用户如何感知性能相关。
-
感知加载速度:页面加载并呈现其所有视觉元素到屏幕的速度。
-
加载响应性:页面加载和执行任何必需的JavaScript代码的速度,以便组件能够快速响应用户交互
-
运行时响应:页面加载后,页面对用户交互的响应速度。
-
视觉稳定性:页面上的元素是否会以用户意想不到的方式发生变化,并可能会干扰他们的交互?
-
平滑度:过渡和动画是否以一致的帧速率渲染,并从一种状态流畅地流到下一种状态?
考虑到以上所有类型的性能指标,很明显没有一个单独的指标足以捕捉页面的所有性能特征。
要衡量的重要指标
-
首次内容绘制(First Contentful Paint, FCP):测量从页面开始加载到页面内容的任何部分在屏幕上呈现的时间。(实验室、现场)
-
最大内容绘制(Largest contentful paint, LCP):测量从页面开始加载到屏幕上呈现最大文本块或图像元素的时间。(实验室、现场)
-
第一次输入延迟(First input delay,FID):测量从用户第一次与您的站点交互(即,当他们单击链接、点击按钮或使用自定义的、JavaScript驱动的控件)到浏览器实际能够响应该交互的时间。(现场)
-
交互时间(Time to Interactive, TTI):测量从页面开始加载到可视化呈现的时间,它的初始脚本(如果有的话)已经加载,并且能够快速可靠地响应用户输入。(实验室)
-
总阻塞时间(Total blocking time, TBT):测量FCP和TTI之间的总时间,其中主线程被阻塞的时间足够长,以防止输入响应。(实验室)
-
累计布局偏移(Cumulative layout shift, CLS):测量在页面开始加载到其生命周期状态更改为隐藏之间发生的所有意外布局偏移的累积分数。(实验室、现场)
虽然这个列表包含了衡量与用户相关的性能的许多方面的指标,但它并不包括所有内容(例如,目前还未涵盖运行时响应性和平滑性)。
在某些情况下,将引入新的度量标准来覆盖缺失的区域,但在其他情况下,最好的度量标准是专门为您的站点定制的。
自定义指标
上面列出的性能指标有助于全面了解web上大多数站点的性能特征。他们也有一个共同的指标,以比较他们的共同网站的表现。
但是,有时某个特定站点在某种程度上是独特的,需要额外的度量来获取完整的性能图片。例如,LCP度量用于度量页面的主要内容何时完成加载,但是在某些情况下,最大元素不是页面主内容的一部分,因此LCP可能不相关。
为了解决这种情况,Web性能工作组还标准化了较低级别的API,这些API可用于实现您自己的自定义指标:
请参阅[定制指标]( Custom Metrics)指南,了解如何使用这些api来度量特定于站点的性能特征。