为什么喜闻乐见的幻灯片是转化率杀手?
自从村里通了宽带,不用再挂着modem上网之后我们看到的网页中出现了越来越多的幻灯片(Slider,Carousel,Rotating Headers)。一时间幻灯片仿佛是网站首页的标配,你看阿里云、腾讯云、百度云哪一家的首页不是有一个大大的幻灯片轮播。

可是你知不知道,幻灯片这样喜闻乐见的页面推广重头元素却是CRO界一致认为的转化率杀手?而稍微有些CRO意识的数字营销者都会劝诫不要碰幻灯片。本篇我将和极诣的读者一同探讨幻灯片的是非功过。如果你着急的话,这里有TL;DR——shouldiuseacarousel.com

雅虎:怪我咯?
比较常见观点认为幻灯片的普遍采用起源于2009年的雅虎。它在首页引入了幻灯片轮播位用于推广。从此幻灯片就被各大网站效仿。
幻灯片由于在网页中产生动态效果,而且每一张片子都可以去到不同目的地,(这点有别于gif动图),不单抓眼球,而且很实用。人眼从远古开始就对运动的物体会投入更多注意力,这是无法回避的生物特点。利用了这一特点的幻灯片顺理成章地获得了许多网站首屏的主角。根据Conversion Sciences在2018年的统计,有6成电商网站的首页用上了幻灯片。
幻灯片被广泛应用的另一个重要原因是大型组织内部往往有各种不可调和的声音,A部门要卖a产品,B部门要卖b产品,C部门要卖c产品……于是最粗暴的让所有人都站到c位的方法就是用幻灯片循环播放了。说大型组织还算是比较客气的说法,只要是目标有差异就会有各种小九九,就会有幻灯片。幻灯片简直就是上天赐予的防掐神器。
所以我们都要上幻灯片?
没问题。只要你清楚地了解幻灯片能带来的“益处”。
- 低至1%的点击率。虽然占了这么大首屏的面积,幻灯片总点击率才1%。而且九成的点击发生在第一张幻灯片,这才是名副其实的c位。
- Banner-blindness。不好意思,只是这幻灯片太像广告了。虽然人们先天对运动的物体感兴趣,但是后天练就了自动忽略长得像广告的一切页面元素。
- 糟糕的浏览体验。幻灯片在绝大多数情况下会成为CWV中LCP的L,它会拖慢页面加载。同时许多未经优化的幻灯片会造成页面布局大幅变动让CLS变差。
- 阅读困难制造者。且不说许多在后面出现的片子访客很有可能不会看到,就连在前面的片子访客都很有可能没时间读完并理解意思。
- 推波助“弹”的大块头。由于将大量宝贵的首屏资源让位于幻灯片,更多有价值的内容被相应地“下推”,此时页面的跳出率也明显地提升。
- 都是重点=没有重点。当访客来到你的首页时,大多数情况下其访问意图还处在相对模糊的阶段。幻灯片极有可能“硬塞”入大量不相关的信息。
所以我们要避免使用幻灯片?
无脑采用幻灯片无异于主动降智,好比人家用Top1,Top2,Top3这样的Chinglish你也要跟风使用。只要稍微用一下头脑,你完全可以避免使用幻灯片这样有百害而无一利的页面元素。
那么问题来了,“我老板就是喜欢幻灯片,一定要用幻灯片,亏钱也要用幻灯片”怎么办呢?千金难买我乐意啊!?
如果非要使用幻灯片,极诣为你总结了下面这些缓解幻灯片负面影响的举措:
- 优化图片大小。合理地使用jpg和png以及其他新图片格式来优化图片大小,加速加载。对于手机版本的图片可以使用<picture>元素区别加载。
- 优化图片尺寸。满屏或者大尺寸的幻灯片会让你有更多机会流失访客对其他内容的关注。参考阿里云和腾讯云的幻灯片,这比百度云要好。
- 预设幻灯片位置。为了避免幻灯片载入时发生布局错误(Layout Shift)我们在页面文档读取阶段就要做好预留位置给幻灯片元素。
- 延长停留时间。把幻灯片当作静态图片来使用。单帧停留10秒以上,保证访客有充分的时间阅读理解并进行操作。把最重要的信息放第一帧。
- 取消自动播放。当访客发生与幻灯片互动的行为后停止自动播放轮换。这点参考腾讯云,这比阿里云和百度云的幻灯片要好。
- 附加额外信息。对每一张幻灯片添加内容标题,这样可以让排在后面的幻灯片获得更多展示的机会。这点可参考SEJ的首页幻灯片。

如果你能做好以上六点,那么首页幻灯片依然“可以有”,至少危害已经大大降低了。再加上积极的A/B测试,至少不会太糟。
总结一下
本篇极诣和读者探讨了网页幻灯片的六大危害和减少危害的六大举措。即便如此,笔者还是“奉劝各位耗子尾汁”,避免使用幻灯片。下面,极诣还整理了一些相关资料供扩展阅读。
- 《Conversion Optimization Examples: Homepage Carousel vs None》- Keith Hagan
- 《Sliders suck and should be banned from your website》- Thijs de Valk
- 《Homepage Sliders: Bad For SEO, Bad For Usability》- Harrison Jones