如果您的网站使用响应式图像

mdranr1424@mail

以此为例，我们可以通过将两个分数添加到方程影响分数 * 距离分数 = 设计变更分数中来计算此设计变更的分数，如下所示： 0.75 * 0.25 = 0.188 每当加载页面时检测到先前加载的元素从一帧移动到下一帧时，Google 都会执行此方程式。页面的累积布局更改分数是通过将所有单独的布局更改分数加在一起来计算的。 累积设计变更的原因 在开发阶段，CLS 可以通过多种方式潜入页面的代码中。 无量纲嵌入 当您向页面添加图像、视频或 iframe 等内容时，必须在页面的 HTML 代码中指定高度和宽度尺寸。当您声明图像的尺寸时，浏览器确切地知道需要为该图像分配多少空间，以便正确加载页面。 如果您不在 HTML 代码中声明图像的尺寸，则浏览器在开始加载该图像之前不会知道需要多少空间。这将导致布局更改，因为浏览器必须移动内容以为图像腾出空间。


请确保每个视口大小的每个版本都使用相同的宽高比。 如何解决或避免无量纲嵌入 当您向页面添加图像、视频或框架时，请务必在 HTML 中指定尺寸。您甚至可以指定宽度并信任浏览器自行设置高度。 动态广告 一旦您开始吸引流量，投放广告是通过网站获利的好方法。但是，当您在网站上使用动态广告时，广告可能会导致 CLS 问题。 动态广告是根据访问您网站的用户以及他们使用的设备而变化的广告。这些广告很受欢迎，因为它们安装快捷且容易。但是，它们取消了对页面上加载内容的一些控制。 根据访 脸书数据库 您页面的特定用户，他们看到的广告可能会改变形状或大小，或者可能无法完全加载。由于动态广告没有在 HTML 中指定尺寸，因此浏览器不知道在呈现页面时要为其保留多少空间。 如何修复或避免动态广告 使用 CSS 宽高比框为您的广告预留页面空间。这将告诉浏览器在渲染页面内容时为各种元素分配多少空间。请记住，如果您这样做，当较小的广告加载到较大的框中时，您最终可能会出现额外的空白区域。但是，这不会影响页面的 CLS 分数。



您还应该确保指定要加载的默认或替代图像，以防实际广告失败。这样做可以防止当用户的浏览器尝试显示不存在的图像时发生 CLS 问题。 动态注入的内容 动态注入的内容是指嵌入的内容，例如 YouTube 视频、推文、论坛评论或其他一些小部件。同样，这些也会引起问题，因为它们经常加载到页面的主要内容中，导致文本、图像、链接和按钮在页面上向上或向下移动。 如何解决或避免动态注入内容 不要将动态内容放置在页面上现有内容之上。特别是在首屏显示的内容中。 如果必须在现有内容之上使用动态内容，请为其保留空间或加载它以响应用户操作。 自定义字体 虽然很明显广告、图像、视频和动态内容可能会导致 CLS 问题，但您在网站上使用的字体也可能是导致布局更改的原因。 一般有两种类型的来源。有任何浏览器都知道如何读取和加载的网络安全字体，还有自定义字体。