网站分析常用的指标之内容指标(获取指标真实测量最简单的方式是通过_vitals这个延迟)

　　网站分析常用的指标之内容指标(获取指标真实测量最简单的方式是通过_vitals这个延迟)

　　你好，我十七岁。

　　写100个有价值的文章小森森的挑战。

　　是的，这是第二个。

　　什么是性能

　　在生活中，我们经常用性能这个词来描述一个物体的质量。

　　例如，当我们说汽车性能好时，通常是指汽车加速快、电池寿命长、安全系数高、驾驶体验好。

　　那么当我们用性能来描述一个互联网产品时，我们在谈论什么？

　　表现

　　当我们描述一辆汽车加速时，那么快有多快？有人说它看起来很快，但加速的速度确实可以通过视觉来判断。但这样的判断过于主观，因人而异，无法衡量。因此，业界制定了一些客观、专业、可衡量的指标。例如，汽车的速度用 100 米的时间来描述。同样，互联网产品也有一些专业的性能指标，通过这些指标可以清晰的呈现出一个产品的性能。

　　FCP（第一个内容涂料）

　　衡量页面开始加载到页面中第一个元素被渲染之间的时间。元素包含文本、图片、canvas等。

复制代码

　　

　　获得指标的真实测量

　　最简单的方法是通过 web_vitals JS 库。

　　import { getFCP } from 'web-vitals';

// 可以发送到监控系统

getFCP(console.log);

复制代码

　　当然也可以使用Paint Timing API，有兴趣的同学可以试试。

　　实验室测量

　　通过 pagespeed、lighthouse 或 Chrome Devtools 轻松查看 FCP

　　

　　LCP（最大内容涂料）

　　衡量标准视口内可见的最大内容元素的渲染时间。元素包括img、video、div及其他块级元素。

复制代码

　　

　　标准

　　

　　根据google的建议，为了给用户提供更好的产品体验，LCP应该低于2.5s。

　　获得指标的真实测量

　　最简单的方法是通过 web_vitals JS 库。

　　import { getLCP } from 'web-vitals';

// 可以发送到监控系统

getLCP(console.log);

复制代码

　　当然也可以使用Paint Timing API，有兴趣的同学可以试试。

　　实验室测量

　　

　　演出显示的LCP时间约为1.71s。

　　

　　

　　FID（第一输入延迟）

　　测量从用户第一次与页面交互的时间到浏览器实际上能够响应这种交互的时间。交互包括用户点击一个链接或者一个按钮等。

复制代码

　　

　　如图，FCP和TTI之间有3个长任务（黄条），如果用户在这段时间内试图与页面交互（例如点击一个链接），在收到点击和收到点击之间会有延迟主线程能够响应。延迟。这个延迟时间就是 FID。

　　标准

　　

　　根据谷歌的建议，为了给用户提供更好的产品体验，LCP应该低于100ms。

　　获得指标的真实测量

　　最简单的方法是通过 web_vitals JS 库。

　　import { getFID } from 'web-vitals';

// 可以发送到监控系统

getFID(console.log);

复制代码

　　当然也可以使用Event Timing API，有兴趣的同学可以试试。

　　实验室测量

　　

　　数据分析

　　FID的数据分布与其他指标不同。在 FID 生成的 FCP 和 TTI 之间，以 TTI 为中心向两边看。交互越早发生在左侧（比如小A），FID时间越长，用户体验越差；右边（比如小B），FID时间为0，体验不错。

　　

　　我们一般比较关注体验差的用户（比如小A），所以建议跟踪数据的P95和P98进行分析。

　　TTI（交互时间）

　　测量页面所有资源加载成功并能够可靠地快速响应用户输入的时间。

复制代码

　　获得指标的真实测量

　　最简单的方法是通过 Performance Api。

　　const timing = performance.timing

const TTITime = timing.loadEventEnd - timing.navigationStart

// 可以发送到监控系统

console.log(TTITime);

复制代码

　　实验室测量

　　

　　TBT（总阻塞时间）

　　衡量从FCP到TTI之间主线程被阻塞时长的总和。

复制代码

　　主线程执行的任务分为长任务和短任务。指定持续时间超过 50ms 的任务是长任务，小于 50ms 的任务是短任务。长任务中超过 50ms 的时间被认为是“阻塞”，因此 TBT 是所有长任务中阻塞时间的总和。

　　

　　在上图中，有三个长任务和两个短任务。

　　

　　TBT 持续时间为 200+40+105=345ms。

　　获取 Metrics 实验室测量结果

　　

　　实际测量：线上环境用户实际操作产生的数据。

实验室测量：开发人员通过工具测量的数据。

复制代码

　　以上是研究绩效中需要关注的主要指标。

　　在下一篇文章中，我们开始分析我们负责的产品的性能？

　　我十七岁，下次见。