轮播界面最佳实践

优化轮播界面以提升性能和易用性。

Katie Hempenius
Katie Hempenius
X

轮播界面是一种以幻灯片形式显示内容的用户体验组件。轮播界面可以“自动播放”，也可以由用户手动导航。虽然轮播界面可以在其他地方使用，但它们最常用于在首页上显示图片、商品和促销活动。

本文介绍了轮播界面的性能和用户体验最佳实践。

显示轮播界面的图片

性能

完善的轮播界面本身对效果的影响应该微乎其微或没有影响。不过，轮播界面通常包含大型媒体资源。 无论素材资源是在轮播界面中显示还是在其他位置展示，大型素材资源都会影响效果。

  • LCP (Largest Contentful Paint)

    大型首屏轮播界面通常包含网页的 LCP 元素，因此可能会对 LCP 产生重大影响。在这些情况下，优化轮播界面可以显著提高 LCP。如需深入了解 LCP 衡量在包含轮播界面的网页上是如何运作的，请参阅轮播界面的 LCP 衡量部分。

  • INP（从互动到下一次绘制）

    轮播界面对 JavaScript 的要求最低，因此不应影响网页响应速度。如果您发现网站的轮播界面包含长时间运行的脚本，应考虑替换轮播界面工具。

  • CLS（Cumulative Layout Shift）

    数量惊人的轮播界面使用了卡顿的非合成动画，这些动画可能会导致 CLS。在具有自动播放轮播界面的网页上，这可能会导致无限 CLS。此类 CLS 通常对人眼来说并不明显，因此很容易忽视问题。为避免此问题，请避免在轮播界面中使用未合成的动画（例如，在幻灯片过渡期间）。

性能最佳实践

使用 HTML 加载轮播界面内容

您应通过网页的 HTML 标记加载轮播界面内容，以便浏览器在网页加载早期阶段发现此类内容。使用 JavaScript 启动轮播界面内容的加载可能是使用轮播界面时要避免的一个最大的性能错误。这会延迟图片加载，可能会对 LCP 产生负面影响。

正确做法
<div class="slides">
  <img src="https://example.com/cat1.jpg">
  <img src="https://example.com/cat2.jpg">
  <img src="https://example.com/cat3.jpg">
</div>
错误做法
const slides = document.querySelector(".slides");
const newSlide = document.createElement("img");
newSlide.src = "htttp://example.com/cat1.jpg";
slides.appendChild(newSlide);

对于高级轮播界面优化，请考虑以静态方式加载第一张幻灯片，然后逐步对其进行增强功能，以包含导航控件和其他内容。此方法最适用于用户长时间关注的环境，这样可以为额外内容留出加载时间。在首页等环境中，用户可能只会停留一两秒，因此仅加载一张图片可能效果类似。

避免布局偏移

幻灯片过渡和导航控件是轮播界面中布局偏移的两种最常见的原因：

  • 幻灯片过渡：幻灯片过渡期间发生的布局偏移通常是由更新 DOM 元素的布局引发属性导致的。其中一些属性的示例包括：left、top、width 和 marginTop。为避免布局偏移，请改用 CSS transform 属性来转换这些元素。此演示展示了如何使用 transform 构建基本轮播界面。

  • 导航控件：从 DOM 中移动或移除轮播导航控件可能会导致布局偏移，具体取决于这些更改的实现方式。呈现此行为的轮播界面通常会为了响应用户悬停操作而做出响应。

以下是关于轮播界面 CLS 衡量的一些常见混淆点：

  • 自动播放轮播界面：幻灯片过渡是与轮播界面相关的布局偏移的最常见原因。在非自动播放的轮播界面中，这些布局偏移通常发生在用户互动后的 500 毫秒内，因此不会计入 Cumulative Layout Shift (CLS)。不过，对于自动播放轮播界面，这些布局偏移不仅可能会计入 CLS，还会无限重复。因此，验证自动播放的轮播界面不是布局偏移的原因尤为重要。

  • 滚动：某些轮播界面允许用户使用滚动功能来浏览轮播界面幻灯片。如果某个元素的起始位置发生变化，但其滚动偏移量（即 scrollLeft 或 scrollTop）的变化量相同（但方向相反），那么只要这些元素发生在同一帧中，就不会被视为布局偏移。

如需详细了解布局偏移，请参阅调试布局偏移。

使用现代技术

许多网站使用第三方 JavaScript 库来实现轮播界面。如果您目前在使用旧版轮播工具，或许可以通过改用新版工具来提升性能。较新的工具往往使用更高效的 API，并且不太可能需要 jQuery 等其他依赖项。

不过，您可能根本不需要 JavaScript，具体取决于您构建的轮播界面类型。借助新的 Scroll Snap API，只需使用 HTML 和 CSS 即可实现类似轮播的转换。

以下是关于使用 scroll-snap 的一些实用资源：

优化轮播界面内容

轮播界面通常包含网站中一些最大的图片，因此有必要花时间确保这些图片得到充分优化。选择正确的图片格式和压缩级别、使用图片 CDN 以及使用 srcset 提供多个图片版本都可以缩减图片传输大小。

性能衡量

本部分介绍了与轮播相关的 LCP 衡量。虽然在 LCP 计算期间，轮播界面的处理方式与任何其他用户体验元素并无区别，但为自动播放的轮播界面计算 LCP 的机制是一个常见的混淆点。

轮播界面的 LCP 衡量

