提升电子商务网站用户体验快与准-潘锐研究报告.ppt

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日 提升用户体验：快！ 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型分布：说明该网页内容布局结构对新访客的易用性差 提升用户体验：准！