web 类服务用户体验优化综述

2008-5

主讲： galen

提纲

如何看待 web 服务的用户体验

检测用户体验质量的工具和方法

用户体验的影响因素分析

用户体验的优化手段

如何看待 web 服务的用户体验

2007-9

这里讨论的用户体验 - 及时响应

用户的划分：

不同地区，不同运营商，不同国家

教育网教不同高校

用户及时获得对其查询和提交信息的反馈

功能性体验的基础

原始的用户体验评价

缺点：• 无法反映全体用户体验质

量• 投诉滞后 , 无法及时响应

测试人员

网站

发布时：测试人员评价用户体验的好坏

运维时：通过用户投诉判断服务质量好坏 客服人员

网站

用户1 用户2 用户n

大量投诉

页面访问质量评价指标

页面关键点完成时间

用户访问页面首次点击等待时间

浏览器显示第一屏主页面的消耗时间

下载页面的完整性及正确性

下载页面的安全性

流媒体业务访问质量评价指标

开始播放的等待时间

播放过程中的缓冲次数和时间

中国互联网用户按运营商划分

56%

25%

9%

5%2% 2%1%

电信

网通

教育

铁通

联通

广电网

移动

各大运营商用户比例

各运营商的用户比例和 QQ 每天登录用户比例基本吻合

中国互联网用户按地区划分

1.70%187江 西

1.70%189重 庆

1.80%201吉 林

2.10%229天 津

2.20%241云 南

2.40%269山 西

2.50%276安 徽

2.80%314陕 西

2.80%316黑龙江

3.00%330广 西

3.10%348湖 南

3.30%372辽 宁

3.60%396河 南

3.60%397福 建

3.90%428北 京

4.20%463湖 北

4.20%463上 海

4.40%486河 北

5.50%609四 川

6.40%707浙 江

7.10%790江 苏

8.90%988山 东

13.40%1486广 东

占全国网民比例网民数（万人）地区

3.89%12658059河北

4.30%14000904湖北

4.39%14303788福建

4.51%14677836四川

4.73%15410389河南

5.90%19209091山东

6.15%20025632江苏

6.97%22724105浙江

19.88%64769143广东

100%325799287总体

访问次数比例qzone访问次数省份

教育网用户按高校划分 -QZone 广东为例

0.67 13688.82 94汕头大学

0.80 14469.96 112深圳大学

0.91 10725.01 128星海音乐学院

1.35 11275.13 190广东医学院

2.17 11002.19 304惠州大学

2.19 6995.33 307广东农工商职业技术学院

2.27 5818.74 319肇庆学院

2.31 12558.40 325广州中医药大学

2.68 7758.87 377东莞理工学院

2.80 6984.71 393广东科学技术职业学院

2.96 9963.27 415广东教育学院

2.98 8382.20 418广东工业大学

3.16 9744.14 444湛江师范学院

3.87 9336.31 543暨南大学

6.25 10303.54 877广东外语外贸大学

6.31 9842.69 886韩山师范学院

7.91 9244.21 1110华南农业大学

8.68 8939.32 1219中山大学

10.74 14237.01 1508华南师范大学

11.06 8758.76 1553华南理工大学

14.48 9075.80 2033广州大学

所占比例 (%)平均延时访问次数学校

互联网用户无差别体验

现状：不同地区不同运营商的用户体验有明显差异

优化目标：

• 抹平地区及运营商差异

• 减少因体验差造成的用户流失

• 提高用户满意度和活跃度

在提高用户体验的同时不断降低产品运营的TCO 成本，提高服务性价比

影响用户体验的三个环节

第一公里：服务器出口带宽服务器自身性能

中间一公里：互联网中的传输环节运营商的互连互通骨干网络设备和链路

用户的最后一公里：ADSL ，有线电视宽带，小区

LAN接入状况

三个环节的关注点

后台服务器及 IDC 机房公网出口（第一公里）

• 服务器对用户请求的响应速度 , 失败率

• IDC 机房所处节点的地理位置

• IDC 在运营商骨干网中的地位

• IDC 机房出口带宽的冗余状况

运营商骨干网（中间一公里）• 到全国各地骨干网带宽的冗余状况• 各运营商骨干网之间的路由和传输延时

