最佳实践 - 轮播的最佳实践 - 《经典文章翻译》

性能
性能的最佳实践
性能衡量
- 轮播的LCP测量
- Chrome 88 开始LCP的计算方式
其他注意事项

轮播是一种 UX 组件，它以类似幻灯片的方式显示内容。轮播可以“自动播放”，也可以由用户手动导航。尽管轮播可以用在任何地方，但它们最常用于在主页上显示图像、产品和促销活动。
本文讨论了轮播的性能和 UX 的最佳实践。

性能

一个好的轮播，应该在性能方面的影响非常低。但是，轮播经常包含一些大的媒体资源。这些媒体资源无论它们在轮播里还是在其他地方，都会影响到性能。

LCP：首屏中的大轮播通常都包含页面的LCP元素，因此它对LCP的影响非常明显。在这些场景中，优化轮播会显着提高 LCP。有关如何在包含轮播的页面上测量LCP，请参阅LCP measurement for carousels。
FID: 轮播对 JavaScript 的要求很低，因此不应影响页面交互。如果您发现站点的轮播有长时间运行的脚本，则应考虑更换实现方式。
CLS: 滥用无组织的轮播动画会对CLS造成很大的影响。页面上有自动播放的轮播的时候，有可能不停的触发CLS，通常来说肉眼不太容易观察出来，因此有可能被忽略。为了防止这类问题，请避免在你的轮播中使用非合成动画。
性能的最佳实践
使用HTML加载轮播
轮播内容应通过页面的 HTML 加载，以便浏览器在页面加载过程的早些发现它。在轮播上使用JS去初始化加载非常影响性能。图像的延迟加载会对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);
```
对于轮播的优化方式，可以考虑自动加载第一张幻灯片，然后逐步加载控件和其他内容。这种适用于用户会长时间停留的地方，这样就有时间可以加载一下其他内容。如果像主页这种用户可能只停留一两秒的地方，这样加载也是有用的。

避免偏移

Chrome 88-90 提供了一些与如何计算布局偏移相关的错误修复。许多这些错误修复与轮播相关联。由于这些更新，会在更高版本的 Chrome 中轮播相关的布局转换分数会有所降低。
幻灯片切换和控件是轮播中布局偏移的主要地方：

幻灯片切换：更新DOM属性来实现轮播会导致布局偏移。比如left、top、width、margin。为了防止偏移，可以使用transform替代这些修改。
导航控件：基于触发的时机，移动，添加和删除导航控件可能会导致偏移。这种轮播通常都会在用户鼠标悬浮时暂停播放。

这里是一些CLS测量的常见混淆点：

自动播放的轮播：幻灯片过渡是布局偏移的常见场景。在非自动播放轮播中，这些布局偏移通常发生在用户交互的 500 毫秒内，因此并不会被记入布局偏移。因此，对于自动播放的轮播来说，这些布局偏移不仅会被记下来，并且还会一直记下去。因此保证布局偏移不是来自轮播非常重要。
滚动：一些轮播允许用户通过滚动触发轮播切换。如果一个元素的起始位置发生了变化，但它的滚动偏移量（即scrollLeft或scrollTop）发生了相同的变化（但方向相反），只要它们发生在同一帧中，就不会被视为布局偏移。

更多内容可以阅读 Debug layout shifts.

使用现代化技术

许多网站使用第三方的组件库来实现轮播。如果你还在用老的版本，你可能需要考虑切换成新版本以便提高性能。新的版本的库会使用高性能的api并且会减少一些依赖的使用，比如jQuery。当前，这很大程度取决于你实现轮播的方式，毕竟可能你根本没有使用JS。新的api比如Scroll Snap可以让你用纯HTML和CSS实现轮播。以下是一些使用这个api的文章，你可以读一读，可能会有所帮助：

优化轮播内容

轮播通常都会用一些大的图片，因此你需要花费时间去优化这些图片，选择对的图片格式以及压缩等级，使用CDN，srcset这些技术都可以帮助我们改善图片的大小和加载。

性能衡量

本文主要讨论与轮播相关的LCP测量。尽管轮播的LCP测量和其他的没什么区别，但是自动轮播的测量机制和非自动轮播是有差异的，这一点总是会混淆。

轮播的LCP测量

理解轮播的LCP是如何测量的有两个关键点：

LCP只考虑每一帧上元素的绘制。如果有用户交互，那么这个元素就不会被记入。自动轮播中的所有元素都有可能被记入位移，非自动轮播仅仅是第一页才有可能触发轮播。
如果渲染两个大小相同的图像，则第一个图像将被视为 LCP 元素。只有当新元素大于当前 LCP 元素时才更新 LCP 元素。因此，如果所有轮播元素的大小相同，则 LCP 元素应该是显示的第一个图像。
在计算LCP的时候，LCP会将可视尺寸和内在尺寸中较小的视为LCP元素。因此，如果自动播放的轮播以一致的尺寸显示图像，但包含小尺寸不一致的图像，则 LCP 元素可能会随着新幻灯片的显示而变化。如果所有图像都以相同的尺寸显示，则具有最大固有尺寸的图像将被视为 LCP 元素。为了保持低 LCP，您应该确保自动播放轮播中的所有项目具有相同的尺寸。

Chrome 88 开始LCP的计算方式

从Chrome 88开始，被移除的图片将被视为LCP内容区域。在此之前，这些图片都被排除在外。使用自动轮播的网站，LCP在此情况下可能有所提高。
通过观察很多网站的实现，发现轮播总是通过删除前一个元素来实现轮播的切换，因此作出一定更改来适应这种场景。在 Chrome 88 之前，每次展示新幻灯片时，删除前一个元素都会触发 LCP 更新。根据定义，此更改仅影响自动播放轮播，潜在的最大内容绘制只能在用户首次与页面交互之前发生。

其他注意事项

本文只讨论轮播的最佳实践。实际情况你还是应该根据你的业务作出更改，以便给用户提供更加适合的内容。

导航的最佳实践

提供明显的导航控件

轮播导航控件应该易于点击且高度可见。这是很少做的事情，因为大多数轮播都有小巧的导航控件。请记住，单一颜色或样式的导航控件不可能适用于所有情况。例如，在深色背景下清晰可见的箭头在浅色背景下可能很难看清。

指示导航进度

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

手势的支持

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

提供备用导航方式

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

可读性最佳实践

不要使用自动播放

自动播放的使用产生了两个几乎自相矛盾的问题：屏幕动画往往会分散用户的注意力，并将视线从更重要的内容上移开；同时，因为用户经常将动画与广告联系起来，他们会忽略自动播放的轮播。
因此，不自动播放是一个不错的选择。如果内容很重要，不使用自动播放将最大化其曝光率；如果轮播内容不重要，那么使用自动播放将会将用户的视角从更重要的内容移开。此外，自动播放的轮播可能很烦人。人们的阅读速度不一致，因此轮播图很少会在“正确”的时间为不同的用户持续更新。
理想情况下，幻灯片导航应通过导航控件由用户引导。如果您必须使用自动播放，则应在用户悬停时禁用自动播放。此外，应该考虑一下幻灯片的内容——如果幻灯片包含的文本越多，那么它在屏幕上显示的时间就越长。

文本与图片分离

轮播的文字通常都会嵌入到图片上，相比单独展示它们。这种方法不利于访问，本地化和压缩。它还鼓励采用一刀切的资产创建方式。此外，相同的图像和文本格式在桌面和移动格式中的可读性很少，因此鼓励大家文本和图片分离。

简洁明了

您只有几分之一秒的时间来吸引用户的注意力。简短明了的文案会增加您的内容曝光率。

产品的最佳实践

在不能使用额外的垂直空间来显示更多内容的情况下，轮播效果很好。产品页面上的轮播是一个典型场景。然而，轮播的使用并不总是有效的。

轮播，特别是如果它们包含促销或自动推进，很容易被用户误认为是广告。用户倾向于忽略广告
轮播通常用于安抚多个部门并避免对业务优先级做出决定。因此，轮播很容易变成垃圾倾倒场。
评估你的实践
应该评估和测试轮播的业务影响，尤其是主页上的轮播。轮播点击率可以帮助您确定轮播及其内容是否有效曝光。
其他
当轮播包含有趣且相关的内容并以清晰的上下文呈现时，效果最佳。如果内容在轮播之外都不会吸引用户，那么将其置于轮播中并不会使其表现更好。如果您必须使用轮播，请优先考虑内容并确保每张幻灯片都具有足够的吸引度，以便用户可以点击进入下一张幻灯片。

轮播的最佳实践

性能

性能的最佳实践

使用HTML加载轮播