Divi WordPress Theme

在WordPress上累积的版式移位有问题吗?

工具集优惠券

累积版式移位(简称CLS)是Google新的Core Web Vitals项目中的三个指标之一。 除了一般而言,它可以很好地衡量您网站上的用户体验,Google还宣布将从2021年5月开始使用Core Web Vitals作为排名因素。

因此,如果您的“累积版式变化”得分没有达到Google的建议范围,则需要立即对其进行修复,以使其低于Google的阈值并避免出现任何问题(并且通常还会为访问者创造更好的体验)。

在这篇文章中,我将解释什么是“累积布局偏移”及其如何与WordPress连接。 然后,我将分享一些特定于WordPress的技巧,以提高您的“累积版式移位”得分。

什么是WordPress上的累积布局偏移?

您是否曾经在出版商的网站上阅读过一篇文章(例如新闻),并且随着新广告的加载,文章的内容不断被推低? 这不仅烦人,而且是累积版式移位的完美示例!

累积布局转移是指网站的内容在加载时“转移”。 正如您可能在自己的生活中经历过的那样, 超级烦人,这就是Google鼓励网站管理员注意并改进此指标的原因。

累积布局转换也是Google核心网络生命计划中的三个指标之一–了解有关核心网络生命和WordPress的更多信息。

什么是好的累积版式移位分数?

为了了解您网站的“累积布局偏移”,Google提供了三个可能值的范围:

  • 好的 – 0.1以下
  • 需要改进 –在0.1和0.25之间
  • 较差的 –高于0.25

累积版式移位得分

如何查找正在您的网站上发生变化的元素

现在,让我们开始 转移 切实可行的技巧,以改善您的WordPress网站的累积布局转变。

但是,在您可以之前 提升 您的分数,您需要诊断出问题所在。 值得庆幸的是,Google通过PageSpeed Insights使此操作变得容易。

PageSpeed见解

首先,请转到PageSpeed Insights并分析您的网站网址之一,例如您的主页。 在顶部,您应该看到“累积版式移位”得分的摘要:

累积版式移位分数WordPress

但是,PageSpeed Insights还可以让您更深入地发现正在“变化”的特定元素。 要查找此分析,请向下滚动到 诊断程序 部分并展开 避免大的布局转移 指导:

寻找变化的元素

您会看到我的投资组合网站的标题是版式转换的最大贡献者(虽然还很小)。

确保同时查看两个 移动的桌面 结果。 例如,虽然我的网站包含Google在查看移动结果时会标记的三个元素,但在桌面结果中却没有任何标记的元素。

您可能会注意到类似的情况,或者移动设备和台式机可能会有不同的换档元素集。

可视化布局偏移的另一种方法

查看网站内容变化的另一种方法是使用Chrome开发者工具人为地降低连接速度(这使得更容易检测甚至细微变化的内容)。 转到 网络 标签,然后使用 在线的 下拉菜单来设置一个自定义值 超级慢 –例如60 kb / s的下载:

改变网络速度

然后,重新加载您的网站,您应该能够更加清楚地看到内容在加载时的变化情况。

一旦知道发生了什么变化,就可以集中精力解决这些问题。 但是,还有一些常规的“累积布局转换”最佳实践,应该采用这些最佳实践来避免整个站点出现问题。

如何修复WordPress上的累积布局偏移

不幸的是,与改进WordPress上的“最大内容油漆”不同,修复累积布局偏移会带来一些技术问题。 这些修复程序中有许多涉及挖掘代码。 不幸的是,很难避免在这里查看代码,但是我会尽力在可能的情况下包括插件解决方案。

始终设置图像尺寸

如果您未在网站的代码中设置图片尺寸,则图片可能会导致其他内容在加载时发生偏移。

幸运的是,如果您通过WordPress编辑器添加图像,则WordPress将自动为您执行此操作(并使用srcset设置响应图像)。 但是,如果您要通过代码将图片手动添加到网站,则需要确保始终包含尺寸。 您应该在图像HTML中看到height和width属性。

例如:

<img src="https://wplift.com/wp-content/uploads/2017/02/wordpress-smtp-tutorial-1-1024x874.png" alt="SendGrid API keys" width="1024" height="874">

始终设置嵌入/ iframe的尺寸

与图像一样,您还需要确保为正在使用的所有嵌入/ iframe设置尺寸。