用户桌面（最后一公里）• 用户打开页面的实际等待时间及成功率• 用户端网络配置 ,包括接入运营商 ,DNS 配置等• 用户主机性能

基础知识 -1

访问延时＝传播延时＋串行化延时＋设备响应延时

传播延时：信息通过传输介质产生的延时

串行化延时：信息通过中间设备产生的延时，通常由于设备上的排队，处理和交换引起

抖动＝网络延时的变化，原因：

• 可变的队列长度

• 包经过的路径不同（如负载均衡等）

基础知识 -2

丢包率＝数据包在传输中丢失的比率，引起的原因：

• 传输链路或硬件设备引起 CRC错误• 链路拥挤或队列满

• 路由改变（暂时丢包）或黑洞路由

• 接口故障或路由器故障

即使 1％的丢包也会对网络应用的性能产生重要影响

基础知识 -3

带宽利用率

决定何时进行链路扩容

我司 IDC出口带宽一般在利用率达到 80％以上时扩容

网络可用性＝网络可用时间 /总时间

99.9% ：一个月的中断时间不超过 45 分钟

99.99% ：一个月的中断时间不超过 5 分钟

大部分运营商的网络可用性达到 99.9％，部分可达到99.99%

通常网络设备可用性在 99.99%以上，链路可用性在99.9%以上

基础知识 -4—http 访问环节QQ.COM 首页 框架页面为例 http://www.qq.com/ 50k文件大小

Blocked: 预处理及等待网络连接可用

DNS解析 : 域名解析时间

连接 : 与 web server 建立 TCP连接时间

发送 : 发送 HTTP请求所需时间

等待 : 等待 server 响应的空闲时间

接收 :从 server读取应答消息时间

First Byte: 从初始化网络请求到收到第一个字节消耗的时间

网络 : HTTP 访问的网络总耗时

了解用户体验的实际状况

优化的前提 :了解全体用户的真实体验

目前已经建立了各类监测系统，掌握了多种分析方法

有条件及时准确的评估用户体验质量

监测用户体验质量的工具和方法

2007-9

不同环节的测试监控工具

后台服务器 － 网管系统

监控业务流量，服务器负载，业务关键指标量，比如在线数， PV 量

IDC, 骨干网 － IDC测速平台，自动化测试，第三方监测的 backbone 测试

用户桌面 － 业务测速平台，第三方监测 peer测试

自测试工具－ httpwatch, yahoo性能评测工具YSlow

网管系统

网管系统分为公司一级网管系统和各 BU二级网关系统网管系统通过每台服务器安装 agent ，收集 server端运营数据（例如流量曲线，用户在线数等），并进行监控告警

IDC 测速平台原理

IDC 测速平台

IDC 测速平台的功能：• 各省市运营商所属用户访问公司主要 IDC加权平均延时

• 访问成功率及最近 30 天变化趋势

IDC 访问速度测试

http://idcspeed.oa.com/cgi-bin/indexIDC丢包率测试

http://idcspeed.oa.com/cgi-bin/qqpack/index

为各业务的 IDC 分布提供数据支持

当业务出现访问质量问题时，作为 IDC 及骨干网排查工具

IDC 测速平台数据展示－访问速度

访问速度慢的省份

跨运营商的访问效果

IDC 测速平台数据展示－丢包率

成功率异常

某地区用户访问异常

互联网自动化监控系统

在北京网通，北京教育网及深圳电信网通部署测试服务器

测试服务器根据测试配置访问业务 CGI或静态内容

计算平均延时，成功率及达标率

自动化监控 itil展示：

http://itil.isd.com/itil/index.php

较实时反馈各业务关键服务的质量

反馈业务日常延时及成功率波动情况

根据合格率考核各业务质量达标情况

自动化监控系统－不达标率，三网速度

出现异常的日期

不达标率最高的 CGI

业务测速平台原理

基本原理和 IDC 测速平台一样，差别在于：• 每个业务定制测试需求• 设置页面下载的多个关键点

关键点1

关键点2

关键点3

关键点...

关键点N

统计服务器

页面JS

上

报

测速平台 - Qzone 为例

QQ空间设置的关键点

全国速度地图 -qzone 全国网通

