记一次页面加载优化

2020年的第6篇文章

（本文约1800字，预计阅读时间2分钟）

没有用户会喜欢漫长无聊的等待，尤其是在页面的加载上。

全球最大的CDN服务商Akamai曾经做了一份顶尖电商平台首屏加载速度的研究报告，报告收集了1048名网购用户数据， 结果显示，大概有47% 的用户期望他们的页面在两秒之内加载完成，一旦页面加载时间超过 3s，就会有将近 40% 的用户选择离开或关闭页面。

也就是说，即使这个页面的视觉多么细腻和吸引眼球，或者产品功能、内容有多么符合用户诉求，只要你加载速度出了问题，就很容易带给用户糟糕的体验，甚至直接离开。毕竟每个人的时间都是宝贵的。

那么，关于加载优化有哪些办法？下面这次实际项目的分享希望帮到你。

业务概述

一直以来，CROV致力于帮助中国优质供应商将商品绕过海外进口商、分销商等环节，分销给零售商为主的小B买家，帮助中国供应商获取可观利润。

Drop shipping（简称DS）则是CROV顺应市场需求后，继线上现有的Sourcing和Wholesale模式后新增的一条业务模式。DS模式中，零售商无需花费一大笔资金准备仓库以及大量的商品库存，只需将客户的订单和配送细节发给供应商，再由供应商直接将商品发送给客户即可完成一笔订单，零售商再从中赚取中间差价。

现有问题

DS一期在完成上线之后，后台页（DS Center）的一级页面加载缓慢，尤其从进入详情页的加载时间很多时候会接近2s甚至2s以上，等待感较为强烈，在项目二期中急需对页面加载进行优化。

问题分析及优化方案

造成这种问题的直接原因就是DS所在服务器响应时间缓慢，这个客观问题暂时无法解决。因此只能在页面本身通过其他手段来优化。

1.优化加载方式

DS的加载方式是，每打开一个页面，所有内容一次性加载完毕后才进行显示，这不仅仅会让用户感觉到强烈的等待感，大量的资源占用也会降低页面性能。而这一步我们可以用懒加载（lazyload）来进行统一优化。

什么是懒加载？

顾名思义，就是懒得加载。所有的图片都只在他们开始出现到当前的浏览器视窗中才开始加载，视窗外的图片在直至滚动到它们之前都保持按兵不动。

和之前一次性加载的方式相比，这种加载方式无疑大幅降低了首屏的加载时间，显著减轻了用户的等待感。尤其在需要展示大量图片的电商网页中，懒加载的作用非常明显。

另外，为页面中所有未加载的图片添加占位符，也避免框架出现不完整。

比如Alibaba直接将背景作为占位符，Aliexpress则直接将logo中的星星作为品牌记忆点融入到占位符中，保持框架的同时增强了用户对品牌的认知。

2.加入骨架屏

懒加载是可以解决一次性加载所带来的加载缓慢问题，但是在页面开始出现内容前，依然是有一段硬性的空白期，即使我们已经用进度指示器（比如菊花转）来告诉用户页面并非卡住，但是进度指示器依然会让用户产生明显的等待感，并且这种感觉随时间的拉长而愈发强烈乃至于产生负面情绪。

这时，我们可以通过视觉手段，用骨架屏（Skeleton Screen）代替进度指示器。

什么是骨架屏？

骨架屏这个概念最早来源于google产品总监luke的博客（他同时也是《web表单设计》的作者）。luke认为，相比单调的进度指示器，骨架屏可以更好得提前给用户传递页面信息。

随后苹果将这一优秀的理念加入到IOS HIG中，国外的facebook、youtube、国内的简书、知乎等产品也相继引用这个崭新的加载方式。

骨架屏最大的优势在于，通过在视觉上给予用户一个大致的内容框架，来让用户在感官上感觉加载速度变“快”，大大降低进度指示器加载中用户的等待感，从而提升用户体验。而且这种框架也引导用户对页面内容具备一定的预期。

因此，我将一级页面首屏加载方式全部替换为了骨架屏，另外，二级页面的商品详情页也以骨架屏进行了优化。

这是因为，用户在进入详情页之前，他们所进行是类似在货架间穿梭浏览的这个非特定行为，但是一旦用户发生点击行为，就意味着这个产品的主图和定价一定程度上基本符合用户预期。这时候详情页的加载如果继续使用进度指示器，用户很容易被消磨耐心甚至直接中断行为（在首屏加载资源较多的情况下尤其明显）。这时候就需要用到骨架屏来降低用户热情冷却的风险。

有很多产品也同样在详情页采取了骨架屏，比如lazada和aliexpress，国内常见的就是淘宝、京东的详情页。

总结

通过技术上的懒加载配合视觉上的骨架屏顺利对页面加载完成了优化，当然，其他地方尤其是局部的加载依然需要用进度指示器来进行加载反馈，避免卡顿感。