如何减少实时网站上的 CLS（累积布局偏移）？
How to Decrease CLS (Cumulative Layout Shifts) on a live website?
我们都知道 Google 下个月将推出新的 Core Web Vitals 更新，我担心我的网站 WishesPlus 红色的 CLS 为 0.33，这不利于在搜索引擎上的排名。请尽快帮我解决这个问题。
累积布局偏移 (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; }
注意：允许浏览器select每个图像的大小如果您使用srcset属性来定义图像。
您还可以使用 CSS 属性 object-fit: contain 来获得没有布局偏移的可行解决方案。
没错 累积布局偏移 (CLS) 是指页面上有多少内容在加载完成之前尝试自行调整（包括 HTML、CSS 和 Javascript）。
提示：
You can block the javascript files which manage your content layout
from the browser and see what's the difference between having that and
blocking that. Whatever difference you find can lead you an increase
in CLS.
Use transform property instead of changing the height, width, top,
right, bottom, or left properties to adjust the content or move
elements around the port.
如果您的 CLS 低于 0.1 则很好，如果高于 0.25 则非常糟糕。
我们都知道 Google 下个月将推出新的 Core Web Vitals 更新，我担心我的网站 WishesPlus 红色的 CLS 为 0.33，这不利于在搜索引擎上的排名。请尽快帮我解决这个问题。
累积布局偏移 (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; }
注意：允许浏览器select每个图像的大小如果您使用srcset属性来定义图像。
您还可以使用 CSS 属性 object-fit: contain 来获得没有布局偏移的可行解决方案。
没错 累积布局偏移 (CLS) 是指页面上有多少内容在加载完成之前尝试自行调整（包括 HTML、CSS 和 Javascript）。
提示：
You can block the javascript files which manage your content layout from the browser and see what's the difference between having that and blocking that. Whatever difference you find can lead you an increase in CLS.
Use transform property instead of changing the height, width, top, right, bottom, or left properties to adjust the content or move elements around the port.
如果您的 CLS 低于 0.1 则很好，如果高于 0.25 则非常糟糕。