概述

累计布局偏移: Cumulative Layout Shift, 简称CLS，是以用户为中心的内容视觉稳定性指标，因为它有助于量化用户体验到意外布局移位的频率，较低的CLS有助于确保页面用户视觉和交互体验。当用户浏览一个页面的时候，若是想要点击一个按钮或者进行其他交互时，页面的布局突然抖动，可以会造成用户期望之外的结果。

解决方案

字体优化

字体在未下载完成时,浏览器隐藏或者自动降级,导致字体闪烁
FOIT: Flash Of Invisible Text
FOUT: Flash Of Unstyled text

使用 font-display属性解决闪烁的问题

@font-face {
font-dispaly: block | swap | fallback | optional | auto;
}

使用css font loading API

@font-face {
unicode-range: ....; // 若是一次性将所有的字体都引入,会导致加载的内容非常多,例如汉字那么多,不可能一次性全部加载,因此可以将汉字使用频率进行拆分,然后按照优先级进行加载,且只有当其中的字体被使用的时候才会进行加载
}

使用 preload 改变资源加载优先级进行预加载

<!-- 必须使用corssorigin="anonymous" 解决跨域问题 -->
<link rel="preload" href="./xxx.woff2" as="font" type="font/woff2" crossorigin="anonymous" >

图片、视频、iframes、广告位等优化

为 image 、 video 等元素设置尺寸属性，可以保证在其资源未加载完成之前有一个很好的占位效果，不会造成CLS

<img src="xx.png" width="200" height="200" alt="png" />

专家服务

shopify用户可进入我们的网站诊断检测结果页面，点击“专家服务”，

限时1元购买我们的专家服务，获取技术专家的1对1配置服务！