本文源自道招网的了解网页性能指标（getTTFB，getFCP，getLCP，getFID，getCLS）的含义，通过实战理解各指标影响因素
Google公司的Web Vitals旨在为质量信号提供统一的指导，方便一个网站量化用户体验的性能指标，其中常用的指标有TTFB，FCP，LCP，FID，CLS。
npm包
import {getTTFB, getFCP, getLCP, getFID, getCLS} from 'web-vitals';
getTTFB(console.log);
getFCP(console.log);
getLCP(console.log);
getFID(console.log);
getCLS(console.log);
如果我们想以CDN的形式使用web-vitals
<body>
<script type="module">
import {getTTFB, getFCP, getLCP, getFID, getCLS} from 'https://unpkg.com/web-vitals@2.1.4/dist/web-vitals.js?module';
getTTFB(console.log);
getFCP(console.log);
getLCP(console.log);
getFID(console.log);
getCLS(console.log);
</script>
</body>
接下来的内容里面我们用express+ejs模板来模拟测试这几个指标变化。
指标详解
TTFB（Time to First Byte ）首字节时间
TTFB衡量您的服务器对访问者浏览器请求的响应能力。换句话说，它是用户到达网页和服务器识别它之间所花费的时间，俗称“白屏时间”。 浏览器从服务器接收首字节数据所需的时间越长，意味着加载页面所需的时间就越长，并且因为TTFB是最初的交互，很长的首字节时间意味着页面的其余部分甚至无法开始加载，所以这是一个很基础，也很致命的指标。
评级
- 200毫秒以下 好
- 200毫秒和500毫秒之间 需要改进
- 超过600毫秒 差
FCP（First Contentful Paint）首次内容绘制
网站的首次内容绘制是浏览器在您的页面上呈现第一个DOM元素的时间。这包括图像、画布元素（非白色）或文本。通俗地说，FCP是指用户可以看到页面的某些部分发生变化。这个元素可能不是从服务器呈现或加载的第一个元素，但它是用户可以看到的第一个元素，因此它对您网站的UX至关重要。
网站在iframe中包含的任何内容都不会被FCP考虑在内，非内容绘画（例如背景颜色的变化）也不考虑在内。前面提到的背景颜色的变化那是FP（First Paint）的考虑范围
FCP其实是一个相对比较主观的指标，我们可以“造假”（比如预先做一个Loading元素）。拥有快速的首次内容绘制很重要，因为它会使用户感觉到您的网站正在快速加载（不管是不是真的），即使您的站点的首次交互延迟（用户可以与站点互动的时间）可能比竞争对手长得多，但由于您的FCP更快，能让用户尽快看到有东西展示，因此在用户看来它可能更快。
也就是说，FCP并不是要欺骗您的用户。较低的FCP时间通常是页面速度的良好指标，优化它的方法也会影响其他页面速度指标（例如最大内容绘制）。
评级
- 1.8秒以下 好
- 1.8秒到3秒之间 需要改进
- 超过3秒 差
LCP（Largest Contentful Paint）最大内容绘制
在大多数网页上，有一个元素因其大小和突出程度而与众不同。例如，考虑这个着陆页，其中巨无霸Banner部分在视口中占主导地位：
那个巨无霸Banner部分代表这个特定页面的最大内容绘制（LCP）。也就是说，LCP是网站渲染包含最多内容的元素所花费的时间。
我们需要了解LCP分数可能（并且希望会）与您网站的整体加载时间不同。您可能有一个页面需要 3 秒才能完全加载，但它的LCP可能只有 2 秒。这是因为大多数现代网站还在文本和媒体文件之上加载脚本。
评级
- 1.8秒以下 好
- 1.8秒到3秒之间 需要改进
- 超过3秒 差
FID（First Input Delay）首次输入延迟
FID是对访问者与您的网站交互和浏览器响应之间发生的时间的度量，以毫秒为单位。输入或交互可以指范围广泛的动作。例如，它可能包括单击链接、按下按钮或选择复选框。但是，当用户滚动或放大页面时，FID不适用，因为这些不需要在他们的浏览器和您的网站之间进行新的响应。即使您的站点具有可靠的FCP和LCP，首次输入延迟也可能足够长以导致跳出率提高。他们可能会觉得您的网站反应迟钝且速度缓慢。
评级
- 100毫秒以下 好
- 100到300毫秒之间 需要改进
- 超过300毫秒 差
CLS（Cumulative Layout Shift）累计布局偏移
累积布局偏移(CLS) 是页面布局在加载时发生多少偏移的术语，这个最好用图片来展示这个指标的含义。
网站越复杂，就越有可能获得高CLS分数。对于标志性的Google主页等简单布局，没有CLS，因为它们包含的元素很少：
这并不是说所有复杂的网站都有很高的CLS分数。以亚马逊为例。没有人会说这家电子商务巨头使用简单的网页设计。然而，在浏览其目录时几乎看不到布局变化。
各指标测试方法
先看效果
大家可以用控制变量法，分别测试。
// index.js
const express = require('express');
const ejs = require('ejs');
const app = express();
app.engine('html', ejs.__express);
app.set('view engine', 'html');
app.set('views', __dirname + '/views');
app.use('/static', express.static(__dirname + '/static'));
// 控制图片渲染延时，可测试LCP
app.use('/img', (...res) => {
let random = 1000;
setTimeout(() => {
return express.static(__dirname + '/img')(...res);
}, random);
});
// 控制整体页面渲染延时 可测试TTFB和FCP
app.use('/', (req, res) => {
let random = Math.floor(Math.random() * 2000);
setTimeout(() => {
res.render('testPerform', {
random: random,
});
}, random);
})
app.listen(9090, () => {
console.log('listening ~ ', 9090);
})
模板文件 views/testPerform.html
<!DOCTYPE html>
<html>
<head>
<title>性能指标测试</title>
<style>
html, body {
height: 100%;
}
</style>
</head>
<body>
<div>
延时时间（ms）：<%= random%>
</div>
<script>
function heavyTask(max) {
for(var i = 0;i < max; i++) {
if (i === max - 1 ) {
console.log('over', i);
}
}
}
heavyTask(1000000000); // 可测试FID
</script>
<img src="/img/banner.png" alt="banner" />
<script type="module">
import {getTTFB, getFCP, getLCP, getFID, getCLS} from '/static/web-vitals.js';
getTTFB(console.log);
getFCP(console.log);
getLCP(console.log);
getFID(console.log);
getCLS(console.log);
</script>
</body>
</html>
为了减少web-vitals的CDN地址https://unpkg.com/web-vitals@2.1.4/dist/web-vitals.js?module的网络影响，可以将下载到本地，将其放在如下路径/static/web-vitals.js。
本文对指标的含义解释方面参考自下列文章
