目录
图像滑块可能是 WordPress 网站中非常流行的功能，您可能会问使用它们对性能有什么影响。无论你问的是注重性能的 Web 开发人员、SEO 专家还是转化率专家，大多数人都会告诉你滑块或轮播会影响你的网站速度。
我们并不是图像滑块的最大粉丝，尽管我们可以理解为什么许多用户喜欢它们并且有几个网站使用它们。
为什么滑块不利于性能
滑块和 Web 性能远非天作之合。原因很简单。要使滑块在您的网站上运行，您需要更多代码：
- CSS 样式
- 额外的 JavaScript
大多数情况下，这会导致：
- 增加页面大小
- 增加页面加载时间
- HTTP 请求数量增加
所有这些都会导致性能降低，并可能影响 Core Web Vitals 等性能指标，即使 WP Rocket 正在您的网站上运行（稍后会详细介绍）。
更具体地说，轮播可以通过以下方式影响您的 Core Web 指标：
- LCP – Largest Contentful Paint – 页面的 LCP 元素通常可以在首屏图像滑块中找到。如果这些滑块没有得到适当的优化，这可能会对您的 LCP 产生负面影响。
- INP – Interaction to Next Paint – 如果您的滑块包含大量 JavaScript 文件，则 JavaScript 执行时间会更长。因此，主线程可能会变得繁忙和阻塞，并且页面可能无法响应用户交互，从而影响整体页面响应能力。
- CLS – Cumulative Layout Shift – 不幸的是，许多滑块在视觉上不稳定，这可能导致 CLS 成绩不佳。
当然，并非所有图像滑块都会对您的网站产生相同的影响，具体取决于自定义量、库的大小等，如下表所示：
| 页面加载时间 | 页面大小 | HTTP 请求 | |
| Control (No Slider) | 0.9 秒 | 515 | 12 |
| Slider Revolution | 0.9 秒 | 699 | 20 |
| Nivo Slider | 0.8 秒 | 554 | 15 |
| MetaSlider | 0.9 秒 | 562 | 17 |
| Soliloquy | 1.1 秒 | 567 | 23 |
| Smart Slider 3 | 1.0 秒 | 616 | 18 |
| Layer Slider | 1.0 秒 | 657 | 20 |
| Slider by 10Web | 1.5 秒 | 670 | 20 |
其他性能不良做法
一般来说，放在首屏的动画往往不是你网站最好的朋友。这也包括文本动画，它们与图像滑块具有相同的缺陷。页面顶部的动画不仅与转化无关，而且还会压低您的内容。除非它们在传达您的品牌形象方面发挥着重要作用，否则请记住，销售、排名和转化的尤其是您的内容，而不是您的动画。
我们还建议不要使用页面预加载器（即某些网站在实际内容出现之前显示的微调器或加载栏）。如果你在延迟 JavaScript 文件时同时使用一个预加载器，这将导致预加载器显示，直到有用户交互。如果没有用户交互，微调器将简单地无休止地旋转。预加载器会阻止用户立即看到内容，这对 UX 来说不是很好。更不用说它们会适得其反，因为它们会减慢网站的速度。当您可以拥有一个加载速度更快的网站时，为什么要添加一秒钟的微调器呢？
为什么你不会充分利用 Delay JS 功能
有人可能会问以下问题：在您的网站上运行缓存插件难道不应该补偿滑块（或其他不良做法）对性能的负面影响吗？不幸的是，事情并没有那么简单。
缓存插件最重要的功能之一：延迟JavaScript执行功能。此功能背后的想法是，并非所有文件都与页面的初始渲染相关，延迟它们可以改善加载时间和 PageSpeed 分数。
延迟 JavaScript 执行通过延迟 JavaScript 文件的加载直到有用户交互来提高性能。启用此功能后，所有 JavaScript 文件都会延迟，并且仅在用户需要时加载，即检测到用户交互（例如滚动或单击按钮）。
但问题是：如果你在页面顶部有一个滑块，并且启用了 Delay JS 功能，那么滑块的内容将被延迟，并且在页面的初始渲染期间，内容不会显示。毫无意义，对吧？遗憾的是，解决方法是禁用与滑块相关的 JavaScript 文件的功能。
鉴于滑块的受欢迎程度，在该功能开启时遇到滑块问题的用户。“必须排除与滑块相关的文件，才能让它们在没有用户交互的情况下工作”
滑块和 Web 性能：证据就在布丁中
为了准确了解滑块对 WP Rocket 的性能有何影响，我们在有和没有滑块的网站上进行了大量测试。
我们介绍了 4 种情况：
- #1：我们使用 Revolution Slider 测量了我们网站的性能，但没有启用延迟 JavaScript 执行功能。
- #2：我们在 Revolution Slider 和启用延迟 JavaScript 执行功能的情况下测量了我们网站的性能。
- #3： 我们在 Revolution Slider 和启用延迟 JavaScript 执行功能的情况下测量了我们网站的性能。与滑块相关的脚本被排除。
- #4： 我们使用静态图像和启用延迟 JavaScript 执行功能来衡量我们网站的性能。
让我们看看结果：
#1：Revolution Slider – 无延迟 JavaScript 执行
如您所见，分数为橙色 （55/100），Core Web Vitals 不是很健康。
还有不少与未使用的资源相关的问题。
#2：Revolution Slider – 延迟 JavaScript 执行
如您所见，分数为绿色 （90/100），我们总体上取得了更好的结果。
问题是滑块在用户交互之前没有出现。
#3：Revolution Slider – 延迟 JavaScript 执行 – 排除滑块
如您所见，分数也是绿色的，但没有那么好 （86/100），并且未使用的资源和图像再次出现问题。
审核 #4：没有JavaScript 执行延迟的滑块
这次我们没有使用滑块，而是添加了静态图像：
如您所见，结果是所有场景中最好的，我们的分数是绿色的，我们消除了未使用的 JavaScript 问题。
标题中的滑块会影响您网站的性能，即使是最强大的优化插件也无法完全弥补它。
滑块和 SEO
痴迷于 Web 性能，但在选择使用滑块时还需要考虑其他方面——例如 SEO 性能。
随着 Core Web Vitals 的推出，优化 WordPress 上的页面速度现在对 SEO 来说比以往任何时候都更加重要。正如我们刚才看到的，滑块会影响性能。研究表明，其他报告的问题包括多个 H1 标题和 Flash 使用。
此外，Google 的上次更新完全是关于用户体验的：要获得良好的排名，您的页面需要为用户提供最佳体验。不幸的是，可用性和轮播并不完全齐头并进。使用滑块时应注意，因为它们可能会使用户感到困惑。轮换选件可以为访客提供许多选择。滑块还会给键盘和屏幕阅读器用户带来可访问性问题，这也可能会影响你的 SEO。
滑块和转化率
正如我们刚刚展示的，滑块可能会影响整体用户体验，从而影响转化率。
根据一些研究，滑块可能会给用户带来困惑和分心。他们中的一些人可能会错过第一张幻灯片后的内容。在某些情况下，访问者可能会因为 “横幅盲目” 或认为它是广告而完全跳过您的滑块。无论哪种方式，您都有无法传递消息的风险。
底线：如果你的网站目标是触发转化，你应该首先专注于改善加载时间以及 Core Web Vitals 指标。
有哪些选择？
如果您想知道轮播的替代方案是什么，以下是我们与客户分享的内容：网站所有者可以使用单个静态图像来代替滑块，图像是能够脱颖而出并传达他们想要传递的信息的东西。如果您想展示多张图片，您还可以设计自己的照片库。
静态滑块可能是另一种选择。它们仍然存在可用性和转化问题，但它们对性能的影响较小。现在，您已经了解了滑块和动画可以带来的性能，您可以根据自己的需求和目标来决定。
发表回复