轮播界面最佳实践

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

Katie Hempenius
Katie Hempenius
X

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

本文将介绍轮播界面的效果和用户体验方面的最佳实践。

显示轮播界面的图片

性能

精心实现的轮播界面本身对性能的影响应该微不足道，甚至没有影响。不过，轮播界面通常包含大型媒体素材资源。无论是显示在轮播界面中还是其他位置，大型素材资源都可能会影响广告效果。

  • LCP（最长内容绘制时间）

    可见区域上方的大型轮播界面通常包含网页的 LCP 元素，因此可能会对 LCP 产生重大影响。在这些情况下，优化轮播界面可能会显著缩短 LCP。如需深入了解如何在包含轮播界面的网页上衡量 LCP，请参阅轮播界面的 LCP 衡量部分。

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

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

  • CLS（累积布局偏移）

    令人惊讶的是，有大量轮播界面使用卡顿的未合成动画，这可能会导致 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 毫秒内发生，因此不会计入累积布局偏移 (CLS)。不过，对于自动播放轮播界面，这些布局偏移不仅可能会计入 CLS，而且还可能会无限期重复。因此，请务必验证自动播放轮播界面是否会导致布局偏移。

  • 滚动：某些轮播界面允许用户滚动浏览轮播界面幻灯片。如果元素的起始位置发生变化，但其滚动偏移量（即 scrollLeft 或 scrollTop）也发生了相同的变化（但方向相反），则不视为布局偏移，前提是这些变化发生在同一帧中。

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

使用现代技术

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

不过，根据您要构建的轮播界面类型，您可能根本不需要 JavaScript。借助新的 ScrollSnap 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 中移除的图片视为潜在的 Largest Contentful Paint。在 Chrome 88 之前，系统不会考虑这些图片。对于使用自动播放轮播界面的网站，此定义变更对 LCP 得分的影响将是中性或正面影响。

之所以做出此项更改，是因为我们发现许多网站通过从 DOM 树中移除之前显示的图片来实现轮播转换。在 Chrome 88 之前，每次呈现新幻灯片时，移除上一个元素都会触发 LCP 更新。这项更改仅影响自动播放的轮播界面，因为根据定义，潜在的最大内容绘制操作只能在用户首次与网页互动之前发生。

Chrome 121 中阈值的更改

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

其他注意事项

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

提供醒目的导航控件

轮播界面导航控件应易于点击且高度醒目。这项工作很少有人能做好 - 大多数轮播界面中的导航控件都很小且不显眼。请注意，单一颜色或样式的导航控件很少适用于所有情况。例如，在深色背景下清晰可见的箭头在浅色背景下可能很难看清。

指示导航进度

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

支持移动手势

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

提供备选导航路径

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

可读性最佳实践

请勿使用自动播放

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

因此，自动播放很少是好的选择。如果内容很重要，不使用自动播放功能可最大限度地提高其曝光度；如果轮播界面内容不重要，则使用自动播放功能会分散更重要内容的注意力。此外，自动播放的轮播界面可能难以阅读（而且会令人烦恼）。用户的阅读速度各不相同，因此很少有轮播界面能始终在适当的时间为不同的用户进行转换。

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

将文本和图片分开

轮播界面文本内容通常会“嵌入”到相应的图片文件中，而不是使用 HTML 标记单独显示。这种方法不利于无障碍功能、本地化和压缩率。它还鼓励采用“放之四海皆准”的素材资源制作方法。不过，相同的图片和文本格式在桌面版和移动版中很少能达到同样的可读性。

简明扼要

您只有几秒钟的时间来吸引用户的注意力。简短、直截了当的文案有助于提高传达信息的几率。

产品方面的最佳实践

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

不过，轮播界面并不总是能发挥出理想的效果。

  • 轮播界面（尤其是包含促销信息或自动滚动的轮播界面）很容易被用户误认为广告。用户往往会忽略广告，这种现象称为横幅广告视而不见。
  • 轮播界面通常用于安抚多个部门，避免就业务优先级做出决定。因此，轮播界面很容易成为存放无效内容的垃圾场。

测试您的假设

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

保持相关性

轮播界面效果最佳时，其包含有趣且相关的内容，且这些内容的上下文清晰明确。如果内容在轮播界面之外无法吸引用户，那么将其放入轮播界面也无法提升效果。如果您必须使用轮播界面，请优先考虑内容，并确保每个幻灯片都足够相关，能让用户想点击查看后续幻灯片。