简介：彼得·德鲁克（Peter Drucker）的句子的引用：“您无法管理无法衡量的内容。如果无法测量它，无法管理它”，并且性能是相同的。如果没有准确的解决方案为了衡量性能，它将无法谈论优化。因此，对于我们来说，可以使用哪些指标来衡量页面性能和用户体验？
作者|所以梦
来源|阿里的开发人员公共帐户
您无法管理无法测量的内容。- 彼得·德鲁克
报价提到了彼得·德鲁克（Peter Drucker）的句子“一件事”，如果您无法测量它，无法管理”，并且性能是相同的。如果没有准确的解决方案来衡量性能能够谈论优化。
因此，对我们来说，可以使用哪些指标来衡量页面性能和用户体验？我将从以下角度一一解释它：
性能API
我相信前端同学应该对表演API不陌生。通常，我们可以计算和收集浏览器的API统称为性能API。可以通过仅调用属性窗口。表现可以获得此类型的对象。
在日常工作中，为了计算任务的时间消耗，我们通常使用date.now（）在执行任务之前和之后两次创建两次date.now（）的两个问题：
为了准确计算性能，我们可以选择绩效API提供的performance.now（）用于高精确计算。特征是：
下图可以更直观地看到两者之间的区别：
FPS
帧速率fps（每秒帧每秒帧帧），通常对于网页，最佳帧速率为60 fps。如果接近此值，则页面更平滑，如果帧速率远低于此值，则帧速率低于此值。使用者显然会感到口吃。
60 fps意味着该页面需要每16.5ms（1/60）渲染一次，否则将发生框架损失，并且浏览器中的执行和页面渲染将互相阻止。非常复杂的逻辑占据了大量执行时间，这将导致页面卡住。
在Chrome的DevTools中，我们可以执行CMD+Shift+P输入显示FPS快速打开FPS面板，如下图所示：
通过观察FPS面板，我们可以轻松监视当前页面的流利度
如果我们要监视代码中当前页面的FPS帧速率，我们可以参考以下示例代码：
requestAnimationFrame
window.requestanimationframe（）告诉浏览器告诉您要执行动画的浏览器，并要求浏览器调用指定的回调函数以在下一个重新启动之前更新动画。
这是MDN的描述。顾名思义，这是一个允许浏览器在下一个渲染之前调用的函数。SO基于此功能，结合上述提供的FPS计算示例代码，我们可以发现，如果我们继续调用requestAnimationFrame，则该间隔，每个呼叫之间应约为16.7ms，符合我们对60 fps的页面流利度的要求。您可以使用以下代码在控制台上执行它：
第一个屏幕性能是我们最关注的核心指标之一。它在性能优化的场景中占据了相当大的比例。那么，第一个屏幕的性能有什么测量指标？
为了应对这个问题，Google提出了一系列以用户体验为中心的性能指标。
FP，FCP，FMP
FP的时间（第一个油漆翻译为“第一个绘图”）表示浏览器首次将像素传输到屏幕的时间。这仅意味着它已经开始绘制，实际意义相对较小。
第一个内容涂料翻译“第一个内容绘图”）表示浏览器首次将“内容”绘制到屏幕上（仅第一个绘图文本，图片（包括背景映射）和非白色）。
相比之下，FCP是指浏览器首次从DOM绘制。例如：文本，图片，SVG，帆布元素等，此次称为FCP。
FMP（第一个有意义的油漆被翻译为“第一个有效的绘图”）表明页面上的有意义的内容开始出现在屏幕上。它也是我们测量用户加载体验的主要指标。
FMP本质上是主观的认知指标。可以猜测，特定时间点可以通过算法是FMP，但是计算方法太复杂且不准确。LaterIndex-LCP。
CWV（核心网络生命值）
核心Web索引是所有网页的Web指标集。每个网站所有者都应衡量这些指标，并且这些指标也将在所有Google工具中显示。每个核心Web索引代表用户体验的另一个方面。它可以衡量实际测量，并反映以用户为中心的关键结果的真实体验。
当前的Web核心指标由三个方面组成 - 页面加载性能，交互，视觉稳定性，包括以下三个指标和阈值：
1）LCP
LCP担心第一个屏幕中最大元素渲染的时间。与FCP不同，FCP更加注意浏览器何时开始绘制内容，例如加载页面或骨架屏幕，该屏幕没有实际值，因此LCP与FCP相比，将LCP与适合作为第一个屏幕指示器的FCPMORE进行比较。
以详细信息页面为例。当FCP时，产品图片不会加载。目前，对于用户，几乎白色的屏幕页面没有交互式值。当LCP时，图片已加载。第一个屏幕的主要元素是第一个屏幕的主要元素。目前，作为第一个屏幕时间，它更接近用户的身体感觉。
由于LCP由页面上最大元素的渲染时间确定，因此包含什么元素？
您可以非常直观地在WebPagetest上看到当前LCP元素的详细信息
元素区域的计算规则如下：
2）FID
FID指示器意味着用户首次与网站进行交互，以达到浏览器响铃的实际延迟时间。可以想象，如果您单击一个按钮，则页面没有更改，并且响应将在2-3之后开始。知道体验非常糟糕。
FID判断的互动行为是：
那么为什么会有交互式延迟？例如，我在按钮上注册了点击事件，例如::::
根据期望，当用户单击按钮时，回调函数将直接触发，但是如果呈现当前主线程并占据了长任务，则该回调的执行将被延迟并且FID持续时间会增加。
但是，作为“非目标值”，FID要求用户交互以收集。用户互动的时间还会影响指标的收集和统计信息。
3）CL
CLS是用于测量视觉界面的稳定性的指标，该指标是指页面生成的连续累积布局偏置分数。我们经常在日常业务中使用懒惰的加载，骨架屏幕等。我们首先以较低的成本显示页面框架，然后使用动态渲染方法填充页面内容。加载的元素和原始占用元素不一致，这可能会导致用户滥用并影响用户体验。CLS存在以衡量此类问题。
当我们说布局偏移时，这意味着页面中可见元素的起始位置会发生变化，并且元素的添加和删除不会触发布局偏移量。
那么如何定义偏移的连续积累？以下元素如下：
DevTools
DevTools是具有前端同学的最操控工具之一。它主要用于查看日志，查看网络请求，调试页面等。我们还可以使用它来分析页面性能。
网络
如上图所示，这是我们熟悉的网络接口。在功能方面，我使用红色框架进行了分区：
表现
性能小组可以提供更多专业的性能信息
WebPagetest
WebPagetest是一个在线性能分析平台。除了常用的CWV性能数据外，还具有诸如性能，灯塔报告，页面比较之类的功能。
输入URL后，我们可以简单地选择一个简单的配置进行测试，并默认情况下执行3个测试。lcp等）
网络传输优化
在这里，我们专注于三个时间指标：
总连接时间
可能有许多因素导致连接时间：
因此，我们可以采用哪些方法来解决这些问题：
TTFB +内容下载
TTFB是从启动请求到接收服务器请求的第一个字节的时间。一般来说，如果第一个屏幕HTML要求的TTFB可以达到100ms，则已经具有良好的体验。如果超过500ms，则用户Willit可以清楚地感觉到白屏。确切地说，TTFB是HTTP请求消息之间的时间差与HTTP请求消息之间的时间差之间的时间差，以在完成DNSROUND-TRIP TRIP时接收第一个响应消息后接收第一个响应消息是往返行程延迟）+ serverrrt。
因此，当TTFB花费很长时间时，如何优化它？您可以参考以下方法：
那么，TTFB的较短，越好吗？
实际上，我们需要在称重TTFB和内容下载方面做得很好。例如，当我们打开GZIP/BR压缩时，TTFB将不可避免地显示出趋势，但是相应的资源量变小，这将加快传输时间和减少下载时间，因此我们应该注意的用户的真实体验，而不是盲目盯着时间进行优化。
预付
预紧力也已预加载。有很多方法可以预加载。末尾和外部有不同的解决方案。
原始链接
本文是阿里巴巴云的原始内容，未经许可就无法重印。
原始：https：//juejin.cn/post/7098995274487431199