北方 10省

南方网通

北京最差

第三方监控 peer 测试原理

第三方监控的测试平台

由普通用户安装测试客户端

定制测试需求由客户端执行测试

测试结果上报数据中心

例如 Gomez 测试平台

http://www.gomez.com/login.html

业务用户端监控

包括竞争对手在内的对比测试

流媒体监控

更加详尽的数据分析结果

实例： QQ相册竞争对手比较

20k 西安测试80k 西安测试20k存储平台80k存储平台20k 网易相册80k 网易相册20k51相册80k51相册20kbaidu相册

80kbaidu相册

从测试结果看：网易相册测试结果最好， 51相册最差，西安测试因为没有访问压力效果也很好

存储平台深圳和西安测试比较（电信）

上图：西安测试下图：统一存储

从测试结果看：由于西安测试无负载， 1st byte 耗时明显低于统一存储

由于沙河电信整体网络质量好于西安电信， content download 时间则统一存储占优

第三方流媒体服务监控

优酷 ,土豆和 qqvideo 的流媒体测试比较 ( 北京网通 )

• 重新缓冲次数

2. 用户等待第一帧的时间

3. 重新缓冲比率 = 重新缓冲的时间 /( 播放的时间 + 缓冲的时间 )

自测试工具 -HttpWatch(QQMusic 为例 )

Blocked 耗时迅速增大

网络延时和总延时比较

yahoo 性能评测工具 YSlow

仅限于在 FireFox 下使用

QZone 首页的评测结果 :

等级 :F ，　分数 :30

看起来很不理想

YSlow详细结果举例

12个域名 ,超过 yahoo 建议的 4个以下过多的 http请求重复的脚本

Qzone 首页举例 :

用户体验的影响因素分析

2007-9

影响用户体验的因素－ server端后台服务器的处理性能及访问压力

直接影响用户访问的响应时间， Qzone 为例：

9.3日开学当天，由于用户在线数下降，自动化测试的 CGI速度延时有明显变化

IDC出口网络质量 1

IDC 外网出口链路的忙闲情况，香港柴湾 IDC带宽问题为例：

通过测试发现柴湾外网质量明显差于沙田 IDC

香港 HGC经过检查发现：柴湾－葵冲带宽满导致流量阻塞，影响了网络质量

IDC出口网络质量 2

调整时间点

用户与 IDC 的物理距离

骨干网光纤传输

每 1000公里延时增加 6ms

西安到深圳光纤专线 :来回 4300公里

距离延时 25.8ms实际 ping值 30ms

北京到深圳来回 5600公里

距离延时 33.6ms

1210111322:00-24:00

1210211420:00-22:00

2959718:00-20:00

149010416:00-18:00

178910614:00-16:00

149711112:00-14:00

89310110:00-12:00

38790 8:00-10:00

117283 6:00- 8:00

275986 4:00- 6:00

4469113 2:00- 4:00

3883121 0:00- 2:00

时差 (ms)广东耗时北京耗时时间段

影响用户体验的因素－传输过程

运营商骨干网质量• 不同区域的运营商骨干网质量有差异• 总体看电信质量最高，教育网最差

全国电信用户访问西安电信IDC

050

100150200250300350400450

黑龙江吉林辽宁北京天津河北山东山西陕西

内蒙古宁夏甘肃青海新疆西藏四川重庆湖北河南安徽江苏上海浙江湖南江西福建贵州云南广东广西海南

增长率

忙时(ms)

闲时（ms）北方电信 南方电信

运营商网络拓扑结构 - 电信

网络结构

国家骨干网

核心层 （ 8个节点组成）

汇接层 （每省 2个节点）

接入层 （省网节点）

城域网

网络拓扑图 (转下页 )

中国电信

运营商网络拓扑结构 - 教育网

全名 教育科研网(CERNET)拓扑图

教育网

用户及 IDC 所属运营商是否匹配

若用户跨运营商访问访问质量一般会大幅下降

以网通和电信为例，北京，上海及广州分别为两家的互联互通点，互联带宽： 2×10G×3

0.0

100.0

200.0

300.0

400.0

500.0

600.0

700.0

800.0

900.0

黑龙江吉林辽宁北京天津河北山东山西陕西

