公众号:站长帮服务

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

作者:Ting

更新于:2024年8月4日 13:15

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

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

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

累积布局偏移 (CLS)

什么是累积布局偏移?

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

什么原因导致 CLS 问题?

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

  1. 没有尺寸的图像:如果图像在 HTML 或 CSS 中没有明确的宽度和高度,浏览器在加载图像时可能会调整布局,从而导致内容移动。
  2. 没有尺寸的广告、嵌入和 iframe:与图像类似,广告、嵌入内容和 iframe 也需要明确的尺寸,否则它们的加载会导致布局变化。
  3. 动态注入的内容:在页面加载后动态注入的内容(例如通过 JavaScript 加载的广告或推荐内容)会导致现有内容移动。
  4. Web 字体导致 FOIT/FOUT:在字体加载期间,浏览器可能会使用备用字体,加载完成后再切换为正确的字体,这可能导致布局变化。
  5. CSS 或 JavaScript 动画:某些动画效果如果没有正确实现,可能会导致内容位置变化,从而增加 CLS 分数。

图片和视频必须在 HTML 中声明高度和宽度尺寸

为了确保图像和视频在加载时不导致布局偏移,必须在 HTML 中明确声明它们的高度和宽度。对于自适应图片,请确保不同视口的不同图片尺寸使用相同的宽高比。

示例代码:

使用 srcsetsizes 属性来处理响应式图片:

<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> 标签,并在标签中明确设置 widthheight 属性:

<video width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
  您的浏览器不支持 HTML5 视频标签。
</video>

WordPress 中如何优化累积布局偏移 (CLS)

在 WordPress 中优化 CLS 需要采取一些具体的措施:

使用适当的主题和插件

    • 选择优化良好的 WordPress 主题,它们通常会考虑到 CLS 优化。主题应尽量减少动态加载的内容,并且在设计时就要考虑到各个元素的稳定性。
    • 使用插件如 WP RocketW3 Total Cache Pro 来优化页面加载。WP Rocket 可以通过延迟加载图像、禁用 WordPress 中的表情符号以及优化 CSS 和 JavaScript 来减少 CLS。

    为图像和视频设置尺寸

      • 在上传图像时,WordPress 会自动生成多种尺寸的图像。确保在模板文件或页面中使用合适的尺寸。可以使用 srcsetsizes 属性来处理响应式图片,确保它们在不同视口下保持相同的宽高比。
      • 对于视频,使用 <video> 标签,并在标签中明确设置 widthheight 属性。如果使用第三方视频嵌入(如 YouTube 或 Vimeo),确保插件或嵌入代码提供的尺寸是固定的。

      优化广告加载

        • 使用占位符为广告预留空间。可以在广告加载之前显示一个占位符,以确保页面布局不会因为广告的加载而变化。
        • 使用 Google Ad Manager 等工具来确保广告尺寸固定。可以通过在广告单元代码中指定尺寸来实现这一点。

        加载字体时避免布局偏移

          • 使用 font-display: swap CSS 属性,以减少字体加载期间的布局偏移。这样浏览器会先使用系统默认字体显示文本,然后在自定义字体加载完成后替换为自定义字体。
          • 使用本地字体或在加载自定义字体之前使用合适的备用字体。这样可以减少因字体加载延迟而导致的内容跳动。

          管理动态内容

            • 延迟加载或按需加载动态内容,确保在页面的关键部分加载完毕后再加载这些内容。例如,使用 Intersection Observer API 来延迟加载页面上的图像、广告等元素。
            • 使用占位符来预留空间,避免动态内容加载时导致布局变化。例如,在加载评论、推荐文章或动态广告时,先显示一个占位符,然后再替换为实际内容。

            通过以上措施,可以有效地优化 WordPress 网站的 CLS,从而提高用户体验和搜索引擎排名。

            © 版权声明

            本文由站长帮(zhanzhangb.cn)发布,保留所有权利。

            未经明确书面许可,不得转载、摘编本站内容。对于侵权行为,我们将保留追究法律责任的权利。