performance - 如何减少实时网站上的 CLS（累积布局转换）？

Question

众所周知，Google 将在下个月推出新的Core Web Vitals 更新，我担心我的网站WishesPlus的红色 CLS 为 0.33，这对搜索引擎的排名不利。请尽快帮我解决这个问题。

Answer 1

累积布局偏移 (CLS) 是页面上的内容在加载期间移动了多少。

layout shift score = impact fraction * distance fraction

您将在 PageSpeed Insights 中看到此类错误

减少 CLS 的解决方案：

只需在图像标签中包含宽度和高度属性。

<img src="banner.png" width="256" height="256" alt="verz banner" />

您还可以在 CSS 上指定您的高度和宽度尺寸。

img{ width: 100% height: auto; }

注意：如果您使用srcset属性来定义图像，请允许浏览器选择每个图像的大小。

您还可以使用 CSS 属性object-fit:contains 来获得没有布局偏移的可行解决方案。

Answer 2

这是真的 累积布局偏移 (CLS) 是页面上的多少内容尝试自行调整直到加载完成（包括 HTML、CSS 和 Javascript）。

尖端：

您可以从浏览器阻止管理您的内容布局的 javascript 文件，看看拥有它和阻止它有什么区别。无论您发现什么差异都可能导致您的 CLS 增加。

使用 transform 属性而不是更改 height、width、top、right、bottom 或 left 属性来调整内容或在端口周围移动元素。

如果您的 CLS 低于 0.1 则很好，如果高于 0.25 则非常糟糕。