内蒙古宁夏甘肃青海新疆西藏四川重庆湖北河南安徽江苏上海浙江湖南江西福建贵州云南广东广西海南

增长率

电信

网通

电信及网通用户访问深圳电信比较

上海跨网访问质量

教育网问题分析 -QZone 为例

广东较周边省份差

8939.31931219中山大学

14237.01371508华南师范大学

8758.76461553华南理工大学

9075.80472033广州大学

平均延时访问次数学校PING 222.201.68.10 (222.201.68.10) 56(84) bytes of data.64 bytes from 222.201.68.10: icmp_seq=1 ttl=119 time=227 ms64 bytes from 222.201.68.10: icmp_seq=2 ttl=119 time=213 ms64 bytes from 222.201.68.10: icmp_seq=3 ttl=119 time=211 ms64 bytes from 222.201.68.10: icmp_seq=4 ttl=119 time=221 ms64 bytes from 222.201.68.10: icmp_seq=5 ttl=119 time=238 ms64 bytes from 222.201.68.10: icmp_seq=6 ttl=119 time=244 ms

traceroute to 222.201.68.10 (222.201.68.10), 30 hops max, 40 byte packets 1 222.202.96.130 (222.202.96.130) 0.688 ms 0.357 ms 0.453 ms 2 210.39.19.5 (210.39.19.5) 0.240 ms 0.219 ms 0.187 ms 3 202.112.53.129 (202.112.53.129) 4.227 ms 4.117 ms 4.134 ms 4 * * * 5 202.112.19.102 (202.112.19.102) 3.298 ms 3.669 ms 3.664 ms 6 222.200.253.5 (222.200.253.5) 3.865 ms 3.856 ms 3.865 ms 7 222.200.252.14 (222.200.252.14) 10.405 ms 10.408 ms 10.535 ms 8 222.200.129.22 (222.200.129.22) 236.715 ms 236.832 ms

影响用户体验的因素－用户端

Web内容用户端 cache静态内容浏览器 cache 后在过期前本地读取

0 0.5 1 1.5 2 2.5 3

imagestylesheet

scriptscript

dns lookupimageimageimageimageimage

dns lookupscript

imageimageimageimageimageimageimageimagescript

imageimageimageimageimageimageimageimagescript

dns lookupimageimage

htmldns lookup1

用户访问 www.yahoo.com

没有做 cache的页面

内容被 cache 后

0 0.5 1 1.5 2 2.5 3

image

imagehtml

Expires header

1user requests

www.yahoo.com

2user requests

other web pages

3user re-requests www.yahoo.com

with a full cache

用户端其他影响因素

页面 http连接数• IE 对于同一主机名允许 2个并发连接• 过多连接请求排队 ,产生大量等待延时

页面大小Qzone空间与 51博客比较：• qzone单个 item速度快• 页面总访问时间长，因下载数据量大

页面静态内容比例• 页面数据量静态比例高 ,有利于提高访问速度

用户体验的优化手段

2007-9

用户体验优化－提升后台性能及系统容量

以相册老系统与存储平台为例：

老系统• 存储容量与读写性能不平衡

• 大量可用存储量无法利用• 专用盘柜价格昂贵存储平台• 采用存储服务器价格低廉• 总体读写性能高• 实现去重功能• 可按 set 平滑扩容

结论 :可以支持更高的用户访问量

160.00 单位有效存储月 TCO （元）

0.137 单位用户月 TCO （不含带宽成本）（元）

15.000 预计支撑带宽（ G ）

425.000 预计支撑用户数（ Qzone在线用户）

95.000 实际存储数据（ T ），去重

270.000 有效存储容量（ T ）

43.200 存储部分的月 TCO （万元）

14.860 非存储部分的月 TCO （万元）

　新相册系统

　　

146.48 单位有效存储月 TCO （元）

0.290 单位用户月 TCO （不含带宽成本）（元）

8.200 实际支撑带宽（ G ）

290.000 实际支撑用户数（ Qzone在线用户）

190.000 实际存储数据（ T ），未去重

472.000 有效存储容量（ T ）

69.140 存储部分的月 TCO （万元）

14.860 非存储部分的月 TCO （万元）

　原相册系统

