看一个做健身器材工厂的网站后台,移动端跳出率高达七成。打开他们的首页,谜底摆在眼前:五张轮播大图,每张两兆多,手机流量环境下载完得小十秒,客人早跑了。老板还觉得轮播显得内容丰富。丰富是给老板看的,客户只关心你能不能解决他的问题。我给他看了竞品的数据——人家手机首屏就一张图一句话,跳出率不到四成。轮播这个东西,该重新掂量了。
轮播图在手机上的三个先天缺陷
一是重,五张大图的体积顶得上半个网站,首屏速度全砸在这里;二是没人看,点击数据一再证明,轮播第二张以后的图,浏览率断崖式下跌,客人默认那是广告位;三是传达模糊,五张图说五个卖点,等于一个都没说清。响应式网站设计不是把电脑版轮播原样搬进手机,而是按手机的场景重新算这笔账:流量贵、耐心短、屏幕小,轮播的三大优势全成了劣势。想明白这一点,下手砍图就不心疼了。
减法的具体做法
- 数量砍到一张:首屏用一张主视觉加一句主张,把最重要的卖点说透,其余内容往下排,让客户自己滚着看;
- 非要留轮播就做轻:三张以内,每张压到两百KB以下,自动切换间隔拉长,切换动画从简;
- 文字别烧在图片里:宣传语用真实文字排上去,图片只管画面,文字能被搜索引擎读到,加载也快;
- 图换成视频入口:静态图配产品短视频按钮,点开才加载,首屏体积不变,信息量翻倍。
那个健身器材厂按这套减下来,首页体积从八兆多降到一兆出头,移动端跳出率一个月降到四成七,老板自己都意外:原来不是流量不行,是首屏把人挡在了门外。
改版前先看一眼数据
动手之前,把统计后台的两个数调出来:移动端跳出率和平均加载时长。如果跳出率过半、加载超过四秒,首屏轮播基本可以断定是主犯之一。改完继续盯这两个数,两周见效。记住一个顺序:先减后加,先让网站轻下来,再考虑往上添东西,顺序反了只会越改越重。减法的刀,往往比加法的糖更有用。
建议本周就把首屏轮播砍成一张试试,这是全站改动里性价比最高的一刀。如果新站还在规划阶段,直接跟建站方约定首屏素材的体积上限。比格网络做响应式网站设计时给首页定了条内规:首屏素材加起来不超过一兆,这条线帮很多客户把速度和转化一起救了回来。轮播不是不能用,是别让它站C位,首屏的黄金位置留给一句话说清卖点。