确保每次添加图像或视频元

fatehaayat2312

网站管理员往往更喜欢动态广告，因为它们易于安装并且会自动在您的网站上投放广告。然而，他们几乎没有控制权，而且广告的大小可能一直在变化。 嵌入也是如此。当您尝试在页面上嵌入视频、提要和地图时，浏览器将无法识别嵌入内容中到底包含什么内容。如果没有为它们分配空间，其他元素将不得不移动，以便浏览器可以为嵌入元素腾出空间。 动态注入内容 动态内容对于大多数网站来说都很常见。它们可以采用 CTA 按钮、横幅、表单、相关文章以及内容中弹出的其他内容的形式。它与提到的其他元素有同样的问题，如果没有为它们分配空间，它们可以在加载后移动其他元素。

自定义网页字体 图像、视频、广告和动态内容影响 CLS 并不奇怪，因为它们往往会占用大量空间。但许多人不知道自定义字体也会影响 CLS。有我们所说的网络安全字体。这些是任何浏览器都可以读取的默认字体。 但是，如果您使 丹麦电话号码数据 用自定义字体，则浏览器在下载您使用的字体时必须使用后备字体或 FOUT（无样式文本的闪存）。浏览器还可以使用不可见文本或 FOIT（不可见文本闪烁），其中浏览器在字体完全加载之前不会显示任何内容。这两者都会影响页面上的元素，因为字体大小可能会有所不同。




优化累积布局偏移 指定图像和视频的尺寸素时，指定它们的宽度和高度。现在的浏览器会自动使用您设置的高度和宽度作为长宽比。您甚至可以只设置宽度，浏览器会自动设置高度。当浏览器在加载之前使用宽度和高度计算图像的长宽比时，不会发生布局变化。 使用CSS预留空间 如果说大多数影响 CLS 的元素有一个共同点，那就是没有为它们保留空间。您可以使用 CSS 宽高比框等技术，以便浏览器知道在页面加载时需要多少空间来放置大量广告和嵌入内容。 需要注意的一件事是，当您为动态广告预留空间时，广告的尺寸可能会有所不同。因此，如果您为广告分配了较大的空间，但出现了小广告，则页面上将会出现大量空白，但这不会影响 CLS，因为已分配了空间。