理解并优化 WordPress 的累积布局偏移 (CLS)

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

累积布局偏移 (CLS) 在 2021 年成为一个搜索引擎排名因素，这意味着了解它是什么以及如何对其进行优化非常重要。

什么是累积布局偏移？

累积布局偏移（Cumulative Layout Shift，CLS）是衡量页面内容视觉稳定性的指标。它量化了页面在加载过程中出现的意外布局偏移的频率和程度。高 CLS 分数意味着页面元素在加载过程中移动得很多，这可能导致糟糕的用户体验。

什么原因导致 CLS 问题？

累积布局偏移发生的原因有几个：

1. 没有尺寸的图像：如果图像在 HTML 或 CSS 中没有明确的宽度和高度，浏览器在加载图像时可能会调整布局，从而导致内容移动。
2. 没有尺寸的广告、嵌入和 iframe：与图像类似，广告、嵌入内容和 iframe 也需要明确的尺寸，否则它们的加载会导致布局变化。
3. 动态注入的内容：在页面加载后动态注入的内容（例如通过 JavaScript 加载的广告或推荐内容）会导致现有内容移动。
4. Web 字体导致 FOIT/FOUT：在字体加载期间，浏览器可能会使用备用字体，加载完成后再切换为正确的字体，这可能导致布局变化。
5. 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，从而提高用户体验和搜索引擎排名。