轮播界面最佳实践

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

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)。不过， 对于自动播放的轮播界面来说，这些布局偏移 但它们也可以无限重复。因此， 务必要验证自动播放的轮播界面不是布局来源 变化。

  • 滚动：某些轮播界面允许用户使用滚动进行导航 幻灯片。如果某个元素的起始位置发生变化，但其滚动偏移量 （也就是说， scrollLeft 或 scrollTop) 但变化幅度相同（但相反方向），就不能 被视为一次布局偏移，但前提是这些偏移发生在同一帧中。

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

运用现代技术

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

不过，根据您所制作的轮播界面类型，您可能不需要 完全没有 JavaScript。新的 滚动 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，您应确保自动播放的所有项 具有相同的固有尺寸。

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

自 Chrome 88、 以后从 DOM 中删除的图片会被视为可能的最大图片 即 Contentful Paint在 Chrome 88 之前，这些图片已从 考虑度。对于使用自动播放轮播功能的网站，此定义会改变 都会对 LCP 得分产生中性或积极影响。

此次更改是为了配合 观察 许多网站通过删除 DOM 树中显示的图片。在 Chrome 88 之前，每次更新 移除前一个元素会触发 LCP 更新。根据定义，这一更改只会影响自动播放的轮播， 最大型的内容绘制只能在用户首次与 页面。

Chrome 121 中的阈值变化

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

其他注意事项

本部分介绍了在用户体验和产品开发方面应遵循的最佳实践， 在实施轮播时考虑的因素轮播界面有助于实现您的业务目标 并以易于浏览和阅读的方式呈现内容。

提供醒目的导航控件

轮播界面控件应易于点击且在显眼位置。这是 一些很少做得好的内容 大多数轮播界面都有导航控件 既小又小。记住，单一颜色或样式 导航控件很少在所有情况下都有效。例如，箭头 在深色背景下清晰可见的图片可能很难看清 以浅色背景为主

指示导航进度

轮播界面控件应提供有关 以及用户的观看进度有了这些信息，您就可以 用户只需前往特定幻灯片并了解其内容 已被人查看。在某些情况下，提供 无论是下一张幻灯片中的摘录还是缩略图列表， 也有助于提升用户互动度

支持移动手势

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

提供备用导航路径

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

可读性最佳实践

不使用自动播放功能

使用自动播放功能会产生两个几乎自相矛盾的问题： 动画往往会分散用户的注意力，让他们的注意力离开更重要的网站 content;因为用户经常会将动画与广告关联起来 将忽略自动播放的轮播界面

因此，自动播放是很少的理想之选。如果内容很重要， 使用自动播放功能可以最大限度地提高曝光率；如果轮播内容不重要 则自动播放功能会分散对比较重要内容的注意力此外， 自动播放的轮播界面可能难以阅读（而且非常烦人）。阅读人数 因此轮播界面会始终以 “右”为不同的用户提供不同的体验

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

将文字和图片分开

轮播界面文字内容通常是“内置”的，相应的图片文件 而不是使用 HTML 标记单独展示。这种方法不适合 可访问性、本地化和压缩率它还鼓励 通用的素材资源制作方法。但是，相同的图片和文字 在桌面设备和移动设备的广告格式中，可读性差不多。

简洁

您只有零点几秒的时间吸引用户的注意力。简短， 简明扼要的文案会提高信息的传达几率。

产品最佳做法

如果要使用额外的垂直空间来展示内容，轮播界面会取得良好效果。 显示其他内容的选项。商品页面上的轮播界面 这通常是此用例的一个很好的例子。

但是，轮播界面并非总能得到有效利用。

  • 轮播界面，尤其是包含促销活动或自动推进的轮播界面， 很容易被误认为为 投放的广告。用户往往会忽略广告 - 一种现象 也称为横幅广告 失明。
  • 轮播界面通常用于容纳多个部门， 有关业务重点的决策。因此，轮播界面可轻松 将无效内容放入垃圾库中。

验证你的假设

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

保持相关性

当轮播界面包含有趣且相关且 提供了清晰的背景信息如果内容无法吸引用户 因此，将其放入轮播界面无法使其取得更好的效果。如果您必须 使用轮播界面，排定内容的优先级，并确保每张幻灯片都充分展示 以及用户想要点击前往后续幻灯片的相关程度。