轮播广告的最佳实践

优化轮播广告的性能和实用性。

Katie Hempenius
Katie Hempenius
X - Web开发指南

轮播广告是一种 UX 组件，以幻灯片放映的方式显示内容。轮播广告可以“自动播放”或由用户手动导航。虽然轮播广告可以在其他地方使用，但它们最常用于在主页上显示图片、产品和促销信息。

本文讨论了轮播广告的性能和 UX 最佳实践。

Image showing a carousel

性能

一个良好实现的轮播广告本身应该对性能的影响非常小或没有影响。但是，轮播广告通常包含大型媒体资源。无论大型资源是否显示在轮播广告中，都可能会影响性能。

  • 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。新的 Scroll Snap API 使仅使用 HTML 和 CSS 即可实现类似轮播广告的过渡效果。

以下是一些关于使用 scroll-snap 的资源，您可能会觉得有用

优化轮播广告内容

轮播广告通常包含网站上一些最大的图片，因此花时间确保这些图片已完全优化是值得的。选择正确的图片格式和压缩级别、使用图片 CDN 以及 使用 srcset 提供多个图片版本 都是可以减小图片传输大小的技术。

性能测量

本节讨论与轮播广告相关的 LCP 测量。虽然在 LCP 计算期间轮播广告的处理方式与任何其他 UX 元素没有什么不同，但计算自动播放轮播广告的 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 中的行为。

其他注意事项

本节讨论您在实施轮播广告时应牢记的 UX 和产品最佳实践。轮播广告应推进您的业务目标，并以易于导航和阅读的方式呈现内容。

提供醒目的导航控件

轮播广告导航控件应易于点击且高度可见。这是很少做好的事情 - 大多数轮播广告的导航控件都很小且很微妙。请记住，单一颜色或样式的导航控件很少在所有情况下都有效。例如，在深色背景下清晰可见的箭头在浅色背景下可能难以看到。

指示导航进度

轮播广告导航控件应提供有关幻灯片总数以及用户浏览进度的上下文。此信息使​​用户更容易导航到特定幻灯片并了解已查看的内容。在某些情况下，提供即将到来的内容的预览（无论是下一张幻灯片的摘录还是缩略图列表）也可能有所帮助并提高参与度。

支持移动设备手势

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

提供备用导航路径

因为大多数用户不太可能与所有轮播广告内容互动，所以轮播广告幻灯片链接到的内容应该可以从其他导航路径访问。

可读性最佳实践

不要使用自动播放

自动播放的使用会产生两个几乎自相矛盾的问题：屏幕上的动画往往会分散用户的注意力，并将目光从更重要的内容上移开；同时，由于用户通常将动画与广告联系起来，他们会忽略自动播放的轮播广告。

因此，自动播放很少是一个好的选择。如果内容很重要，不使用自动播放会最大程度地提高其曝光率；如果轮播广告内容不重要，那么使用自动播放会分散对更重要内容的注意力。此外，自动播放轮播广告可能难以阅读（也很烦人）。人们的阅读速度不同，因此轮播广告始终在不同用户的“正确”时间过渡的情况很少见。

理想情况下，幻灯片导航应通过导航控件由用户定向。如果您必须使用自动播放，则应在用户悬停时禁用自动播放。此外，幻灯片过渡速率应考虑幻灯片内容 - 幻灯片包含的文本越多，它应在屏幕上显示的时间就越长。

将文本和图片分开

轮播广告文本内容通常“嵌入到”相应的图片文件中，而不是使用 HTML 标记单独显示。这种方法不利于无障碍功能、本地化和压缩率。它还鼓励对资源创建采用一刀切的方法。但是，相同的图片和文本格式很少在桌面和移动格式上同样可读。

简洁明了

您只有不到一秒的时间来吸引用户的注意力。简短、切中要点的文案将增加您的信息传达出去的可能性。

产品最佳实践

轮播广告在无法使用额外的垂直空间来显示额外内容的情况下效果良好。产品页面上的轮播广告通常是此用例的一个很好的例子。

但是，轮播广告并非总是有效使用。

  • 轮播广告，尤其是当它们包含促销信息或自动前进时，很容易被用户误认为是广告。用户倾向于忽略广告 - 这种现象被称为横幅广告盲视。
  • 轮播广告通常用于安抚多个部门并避免就业务优先级做出决策。结果，轮播广告很容易变成无效内容的垃圾场。

测试您的假设

轮播广告的业务影响，尤其是主页上的轮播广告，应该进行评估和测试。轮播广告点击率可以帮助您确定轮播广告及其内容是否有效。

保持相关性

当轮播广告包含有趣且相关的内容，并以清晰的上下文呈现时，它们的效果最佳。如果内容在轮播广告之外无法吸引用户，那么将其放在轮播广告中也不会使其表现更好。如果您必须使用轮播广告，请优先考虑内容并确保每张幻灯片都足够相关，以至于用户想要点击进入后续幻灯片。