共计 3565 个字符，预计需要花费 9 分钟才能阅读完成。
一、CLS（Cumulative Layout Shift）
1、定义：
CLS 是所有布局偏移分数的汇总，但凡在页面残缺生命周期内意料之外的布局偏移都包含。布局偏移产生在任意工夫，当一个可见元素扭转了它的地位，从一个渲染帧到下一个。（须要留神的是，布局偏移只产生在曾经存在的元素扭转起始地位的时候。如果一个新的元素被增加到 dom 上，或者已存在的元素扭转它的尺寸，除非扭转了其余元素的起始地位，否则都不算布局偏移。）
2、衡量标准：
好的 CLS 分数：75% 以上的用户小于 0.1。
CLS 代表的是每个 Element 非预期位移的累积，而每个位移的算法如下:
元件位移分数 (Layout Shift Score) = 影响范畴(Impact Fraction) * 挪动间隔(Distance Fraction)
如上例来说，影响范畴 (红色) 占比 Viewport 75%，箭头 (紫色) 挪动占 Viewport 的 height 25%，故 0.75 * 0.25 = 0.1875。
3、排除：
使用者操作后的 500ms 内的 Layout Shifts Performance Entry 的 hadRecentInput 标识为 true，将不被计入 CLS 指标内。如通过点击一个链接、按了一个按钮或在搜寻框打字等操作 500ms 内引起的元素位移不被计入 CLS 指标内。如果操作后发动了 ajax 申请，且响应工夫超过 500ms，响应后引起的元素位移会被计入 CLS 指标内。
4、工具应用：
（1）Web Vitals 插件
（2）谷歌控制台 Performance 面板
（3）WebPageTest
Advanced -> Custom headers:
cookie: MSRV=B_202003301000;
5、优化 CLS：
（1）为元素设定好尺寸（占位）
a: 图片百分比占位：
包裹图片的元素 padding 占位，图片相对定位，宽高 100%：
padding-top: height / width * 100%;
.box {
position: relative;
padding-top: 300px / 400px * 100%;
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}可参考：https://css-tricks.com/aspect…
b: 图片宽高比占位：
<!-- set a 400:300 - or 4:3 - aspect ratio -->
<img src="myimage.jpg" width="400" height="300" alt="my image" />
img {
width: 100%;
height: auto;
}可参考：https://blog.logrocket.com/ja…
c: 图片相对占位：
限度相对宽高，比方 400 x 300 px。
d: 字体图标占位：
包裹字体图标的元素需设定宽高，不能只设置 font-size。
（2）躲避 ajax 引起的 CLS：
a: 不影响其余指标（如 LCP）的前提下，可把须要 ajax 申请的数据放到首屏，初始化页面时一起获取并渲染。
b: 使用者操作后发动 ajax 申请时，建设空白占位区域，并显示加载图标，ajax 响应后将内容渲染到空白区域。
c: 对于 ajax 内容旁边或上面的元素，可思考先暗藏，待 ajax 内容渲染结束后再显示。
（3）躲避优化用户体验引起的 CLS：
a: 对于头部 banner 广告，如果页面初始化时要求不显示，上拉到顶后再显示，能够初始化时，用跳转 a 标签锚点的形式暗藏掉 banner。
<a name="header_anchor"></a>
location.href = '#header_anchor';b: 如果要求用户下滑后，header 吸顶，header 地位扭转会引起 CLS，能够复制 2 份 header，别离在相应条件下显示或暗藏。
（4）躲避元素本身位移引起的 CLS：
a: 当元素本身要扭转地位时，能够先暗藏或将透明度设置为全透明，地位扭转后再显示或去掉透明度设置。（有时须要适当延时一会儿再显示，如 10ms）
b: CSS 中的 transform 属性能够让你在应用动画的时候不会产生布局偏移:
用 transform:scale() 来替换 width 和 height 属性
用 transform:translate() 来替换 top, left, bottom, right 属性
二、LCP（Largest Contentful Paint）
1、定义：
显示最大内容元素所需工夫 (掂量网站首次载入速度)。
2、衡量标准：
好的 LCP 分数：在 2.5 秒内实现最大内容绘制
3、大小确定：
用户在视口内可见的大小。如果元素延长到视口之外，或者任何元素被剪裁或具备不可见的溢出，则这些局部不计入元素的大小。
对于所有元素，不思考通过 CSS 利用的任何边距、填充或边框，如 margin / padding / border。
4、浏览器报告最大内容：
因为网页上的 Element 可能继续加载，最大的 Element 也可能继续扭转 (如文字载入完，而后载入图片)，所以当每一个当下最大的 Element 载完，浏览器会收回一个 PerformanceEntry Metric，直到使用者能够进行 Keydown / Scrolling / Tapping 等操作，Browser 才会进行发送 Entry，故只有抓到最初一次 Entry，即能判断 LCP 的持续时间。
5、工具应用：
同 CLS
6、优化 LCP：
（1）尽早确定最大元素：
如详情页主图，首屏加载了第一张图片（图 1），前面通过 ajax 获得第二屏数据后，再将主图切换到另一张图片（图 10），那么浏览器会以图 10 加载实现算作 LCP 工夫。优化的办法是，在首屏就确定加载图 10，之后不再变动。
（2）缩小接口申请个数和数据大小：
a: 对于 php，可将同步调用的接口改为并发申请；适当给某些接口减少缓存；对于不重要或看不见的数据，页面初始化时可不申请，等页面加载实现后再通过 ajax 申请。
b: 能够缩小首屏申请的数据量，如列表页，一页需获取 48 个商品的，改为首次获取 6 个，页面渲染实现后，再获取剩下的 42 个。
（3）尽早建设第三方连贯：
对第三方源的服务器申请也会影响 LCP，比方要加载的图片域名是第三方的。应用 rel=”preconnect” 告诉浏览器尽早建设第三方连贯。
<link rel=”preconnect” href=”https://example.com” />
还能够应用 dns-prefetch 更快地解析 DNS 查找。
<link rel=”dns-prefetch” href=”https://example.com” />
（4）预加载和异步加载：
a: 将最大元素的图片预加载：
<link rel=”preload” as=”image” href=”https://example.com/myimage.jpg”>
c: JS 异步加载：
对于不影响页面渲染，不立刻执行的 JS，可应用异步加载，防止阻塞 HTML 解析渲染：
<script defer src=”index.js”></script>
d: CSS 异步加载：
对于不影响首屏可见区域元素渲染的 CSS，可应用异步加载，防止阻塞 HTML 解析渲染：
<link rel=”stylesheet” href=”index.css” media=”none” onload=”this.media=’all'”>
<link rel=”preload” as=”style” href=”index.css”>（这种形式的异步加载浏览器反对度较低）
（5）内联要害 CSS：
对于影响首屏渲染的要害 CSS，可通过 <style> 内联到 html 中。（也可通过 CDN 服务器将要害 JS/CSS 同 html 一起 push 下来）
（6）缩小资源大小和个数：
a: 将资源进行打包压缩。
b: 移除冗余代码。
c: 合并资源（如多个字体文件合并为一个，同时删除冗余字体图标；应用雪碧图等）。
d: 缩小图片的应用，某些设计可通过 css 实现。
（7）强制设定最大元素：
如列表页首屏显示了多张图片，大小都一样，浏览器并不会肯定把第一张图片当做最大元素，有可能第二张、第三张等。优化的办法是，将第一张图片元素宽高都加大 2px，把它固定为最大元素，配合图片预加载优化 LCP。
二、FID（First Input Delay）
1、定义：
首次输出提早，测量从用户第一次与页面交互（如点击链接、按钮、图片，在输入框中输出内容等）到浏览器理论可能开始解决这个交互事件的工夫。
2、衡量标准：
好的 FID 分数：首次输出提早不超过 100 毫秒
参考：
https://web.dev/cls/
https://web.dev/lcp/
https://web.dev/fid/
https://css-tricks.com/aspect…
https://blog.logrocket.com/ja…
