性能指标

几个关键词

在开始深入了解性能监控之前,应该要关注以下几个问题:

  • “它正在运行吗?”

  • 我的网页浏览开始了吗(服务器有回应,等等)?

  • “它有用吗?”

  • 页面上是否有足够关键的内容使我能够理解?

  • “它可以使用了吗?”

  • 我能不能和页面互动了呢?还是它依旧处于加载状态?

  • “用户体验良好吗?”

  • 是否没有滚动卡顿、动画卡顿、无样式内容闪烁和缓慢的 Web 字体文件加载等问题出现,让我感到惊喜?

让我们想一想,哪些指标可以回答这些问题?

FP (First Paint)

这个指标表示页面绘制的时间点,换句话说它表示当用户第一次看到白屏的时间点.

参考 w3c/paint-timing

FCP (First Contentful Paint)

这是当用户看见一些“内容”元素被绘制在页面上的时间点。和白屏是不一样的,它可以是文本的首次出现,或者 SVG 的首次出现,或者 Canvas 的首次出现等等。

FCP 可以用来回答,“它运行了吗?”

FCP 事件在文本(正在等待字体文件加载的文本不计算在内)、图片、Canvas 等元素绘制期间就已经被触发了。因此,FP 和 FCP 的时间差异可能从几毫秒到几秒不等。这个差别甚至可以从上面的图片中看出来。这就是为什么用一个指标来表示真实的首次内容绘制是有价值的。

FMP (First Meaningful Paint)

FMP 可以用来回答,“它有用吗?”

有意义的内容指什么?比如:

  • 博客的标题和文本

  • 搜索引擎的搜索文本

  • 对于电子商务产品来说重要的图片

但是下面的内容则不属于有意义的内容:

  • 下拉菜单或类似的东西

  • 无样式内容闪烁(FOUC)

  • 导航条或页面标题

如果主要内容很久都没有展示出来,可能是因为太多资源(图片、样式、字体、JavaScript)有较高的加载优先级,阻塞了 FMP

Visually Ready (视觉上已经加载完成)

当页面看上去“接近”加载完成,但浏览器还没有执行完所有脚本文件的状态,比如此时还有异步脚本、link import 加载的样式表、字体文件、预加载/懒加载的图片文件。

First Interactive

简单来说,就是 DOMContentLoaded

Visually Complete

这个时间也是用来回答问题 - 用户体验良好吗?

Last updated