IDC 运营优化 1

IDC需要保障出口带宽冗余度及稳定性

以西安 IDC 网络优化为例• 西安 IDC定位为公司核心 IDC• 部署包括 QQGame ， QQ宠物，相册等重点

业务

初期 : 西安电信网络质量不理想

• 管工协调电信进行持续的骨干网扩容• 电信针对华南地区开通直通车

优化前后比较看效果明显

IDC 运营优化 2

用户体验优化－业务系统分布策略

分布等级定义：

0级－深圳本地单个 IDC 无按运营商分布（ 1个 IDC ）

1级－深圳本地 IDC按运营商分布或代理（ 1-3个 IDC ）

2级－外地三通 IDC按运营商分布（ 1-3个 IDC ）

3级－全国主要 IDC节点按运营商分布（ 3－ 6个 IDC ）

4级－全国 CDN 分布（ 15个 IDC以上）

44级－级－ CDNCDN分布分布

33级－全国主要级－全国主要 IDCIDC分布分布

22级－外地三通级－外地三通 IDCIDC分布分布

11级－深圳本地级－深圳本地 IDCIDC分布分布

业务的 IDC 分布

以 QQ.com 为例：qq.Com 主要分布于：

深圳电信，上海电信

西安电信，成都电信

天津网通，北京网通

北京教育网

集中分布于电信，网通及教育网的核心节点，从全国用户访问情况看效果很好

5.47 QQ.COM 14

4.65 中搜 13

4.65 Live.com 12

4.6 265 上网导航 11

4.47 谷歌中国 10

4.24中国移动通信 9

4.15凤凰网 8

4.03汽车之家 7

3.31和讯 6

2.48搜狗 5

1.89中国工商银行 4

1.08SOSO 搜搜 3

1.05网易 126免费邮 2

0.7百度 1

响应时间 (秒 )网站名次

第三方监测中国热门网站用户体验排行榜

Imgcache在教育网分布

部署于西安教育网

增加华南深圳教育网节点后效果比较

业务的 CDN 分布－ CDN概念

CDN – Content Delivery Networks

传统的 Internet 网络的基本结构和数据

传输

CDN 对网络的优化作用原理图

CDN 网络优势

解决服务器端的“第一公里”问题

缓解甚至消除不同运营商之间因互联瓶颈造成的影响

减轻了各省的出口带宽压力

缓解了骨干网的压力

优化了网上热点内容的分布

GSLB

GSLB: 全球服务器负载均衡

能够跨越多个 IDC 提供负载均衡和高可用性

用户访问被定向到可提供最短响应时间IDC

当 IDC 发生故障， GSLB 能够透明的将用户定向到最优备用节点，提供无中断服务

GSLB 工作原理

Root DNS Server

LocalDns Server

上海电信用户

QQ DNS Server

1

2 34

56

7

8

9

SLB

Server&Cache

网通IDC1

SLB

Server&Cache

深圳电信IDC2

SLB

Server&Cache

上海电信IDC3

GSLB控制器

IP 地址库

SLB

Server&Cache SLB

Server&CacheIDC1

IDC2 SLB

Server&Cache

IDC3

GSLB

控制器

监控系统

GSLB采集系统

GSLB监控及配置管理系统

GSLB配置管理系统

Internet

DNS

1

2

3

4

5

67

业务三通 IDC部署及本地代理

业务后台部署于单个 IDC其他 ISP机房通过反向代理接入

解决 : 用户跨运营商访问问题 ,以 qzone 为例：

SLB

QZone

Server

深圳电信

SLB

反向代理

深圳网通

SLB

反向代理

深圳教育网

飞亚达

教育网用户

10G光纤

10G光纤

10G光纤

1

2 3

4

用户端浏览器访问优化

80-90% 用户响应时间消耗在前端

可以产生明显的优化效果

实施简单

已经被各应用证明是有效的

页面内容静态化

静态化提高服务器处理能力

静态化内容适合 CDN加速QZone目前超过 85% 的静态化率

减少用户 http请求数

• 合并脚本及样式表 ，降低用户 http请求数量

• 用户 http请求使用 keep-alive

• 使用图标的合并 image

例： Qzone 的合并 image

增加 http可并发请求

