提升电子商务网站用户体验 快与准 潘锐.pptVIP

Jun 2011 (Brief Version) Jun 2011 (Brief Version) By @潘锐-Tommy 提高电商网站用户体验：“快”与“准” Jun 2011 (Brief Version) 提升用户体验：快！ 用户访问一个网站时，如果等待网页（Landing Page）打开的时间超过8秒，会有超过30%的 用户放弃等待。 8秒定律： 网站首页 页面大小 页面尺寸 页面完全打开时间 首屏完全打开时间 凡客诚品 0.36MB 4.5屏 （1114x3515） 2.88秒 0.64秒 淘宝网 0.92MB 4.2屏 （1030x3247） 7.36秒 1.75秒 京东商城 1.06MB 4屏 （1230x3107） 8.48秒 2.12秒 梦芭莎 3.42MB 34屏 （1010x26248） 27.36秒 0.80秒 说明：页面打开时间以1Mbps下载速率来估算 页面取样时间：2011年8月23日 提升用户体验：快！ 要尽量将网页（Landing Page）的体积控制在1.5MB以内，页面完全呈现耗时控制在5秒以内。 结论： 提升用户体验：快！ But how？ 提升用户体验：快！ 压缩大图片文件 尽量采用矢量图的素材与动画（如广告banner flash动画） 1.立竿见影的提速：图片减肥 提升用户体验：快！ 2.优化线路 方案 实施成本 效果 智能DNS双线 中 可解决电信、网通线路用户的网络访问速度问题 BGP（多线） 较高 单IP即可实现多线路快速访问 CDN 中 提高访问速度，减少源服务器带宽占用，但仅对静态页面有效。 BGP+CDN 高 最佳方案，可将图片等静态文件用CDN发布 提升用户体验：快！ 3.优化网站(web server)运行环境 Linux+Nginx(+Mysql+PHP) Linux: 文件系统相比NTFS的读写效率高很多；相比windows的安全性高；开源软件资源丰富 Nginx：最高性能的web server（处理并发连接数最高），优于apache、IIS Mysql：性价比最高，运用普及，高性能开源数据库 PHP：跨平台、高性能、开发效率高 提升用户体验：快！ 4.提升服务器效率与性能 采用内存缓存加速响应速度 推荐：Memcache 采用动态负载均衡系统增加系统的伸缩性与鲁棒性 推荐：LVS 提升用户体验：快！ 提升用户体验：快！ LVS拓扑图 大型站点案例： 腾讯、百度、新浪、网易、携程、优酷、、等。 5.及时扩容 平均带宽占用达到理论上限的70%，需要立即考虑带宽扩容。 存储设备需监控空间使用速度，80%预警。 提升用户体验：快！ 用户访问一个网站时，停留在网页上视觉焦点的位置符合类似F型密度分布，即用户更多注意的是更靠页面上部与左侧的内容。 F型分布定律： 提升用户体验：准！ 提升用户体验：准！ 左图为某电商网站改版前的首页焦点热图，发现的问题： 1.左上角黄金位置：用户登陆信息框 2.分类导航区置于1.5屏以下 3.用户的实际（鼠标）行为焦点不符合F型分布：说明该网页内容布局结构对新访客的易用性差 提升用户体验：准！ 电商网站要将对用户导购作用更大的内容，放置在页面（Landing Page）更加靠顶部与左侧的位置。 结论： 提升用户体验：准！ 提升用户体验：准！ 1.合理首页的布局示意图： 推荐参考首页布局 提升用户体验：准！ 2.SEM、推广专题landing page的布局：（略） 推荐参考nala页面 用图说话：能用图来表达就不要用文字。 图片包括：对比图、细节图、原理图、实验图、测试图、注解图等。 3.购物中的关联推荐 提升用户体验：准！ A.基于产品分析 向上营销是基于同类产品线的升级或优化产品的推荐。 交叉营销是基于相似但不同类的产品的推荐。 提升用户体验：准！ B.基于用户行为分析（data mining） 支持度 = (G/U) x100% 置信度 = (G/A) x100% 例：当支持度20%,置信度60% , 认为A与B商品有关联，可向购买了A 商品且未购买B商品的用户推荐B商品。 3.购物中的关联推荐 Thanks! @潘锐-Tommy