1、CLS（CumulativeLayoutShift）1、定义：CLS是所有布局偏移分数的汇总，包括页面完整生命周期中所有非预期的布局偏移。当可见元素将其位置从一个渲染帧更改为下一个渲染帧时，布局偏移随时发生。（需要注意的是，布局移位仅发生在现有可见元素改变其起始位置时。如果向dom添加新元素，或显示隐藏元素，或现有元素改变其Size，除非其他元素发生变化，不计为布局偏移。）2.指标：良好的CLS分数：超过75%的用户小于0.1。CLS表示每个Element的意外位移的累加，每个位移的算法如下：LayoutShiftScore=ImpactFraction*DistanceFraction上图中，元素在一帧中占据了一半的viewport。然后，在下一帧，元素向下移动视口高度的25%。红色虚线框表示影响范围，占视口高度的75%，移动距离的25%，所以0.75*0.25=0.1875。3.排除：用户操作后500ms内的LayoutShiftsPerformanceEntry的hadRecentInput标志为真，将不计入CLS指标。在500毫秒内点击链接、按下按钮或在搜索框中键入等操作引起的元素位移不包括在CLS索引中。如果运行后发起ajax请求，响应时间超过500ms，则响应引起的元素位移会被计入CLS索引。4.工具使用：（1）WebVitals插件（2）GoogleConsolePerformance面板（3）NewRelic（4）WebPageTestAdvanced->Customheaders:cookie:MSRV=B_202003301000;5.优化CLS：（1）设置确定大小（占用）a：imagepercentageoccupancy：包裹图片的元素padding占用，图片的绝对定位，宽高100%：padding-top:height/width*100%;.box{位置：相对；padding-top:300px/400px*100%;}img{position:absolute;顶部：0；左：0；宽度：100%；height:100%;}供参考：https://css-tricks.com/aspect...b:imageaspectratioplaceholder:img{width:100%;height:auto;}可以参考：https://blog.logrocket.com/ja...c:Absoluteimageoccupation：限制绝对宽高，例如400x300px。d:Fonticonplaceholder：包裹字体图标的元素需要设置width和height，而不仅仅是font-size。(2)避免ajax引起的CLS：a：在不影响其他指标（如LCP）的情况下，可以将需要ajax请求的数据放在首屏，在初始化页面时一起获取并渲染。b：当用户在操作后发起ajax请求时，创建一个空白区域并显示一个loading图标，ajax响应后将内容渲染到空白区域。c：对于ajax内容旁边或者下面的元素，可以考虑先隐藏，待ajax内容渲染完成后再显示。(3)避免优化用户体验带来的CLS：a：对于headerbanner广告，如果在页面初始化时不需要显示，拉到顶部后显示，banner可以通过在初始化时跳转到a标签的锚点来隐藏。location.href='#header_anchor';b：header中的多个元素（比如header和controlbar），位置变化会引起CLS，可以规范化header浮动天花板（同时原header的位置需要有占位符，比如padding占位符），复制控制条两次，在相应条件下显示或隐藏。(4)避免元素本身位移引起的CLS：a：当元素本身需要改变位置时，可以隐藏或设置透明度为全透明，位置改变后再显示或取消透明度设置.（有时需要延迟一段时间才显示，比如10ms）b：CSS中的transform属性可以让你在使用动画时避免布局偏移：使用transform:scale()将width和height属性替换为transform：translate()替换top,left,bottom,right属性2.LCP(LargestContentfulPaint)1.定义：显示最大内容元素所需的时间（衡量网站的初始加载速度）。2.指标：良好的LCP分数：在2.5秒内绘制最大的内容3.尺寸确定：用户在视口中可见的尺寸。如果元素超出视口，或者任何元素被剪裁或有不可见的溢出，则这些部分不计入元素的大小。对于所有元素，不考虑通过CSS应用的任何边距、填充或边框，例如边距/填充/边框。4、浏览器报最大内容：因为网页上的Element可能会不断加载，所以最大的Element也可能会不断变化（比如先加载文字，再加载图片），所以当每次当前最大的Element加载完毕，浏览器会下发一个PerformanceEntryMetric，Browser会停止发送Entry，直到用户可以进行Keydown/Scrolling/Tapping等操作，所以只要捕获到最后一个Entry，持续时间可以判断LCP。5.工具使用：同CLS6。优化LCP：（1）尽快确定最大元素：比如详情页主图，第一屏加载第一张图片（图1），通过ajax获取第二屏数据后，将主图片切换到另一张图片（图10），然后浏览器将在加载图10时计算LCP时间。优化的方法是在第一个屏幕上加载图10，之后不再更改它。(2)减少接口请求数和数据大小：a：对于php，可以将同步调用的接口改为并发请求；适当给一些接口添加缓存；对于不重要或者不可见的数据，不需要在页面初始化的时候请求，等待页面加载完成再通过ajax请求。b：可以减少首屏请求的数据量。比如一个列表页，如果你需要在一个页面上获取48个item，那么第一次可以获取6个item。页面渲染完成后，获取剩余的42项。(3)尽早建立第三方连接：服务器请求第三方源也会影响LCP，比如要加载的图片域名属于第三方。使用rel="preconnect"通知浏览器尽早建立第三方连接。也可以使用dns-prefetch来更快地解析DNS查找。（四）预加载和异步加载：a：预加载最大元素的图片：b:JS异步加载：对于不影响页面渲染，不立即执行的JS，可以使用异步加载，避免阻塞HTML解析渲染:c:CSS异步加载：对于不影响可见元素渲染的CSS首屏区域，可以使用异步加载，避免阻塞HTML解析和渲染：（这种异步加载方式浏览器支持较少）（5）InlinekeyCSS：对于影响首屏渲染，可以通过