例如,如果要嵌入YouTube视频或Google地图,请确保指定高度和宽度。 您也可以考虑在嵌入之前加载一个占位符,这通常也是提高性能的好习惯。

您可以找到许多解决方案,让您用占位符图像替换嵌入的YouTube(直到用户点击播放视频)。 一些不错的选择是WP Rocket(我们的评测)或WP Rocket团队提供的免费Lazy Load插件。

预留广告空间

广告基本上只是嵌入的另一种类型,但值得一提的是,因为广告是“累积版式转换”的最大贡献者之一。 就像我之前提到的,我确定您访问过一个网站,该网站的内容由于广告的后期加载而不断跳来跳去。

这里的解决方案是在您的网站代码中为广告保留空间。 例如,假设您要在侧边栏中显示一个160×600的摩天大楼广告。 您可以将其放置在具有广告尺寸的

内,而不仅仅是直接添加广告代码。 这样,即使尚未加载广告内容,也将保留该空间。 广告内容加载后,不会引起任何移位。

通常,您也应该谨慎地将广告放置在访问者视口的顶部附近,因为这些放置是最有可能导致版式移位的位置。

解决字体加载问题

布局偏移的一个大问题是自定义字体的加载方式。 例如,如果您使用的是Google字体或Adobe字体中的字体,则这些字体可以通过两种方式引起版式移位:

  • 不可见文字闪烁(FOIT)
  • 无样式文本的闪烁(FOUT)

基本上,问题在于访问者的浏览器可能会在加载自定义字体之前尝试显示文本。 加载自定义字体后,它将更新文本的样式,这可能会导致它从例如未样式化的文本更改为自定义字体时发生偏移。

有几种方法可以解决此问题。 一种选择是 预载 重要的字体文件。 这迫使访问者的浏览器下载字体文件 马上,这消除了FOIT / FOUT的机会。 但是,请注意,您仅预加载了最重要的资源(例如,首屏内容的字体)。 过多使用预加载会降低您的网站速度。

您可以设置字体资源列表,以使用免费的Autoptimize插件预先加载 额外的 部分:

预加载字体

对于Google字体,您还可以考虑在本地托管字体文件并以这种方式预加载。 您可以使用免费的OMGF插件进行设置,该插件包括一个不错的功能,可以自动预加载首屏字体。

如果您真的想深入了解,Google也有一篇不错的文章,关于将预载与 字体显示:可选 真正优化字体加载并避免布局偏移。

如果你 真的 为了避免出现问题,请考虑使用系统字体堆栈,这是我在许多站点中所做的。 这不仅解决了字体加载问题,而且还将减少HTTP请求的数量并加快网站速度。 一些主题(如GeneratePress)使使用系统字体栈非常容易。

但是,不利的一面是,当涉及样式/设计时,灵活性会大大降低。

小心动态注入内容

如果您动态地为诸如电子邮件加入表单,相关内容,GDPR通知之类的内容注入内容,那么您需要格外小心,以免布局发生变化。

通常,这里的一个好习惯是永远不要动态地在现有内容之上注入内容 除非它来自用户交互 (例如,用户单击按钮)。

例如,如果要动态注入一些CTA元素,请尝试将其放在博客文章下方,而不是顶部或中间。

立即提高您的WordPress累积布局转换分数

借助本文中的提示,您应该能够提高WordPress累积布局转换(CLS)分数并获得Google的好评。

当然,“累积布局转换”只是Core Web Vitals的三个指标之一–您还需要注意其他指标。

因此,一旦您实施了这些策略,就可以转到我们的指南,了解如何在WordPress上改进“最大内容索引”以修复该问题。

对累积版式移位和WordPress仍有疑问吗? 在评论中问我们!

【免费外贸推广营销视频培训教程】
https://school.yooopaaa.com

WordPress著名Avada主题官方优惠
https://1.envato.market/xxPav

WordPress可视化建站Elementor插件
https://elementor.com/?ref=19904

WordPress外贸独立站DIVI主题官方优惠
https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=59787

亚马逊选品工具Jungle Scout官方优惠
https://junglescout.grsm.io/jieqiu1568

独立站SEO优化工具Semrush免费7天试用
https://shareasale.com/r.cfm?b=1577772&u=2541755&m=97231&urllink=&afftrack=