下面介绍了有关轮播界面 LCP 计算方式的要点：

  • LCP 会在页面元素被绘制到框架时对其进行考虑。当用户与网页互动（点按、滚动或按键操作）后，系统不再考虑 LCP 元素的新候选内容。因此，自动播放的轮播界面中的任何幻灯片都有可能成为最终的 LCP 元素，而在静态轮播界面中，只有第一张幻灯片可能是潜在的 LCP 元素。
  • 如果渲染了两张大小相同的图片，则第一张图片会被视为 LCP 元素。仅当 LCP 候选元素大于当前 LCP 元素时，LCP 元素才会更新。因此，如果所有轮播元素的大小相等，则 LCP 元素应该是显示的第一张图片。
  • 在评估 LCP 候选版本时，LCP 会考虑“可见大小或固有大小（以较小者为准）”。因此，如果自动播放的轮播界面以一致的尺寸显示图片，但包含小于显示尺寸的不同固有尺寸的图片，则 LCP 元素可能会随着新幻灯片的显示而发生变化。在这种情况下，如果所有图片都以相同的尺寸显示，则固有尺寸最大的图片将被视为 LCP 元素。为了保持较低的 LCP，您应确保自动播放轮播中的所有内容都具有相同的固有大小。

Chrome 88 中轮播界面的 LCP 计算方式发生变化

自 Chrome 88 起，之后从 DOM 中移除的图片被视为可能的最大内容渲染。在 Chrome 88 之前的版本中，此类图片不在考虑范围内。对于使用自动播放轮播界面的网站，此定义变更会对 LCP 得分产生中性或积极的影响。

我们进行这项更改是为了回应这样一种观察：很多网站通过从 DOM 树中移除之前显示的图片来实现轮播过渡。在 Chrome 88 之前，每次显示新幻灯片时，移除上一个元素都会触发 LCP 更新。此变更只会影响自动播放的轮播界面（按照定义），可能的最大内容渲染时间只能在用户首次与页面互动之前发生。

Chrome 121 中的阈值变化

Chrome 121 更改了轮播界面等横向滚动图片的行为。现在，它们使用与垂直滚动相同的阈值。这意味着，对于轮播界面用例，图片会先加载，然后才显示在视口中。这意味着图片加载不太可能被用户注意到，但代价是下载次数更多。使用水平延迟加载演示比较 Chrome 与 Safari 和 Firefox 中的行为。

其他注意事项

本部分介绍了在实现轮播界面时应牢记的用户体验和产品最佳实践。轮播界面应有助于推进您的业务目标，并以易于浏览和阅读的方式呈现内容。

提供醒目的导航控件

轮播界面导航控件应易于点击且显眼。大多数轮播界面都有既小又精巧的导航控件，很少有人做到这一点。请注意，导航控件的单一颜色或样式很少在所有情况下都有效。例如，在深色背景下清晰可见的箭头在浅色背景下可能让人很难看。

显示导航进度

轮播界面导航控件应提供有关幻灯片总数以及用户浏览进度的背景信息。此信息可让用户更轻松地导航到特定幻灯片，并了解用户已查看过哪些内容。在某些情况下，预先了解即将发布的内容（无论是下一张幻灯片的摘录还是缩略图列表）也有助于提高互动度。

支持移动设备手势

在移动设备上，除了传统导航控件（例如屏幕上的按钮）之外，还应支持滑动手势。

提供备用导航路径

由于大多数用户不太可能与所有轮播界面内容互动，因此轮播界面幻灯片链接到的内容应可通过其他导航路径访问。

可读性最佳实践

不使用自动播放功能

使用自动播放功能会产生两个几乎自相矛盾的问题：屏幕动画往往会分散用户的注意力，导致用户无法观看更重要的内容；同时，由于用户通常会将动画与广告相关联，因此他们会忽略自动播放的轮播界面。

因此，自动播放是很少见的理想选择。如果内容很重要，不使用自动播放功能可以最大限度地提高其曝光度；如果轮播界面内容不重要，则使用自动播放功能会削弱更重要的内容。此外，自动播放的轮播界面可能难以阅读（也很烦人）。用户的阅读速度各不相同，因此轮播界面会在“合适的”时间持续针对不同用户进行转换的情况很少见。

理想情况下，幻灯片导航应由用户通过导航控件来实现。如果您必须使用自动播放功能，则应在用户悬停鼠标时停用自动播放功能。此外，幻灯片切换速度应将幻灯片内容考虑在内 - 幻灯片包含的文本越多，幻灯片在屏幕上显示的时间就越长。

将文字和图片分开

轮播界面文字内容通常会“内置”到相应的图片文件中，而不是使用 HTML 标记单独显示。这种方法对可访问性、本地化和压缩率不利。此外，该指南还建议采用通用的方法来制作素材资源。但是，相同的图片和文本格式在桌面设备和移动设备格式中很难同样易读。

简洁

您只有零点几分的时间来吸引用户的注意力。简明扼要的文案可提高信息被传达的几率。

产品最佳实践

在某些无法使用额外的垂直空间来显示更多内容的情况下，轮播界面会非常有用。产品页面上的轮播界面通常是此用例的一个很好的例子。

不过，轮播界面有时无法有效使用。

  • 轮播界面（尤其是包含促销活动或自动推进的轮播界面）很容易被用户误认为广告。用户往往会忽略广告，这种现象称为“用户对横幅广告视而不见”。
  • 轮播界面通常用于安置多个部门，并避免就业务优先级做出决策。因此，轮播界面很容易变成无效内容的转储场地。

测试您的假设

您应评估和测试轮播界面（尤其是首页上的轮播界面）的业务影响。轮播界面点击率可帮助您确定轮播界面及其内容是否有效。

保持相关性

当轮播界面包含有趣且相关的内容，并且呈现的背景信息清晰明确时，效果最佳。如果内容无法吸引轮播界面以外的用户，那么将其放置在轮播界面中并不能使其表现更好。如果您必须使用轮播界面，请确定相关内容的优先级，并确保每张幻灯片都有足够的相关性，让用户可以点击查看后续幻灯片。