【发布时间】：2021-08-15 20:15:21
【问题描述】：
众所周知，Google 将在下个月推出新的 Core Web Vitals 更新，我担心我的网站 WishesPlus 的红色CLS 为 0.33，这对搜索引擎的排名不利。请尽快帮我解决这个问题。
【问题讨论】：
-
我投票结束这个问题，因为它与help center 中定义的编程无关。
标签： performance web layout seo cls
【发布时间】：2021-08-15 20:15:21
【问题描述】：
累积布局偏移 (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 来获得没有布局偏移的可行解决方案。
【讨论】：
这是真的 累积布局偏移 (CLS) 是页面上的多少内容尝试自行调整直到加载完成（包括 HTML、CSS 和 Javascript）。
提示：
您可以阻止管理您的内容布局的 javascript 文件 从浏览器，看看有什么和有什么区别 阻止它。无论您发现什么差异都可以使您增加 在 CLS 中。
使用变换属性而不是改变高度、宽度、顶部、 right、bottom 或 left 属性来调整内容或移动 港口周围的元素。
如果您的 CLS 低于 0.1 则很好，如果高于 0.25 则非常糟糕。
【讨论】：