首先介绍下什么是CLS，Cumulative Layout Shift 是三个核心网页指标指标之一，可通过汇总未在用户输入 500 毫秒内发生的布局偏移的得分来衡量内容的不稳定性。它查看可见内容在视口中偏移的程度，以及受影响的元素偏移的距离。
如果用户正准备点击某个元素，这个时候网页元素发生了位移，导致点击到了其它内容，相必大家都遇到过，作为重庆人每次狗哥遇到火气值爆表。
出现元素位移有两种情况，一种是故意的，某些站为了赚广告点击故意这样干，盗版小说网站尤为常见。另一种就是网页资源加载失败与成功时，元素占位空间不一样大导致的，今天狗哥就因字体图标加载前与加载完成后位置变化导致CLS不达标的问题，进行优化。
解决办法也很简单，由于正常加载网页时，首先加载html，然后是其中的js与css文件，然后由css文件中关于字体图标的代码加载字体文件。也就是说只需要交换加载顺序即可完成优化，将字体图标文件在html中单独加载是一种解决办法，这里狗哥使用html中的预加载实现。
复制
<link rel="preload" href="/fonts/iconfont.woff2" as="font" type="font/woff2" crossorigin>
上述代码实现了字体图标的预加载，crossorigin指明了跨域，适用于动静分离用户。
可以看到实际效果与预期一致，PageSpeed Insights中已经没有了元素偏移提示。
评论 （1）