谷歌性能指标优化 javascript前端

一、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: 图片宽高比占位：

文章图片 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。

location.href = 'https://www.it610.com/article/#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"通知浏览器尽早建立第三方连接。

还可以使用dns-prefetch更快地解析 DNS 查找。

（4）预加载和异步加载：
a: 将最大元素的图片预加载：

c: JS异步加载：
对于不影响页面渲染，不立即执行的JS，可使用异步加载，避免阻塞HTML解析渲染：

d: CSS异步加载：
对于不影响首屏可见区域元素渲染的CSS，可使用异步加载，避免阻塞HTML解析渲染：

（这种方式的异步加载浏览器支持度较低）
（5）内联关键CSS：
对于影响首屏渲染的关键CSS，可通过内联到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...