深入了解累积布局偏移 (CLS) 及其对 WordPress 网站的影响。本教程详尽解释了 CLS 的定义、常见问题以及优化方法,包括如何使用 srcset
和 sizes
属性处理响应式图片,如何在 <video>
标签中设置尺寸,如何选择合适的主题和插件,优化广告加载,以及管理动态内容。通过这些实用的技巧,你可以显著提升用户体验和搜索引擎排名。
累积布局偏移 (CLS) 在 2021 年成为一个搜索引擎排名因素,这意味着了解它是什么以及如何对其进行优化非常重要。

什么是累积布局偏移?
累积布局偏移(Cumulative Layout Shift,CLS)是衡量页面内容视觉稳定性的指标。它量化了页面在加载过程中出现的意外布局偏移的频率和程度。高 CLS 分数意味着页面元素在加载过程中移动得很多,这可能导致糟糕的用户体验。
什么原因导致 CLS 问题?
累积布局偏移发生的原因有几个:
- 没有尺寸的图像:如果图像在 HTML 或 CSS 中没有明确的宽度和高度,浏览器在加载图像时可能会调整布局,从而导致内容移动。
- 没有尺寸的广告、嵌入和 iframe:与图像类似,广告、嵌入内容和 iframe 也需要明确的尺寸,否则它们的加载会导致布局变化。
- 动态注入的内容:在页面加载后动态注入的内容(例如通过 JavaScript 加载的广告或推荐内容)会导致现有内容移动。
- Web 字体导致 FOIT/FOUT:在字体加载期间,浏览器可能会使用备用字体,加载完成后再切换为正确的字体,这可能导致布局变化。
- CSS 或 JavaScript 动画:某些动画效果如果没有正确实现,可能会导致内容位置变化,从而增加 CLS 分数。
图片和视频必须在 HTML 中声明高度和宽度尺寸
为了确保图像和视频在加载时不导致布局偏移,必须在 HTML 中明确声明它们的高度和宽度。对于自适应图片,请确保不同视口的不同图片尺寸使用相同的宽高比。
示例代码:
使用 srcset
和 sizes
属性来处理响应式图片:
<img
src="small.jpg"
srcset="
small.jpg 480w,
medium.jpg 800w,
large.jpg 1200w"
sizes="
(max-width: 600px) 480px,
(max-width: 900px) 800px,
1200px
"
alt="描述图像内容的文字"
/>
使用 <video>
标签,并在标签中明确设置 width
和 height
属性:
<video width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
您的浏览器不支持 HTML5 视频标签。
</video>
WordPress 中如何优化累积布局偏移 (CLS)
在 WordPress 中优化 CLS 需要采取一些具体的措施:
使用适当的主题和插件:
- 选择优化良好的 WordPress 主题,它们通常会考虑到 CLS 优化。主题应尽量减少动态加载的内容,并且在设计时就要考虑到各个元素的稳定性。
- 使用插件如 WP Rocket 、W3 Total Cache Pro 来优化页面加载。WP Rocket 可以通过延迟加载图像、禁用 WordPress 中的表情符号以及优化 CSS 和 JavaScript 来减少 CLS。
为图像和视频设置尺寸:
- 在上传图像时,WordPress 会自动生成多种尺寸的图像。确保在模板文件或页面中使用合适的尺寸。可以使用
srcset
和sizes
属性来处理响应式图片,确保它们在不同视口下保持相同的宽高比。 - 对于视频,使用
<video>
标签,并在标签中明确设置width
和height
属性。如果使用第三方视频嵌入(如 YouTube 或 Vimeo),确保插件或嵌入代码提供的尺寸是固定的。
优化广告加载:
- 使用占位符为广告预留空间。可以在广告加载之前显示一个占位符,以确保页面布局不会因为广告的加载而变化。
- 使用 Google Ad Manager 等工具来确保广告尺寸固定。可以通过在广告单元代码中指定尺寸来实现这一点。
加载字体时避免布局偏移:
- 使用
font-display: swap
CSS 属性,以减少字体加载期间的布局偏移。这样浏览器会先使用系统默认字体显示文本,然后在自定义字体加载完成后替换为自定义字体。 - 使用本地字体或在加载自定义字体之前使用合适的备用字体。这样可以减少因字体加载延迟而导致的内容跳动。
管理动态内容:
- 延迟加载或按需加载动态内容,确保在页面的关键部分加载完毕后再加载这些内容。例如,使用 Intersection Observer API 来延迟加载页面上的图像、广告等元素。
- 使用占位符来预留空间,避免动态内容加载时导致布局变化。例如,在加载评论、推荐文章或动态广告时,先显示一个占位符,然后再替换为实际内容。
通过以上措施,可以有效地优化 WordPress 网站的 CLS,从而提高用户体验和搜索引擎排名。