若不能降低请求数量 , 提高并发请求数也可以加速页面下载以 Sina 首页为例 :

静态图片采用 4个子域名 (i0.sinaimg.cn-i3.sinaimg.cn)进行下载

说明 : • 提高并发性 ,降低了 http请求用户端等待时间• 一般设定不超过 4个子域名 , 过多的域名请求会增加域名解析

耗时及客户端处理负担

静态文本内容 gzip压缩Apache配置文本内容进行 gzip预压缩，可以降低外网流量及实际传输的数据

量：Apache 2.x: mod_deflate

AddOutputFilterByType DEFLATE text/html text/css application/x-javascript

HTTP requestAccept-Encoding: gzip, deflate

HTTP responseContent-Encoding: gzipVary: Accept-Encoding

以 imgcache 为例：

• 对于静态文本（包括脚本，样式表， XML等）全部做 gzip预压缩

• 压缩后降低公网带宽 800M

设置 cache 过期时间

yahoo.com.cn设置的静态文件应答头

Expires设置超过 8年，可以看作永久 cache :HTTP/1.1 200 OKLast-Modified: Wed, 21 May 2008 06:11:32 GMTExpires: Fri, 15 Apr 2016 20:00:00 GMTContent-Type: image/gifContent-Length: 7424Date: Wed, 21 May 2008 06:13:14 GMTAge: 339592

长期 cache适用于较少更新的静态文件 , 例如相册业务 :Cache-Control: max-age=8640000

Cache 时间超过 3个月

取消 etag 功能

一般业务是多台接入服务器做负载均衡，则server 每次返回的 etag可能都不同

ETag 格式：Apache: inode-size-timestampIIS: Filetimestamp:ChangeNumber

当主机数 >1 server 将返回很少的 304(n-1)/n

清除 etag ：Apache: FileETag noneIIS: http://support.microsoft.com/kb/922703/

避免 http请求携带 cookie 信息

Cookie pvid=360028384; flv=9.0; 1531785_CODE=000596_51|399001_51|000001_1|600028_1|600048_1|600068_1|600816_1|601398_1|601628_1|601857_1|; 1531785_HKCODE=; 1531785_JJCODE=; stk_uin=1531785; pt2gguin=o0001531785; airkey=788e8a9fc4015d1e8b8ba0c46ad2d9775afb77236084753d64969b9d48d8916c; icache=EAGECLA; aduid=ST6F27XY; adid=1531785; adSP=jzlO56pAUEvKZE9W34jAq/mH2AOLhhoQ4xLa1dyWEEQ=_7811_326830_1214527781_; RECENT_CODE=000002_51%7C601628_1%7C600011_1%7C600048_1%7C000596_51%7C600816_1%7C601857_1%7C600050_1%7C600030_1%7C580989_1%7C; ispai2_1531785=2; uin_cookie=1531785; euin_cookie=AQAYGxjgIbJvQFgGjIbzPOZVqsRv9vhKHEWGGAAAAADEby+pcvO+YAsKo2Mdqn2DSj75qA==; pgv=ssid=s182297792

qq.com携带的 cookie 信息超过 660字节对于静态文件一般 cookie是无用的使用非 qq.com 的独立域名 , 例如 :

www.tcimage.cn

减少 DNS lookup 时延

降低页面中域名数量

• 可以减少 DNS lookup频次

• Lookup 时延对于不同 ISP 及地区访问时间不同

• DNS server需要跨运营商及地区分布

• 页面中图片、 css、 js、 flash文件等，不要分散在不同域名中

用户体验优化 -以实际效果说话www.sina.com.cn music.qq.com

httpwatch 测试结果对比

http请求字节数和连接数相近 ,有可比性

从 http返回的字节数看差异很大

从总延时看差异明显

前 10个延时最大的 item

页面轻量化最有效

总结

用户体验质量我们和竞争对手还存在差距

用户体验质量随着用户访问量，骨干网带宽冗余量， IDC 的运营质量变化而变化

用户体验质量与运营成本的平衡关系 --并非越快越好

用户体验的监控和优化是一项长期工作

腾讯要成为受人尊敬的互联网企业，用户体验质量是一块基石

Q&A

谢谢大家

答疑时间