海外社媒SNS代运营Tiktok代运营公司
Revive Old Posts

营销型WordPress外贸多语言独立站建设+谷歌SEO优化+谷歌关键字广告投放,就找WP花园!深圳公司,技术实力雄厚,用效果说话!详情咨询info@wordpresshy.com

图像滑块可能是 WordPress 网站中非常流行的功能,但它们的附加值几乎没有。 事实上,无论您询问注重性能的 Web 开发人员、SEO 专家还是转化率专家,大多数人都会告诉您滑块(或轮播)不是一个好主意。 我们完全同意。

我们已经在我们的博客文章中到处强调我们不是图像滑块的最大粉丝。 说实话,我们不喜欢他们。 在所有。 让我们解释一下原因。

为什么滑块不利于性能

滑块和网络性能远非天作之合。 使用滑块,您的网站可能很漂亮但也很慢(看看我们在这里做了什么?)。

要使滑块在您的网站上运行,您需要更多代码:

  • CSS 样式
  • 额外的 JavaScript

大多数情况下,这会导致:

  • 增加页面大小
  • 增加页面加载时间
  • 更高数量的 HTTP 请求

所有这些都会导致性能降低、Core Web Vitals 指标变差和页面变慢,即使 WP Rocket 在您的网站上运行(稍后会详细介绍)。

更具体地说,轮播可以通过以下方式影响您的 Core Web Vitals:

海外社媒SNS代运营Tiktok代运营公司
  • LCP – 最大的内容绘制 – 页面的 LCP 元素通常可以在首屏图像滑块中找到。 如果这些滑块未正确优化,则会对您的 LCP 产生负面影响。
  • FID – 首次输入延迟 – 如果您的滑块包含大量 JavaScript 文件,则 JavaScript 执行时间会更长。 结果,主线程可能变得忙碌和阻塞,页面可能无法响应用户交互。
  • CLS – 累积布局偏移 – 不幸的是,许多滑块在视觉上不稳定,这可能导致 CLS 等级不佳。

当然,并非所有图像滑块都会对您的网站产生相同的影响,具体取决于定制量、库的大小等。 但即使在所谓的“快速”图像滑块插件的情况下,效果也会对您的表现有害:

页面加载时间 页面大小 HTTP 请求
控制(无滑块) 0.9 秒 515 12
尼沃滑块 0.8 秒 554 15
元滑块 0.9 秒 562 17
独白 1.1 秒 567 23
智能滑块 3 1.0 秒 616 18
图层滑块 1.0 秒 657 20
Slider by 10Web 1.5 秒 670 20
滑块革命 0.9 秒 699 20
我们使用不同的图像滑块运行的性能测试

其他性能不良做法

一般来说,置于首屏的动画并不是您网站最好的朋友。 这也包括文本动画,它们与图像滑块具有相同的缺陷。 页面顶部的动画不仅与转换无关,还会下推您的内容。 除非它们在传达您的品牌形象方面发挥重要作用,否则请记住,销售、排名和转换的是您的内容,而不是您的动画。

我们还建议不要使用页面预加载器(即某些站点在实际内容出现之前显示的微调器或加载栏)。 如果您在延迟 JavaScript 文件的同时使用一个,这将导致显示预加载器,直到出现用户交互。 如果没有用户交互,微调器将无休止地旋转。 预加载器会阻止用户立即看到对 UX 不利的内容。 更不用说它们会适得其反,因为它们会减慢网站速度。 当您可以拥有更快的加载网站时,为什么还要添加一秒钟的微调器?

为什么不能充分利用 Delay JS 功能

人们可能会问的一个问题是:是否应该在您的网站上运行 WP Rocket 来弥补滑块(或其他不良做法)对性能的负面影响? 不幸的是,事情并没有那么简单。 如果您在网站上使用滑块,您将无法最大程度地体验 WP Rocket。

以我们最新且最强大的功能之一为例,延迟 JavaScript 执行功能。 此功能背后的想法是,并非所有文件都与页面的初始呈现相关,延迟它们可以改善加载时间和 PageSpeed Score。

延迟 JavaScript 执行通过延迟 JavaScript 文件的加载直到有用户交互来提高性能。 启用此功能后,所有 JavaScript 文件仅在用户需要时才会延迟和加载,即在检测到用户交互(例如滚动、单击按钮)时。

但事情是这样的:如果页面顶部有一个滑块并且启用了 Delay JS 功能,则滑块的内容将被延迟,并且在页面的初始呈现期间不会显示内容。 毫无意义吧? 不幸的是,解决方法是禁用与滑块相关的 JavaScript 文件的功能。

鉴于滑块的流行程度,我们的客户支持团队经常帮助 WP Rocket 用户在该功能启用时遇到滑块问题。 “我们经常不得不排除与滑块相关的文件,以使它们在没有用户交互的情况下工作,”我们的客户支持工程师 Vasilis 解释说。 如果没有该功能,这些用户将失去用于提高性能的重要资产。

