如何利用烛龙和谷歌插件优化CLS(累积布局偏移) | 京东云技术团队

简介

CLS 衡量的是页面的整个生命周期内发生的每次意外布局偏移的最大突发性_布局偏移分数_。布局变化的发生是因为浏览器倾向于异步加载页面元素。更重要的是，您的页面上可能存在一些初始尺寸未知的媒体元素。这种组合意味着浏览器在加载完成之前无法确定单个元素将占用多少空间。因此，这种不确定性带来的剧烈布局转变就会导致一个高的CLS分数，也就说明用户体验将会很糟糕。

累积布局偏移的计算公式 = 影响比例*距离比例（参考：https://web.dev/articles/cls?hl=zh-cn）

影响比例：上一帧的所有不稳定元素与当前帧的可见区域（占视口总面积的比例）的并集就是当前帧的影响比例。

距离比例：距离比例是任何_不稳定元素_在框架内的移动距离（水平或垂直方向）的最大距离除以视口的最大尺寸（宽度或高度，以较大者为准）

解决方案

1. 找到可能导致累积布局偏移的所有因素

2. 确定是什么因素导致了如此大的累计布局偏移？ 我们需要找到一个靠谱的工具辅助我们确认，并定位到具体原因。

3. 导致出现这些原因的问题代码有哪些 ？ 找到代码后，我们应该如何解决。

方案执行

1 导致累积布局偏移的因素

导致 CLS 不佳的最常见原因包括：

• 没有尺寸的图片
• 无尺寸的广告、嵌入内容和 iframe
• 动态注入的内容，例如没有尺寸的广告、嵌入内容和 iframe
• 网页字体

2 使用辅助工具，确认是哪几种因素

可以先利用内部监控平台找到用户最常访问的页面，利用lighthouse逐个分析每个页