滑块和 Web 性能:证据就在布丁中

为了准确了解滑块如何对 WP Rocket 的性能产生负面影响,我们在该网站上进行了大量测试,无论是否使用滑块。

我们使用的滑块

我们涵盖了 4 个场景:

  • 审核 #1: 我们使用 Revolution Slider 测量了我们网站的性能,但没有启用延迟 JavaScript 执行功能。
  • 审计 #2: 我们使用 Revolution Slider 并启用了延迟 JavaScript 执行功能来测量我们网站的性能。
  • 审计 #3: 我们使用 Revolution Slider 并启用了延迟 JavaScript 执行功能来测量我们网站的性能。 与滑块相关的脚本被排除在外。
  • 审计 #4: 我们使用静态图像并启用了延迟 JavaScript 执行功能来测量我们网站的性能。

让我们看看结果:

审计 #1: 无延迟 JavaScript 执行的革命滑块

如您所见,得分为橙色 (55/100),并且 Core Web Vitals 不是很健康。

还有很多与未使用资源相关的问题。

审计 #2:具有延迟 JavaScript 执行的革命滑块

如您所见,得分为绿色 (90/100),我们总体上取得了更好的成绩。

问题是滑块在用户交互之前没有出现。

在任何用户交互之前页面是空白的

审计 #3:带有延迟 JavaScript 执行和滑块的革命滑块

正如您所看到的,分数也是绿色的,但没有那么高(86/100),并且未使用的资源和图像再次存在问题。

审计 #4:没有延迟 JavaScript 执行的滑块

这次我们没有使用滑块,而是添加了一个静态图像:

正如你所看到的,结果是所有场景中最好的,我们的分数是绿色的,我们摆脱了未使用的 JavaScript 问题。

标题中的滑块只会扼杀您网站的性能,即使是最强大的优化插件(就是我们!)也无法弥补。 我们的建议? 不要使用滑块。

滑块如何影响 SEO

在 WP Rocket,我们痴迷于 Web 性能,但还有其他原因我们不推荐滑块。 事实上,有一种叫做 SEO 的小东西并不总是与滑块一致。

WordPress花园建议你也读一下这篇文章  WordPress网站加速教程:购物者放弃购物车的 13 个原因以及如何解决它

随着 Core Web Vitals 的推出,优化 WordPress 上的页面速度现在对于 SEO 来说比以往任何时候都更加重要。 正如我们刚刚看到的,滑块会减慢页面速度,这是没有办法解决的。 研究表明,性能不佳只是滑块对 SEO 产生负面影响的一方面。 例如,其他报告的问题包括多个 H1 标题和闪存使用。

此外,Google 的最新更新完全是关于用户体验的:要获得良好的排名,您的页面需要尽可能为用户提供最佳体验。 不幸的是,可用性和轮播并不完全齐头并进。 滑块可能会让用户感到困惑:轮换报价并不能明确您要提出的内容。 如果您不能选择,访客也将无法选择! 如今,糟糕的用户体验只会破坏您的 SEO 工作。 滑块还会为键盘和屏幕阅读器用户带来可访问性问题,这反过来又会影响您的 SEO。

滑块和转化率

正如我们刚刚展示的,滑块对整体用户体验有不良影响。 再加上只有 1% 的人实际点击了滑块(几乎总是第一张幻灯片)这一事实,很容易得出滑块不会转换的结论。

鉴于他们创建的互动很少,滑块是一种完全无效的方式来接触您的目标受众。 您的用户将完全错过第一张幻灯片之后的内容。 在某些情况下,访问者可能会因为“横幅盲”或认为这是广告而完全跳过您的滑块。 无论哪种方式,您都不会传达您的信息。

最重要的是,如果您的网站的目标是触发转化,那么与添加滑块或任何类型的动画相比,尝试改善加载时间和 Core Web Vitals 指标会更好。


就连谷歌也同意我们的意见😉

正确的选择

认为你不能没有旋转木马? 再想想。 “网站所有者可以使用单个静态图像代替滑块,” Vasilis 解释说。 “图像是能够脱颖而出的东西,并传达他们想要传递的信息。” 如果您想展示多张图片,请设计您自己的照片库。

静态滑块也可以是一种替代方法。 它们仍然存在可用性和转换问题,但它们对性能的影响并没有那么糟糕。 无论如何,请远离动画。 不过说真的。


营销型WordPress外贸多语言独立站建设+谷歌SEO优化+谷歌关键字广告投放,就找WP花园!深圳公司,技术实力雄厚,用效果说话!详情咨询info@wordpresshy.com

海外社媒SNS代运营Tiktok代运营公司
Revive Old Posts