Sunny Guo
据国家统计局数据显示，2015年，全国网上零售额38773亿元，比上年增长33.3%。阿里占比76.1%，京东占比11.9%。2016年3月4日，美国知名调查公司Forrester发布亚太电商数据报告指出，2015年中国电商市场规模正式超越美国，成为全球第一大电商市场。为了抢占中国市场，追逐利润，跨境电商纷纷展开各种对策，其中对电商网站进行性能优化是其重要一环。
什么是网站性能？
用户输入网站域名，通过DNS解析，找到目标服务器IP，请求数据经互联网达到目标服务器，目标服务器收到请求数据，进行处理（执行程序、访问数据库、文件服务器等），处理完成将响应数据又经互联网返回给用户浏览器，浏览器得到结果进行计算渲染显示给用户，这个看似复杂的过程涉及到网站可用性、正确率、打开速度、首屏时间等一系列指标，把这些数据综合起来就构成了网站性能的完整定义，而在用户看来则非常简单，就是网页打开了。
网站性能与互联网企业的业务、利润紧密关联。据
Google、Amazon、
雅虎等世界著名网站的网站性能数据统计证明：Google网站访问速度每慢400 ms就将导致用户搜索请求下降 0.59%；Amazon表示，增加 100ms的网站延迟将导致其收入下降 1%，雅虎网站如果有400ms 延迟会导致流量下降 5-9%。
鉴于此，某著名跨境电商企业在行业里经过反复对比，最终选择了云智慧的监控宝服务，但客户需求在开始阶段比较笼通，通过和客户多次沟通，结合客户目前的业务发展状况以及网站架构，确定的监控方案如下：
1. 通过监控宝进行网站监控，利用云智慧部署在全球220个左右的监测点，监控其电商网站的可用性，客户自定义告警阈值，网站运行时若触发阈值，要求能够及时告警；
2. 通过监控宝的API监控，对其微信公众号的API进行业务流程监控，客户自定义告警阈值，网站运行时若触发阈值，要求能够及时告警；
3. 通过监控宝网页性能监控，准确采集来自全球不同地区用户的网站打开速度、首屏时间等一系列用户体验数据；
4. 通过监控宝对同行业4家电商网站进行对比监控；
5. 通过网站监控、API监控、网页性能监控、行业内数据对比，找出网站性能问题以及产生的根本原因，并提供解决方案及优化建议。
监控方案确定后即开始网站的正式监控，为保证数据相对客观和准确，采用一周的数据进行分析。
一、
网站可用性：
图一 Web监控结果
图二 Mobile Web监控结果
电商行业平均可用率99.99%，但该客户在中国大陆的平均可用率只有95%（有效监控次数3847），安徽仅为89.13%（有效监控次数82），北京为90.27%（有效监控次数167）；其中Mobile Web平均可用率96%（有效监控次数3805），北京仅为88.59%（有效监控次数163），可用率最差。
可用率之所以低于电商行业平均值，主要是网站访问过程中，出现了不同程度的错误。我们以出现错误最多的常州地区（错误次数27）为例，对错误类型进行了统计：
图三 Web错误类型
图四 Mobile Web错误类型
从图三和图四可以看出，网站错误类型主要包括403 Forbidden、首屏渲染超时 (648) 和网页元素加载出错(649)等。而手机端错误次数103次，与官网不同的是新增错误类型文档下载超时 (647)、TCP连接建立失败(602)和服务器连接中断(604)等。
通过历史快照（部分数据通过云智慧透视宝获得）进行追踪，出现的403 Forbidden（403）错误，是造成客户网站平均可用率低的最主要原因。其主机主要分布在常州电信、佛山电信、天津联通、西安电信、新乡电信和太原联通等多个区域。客户的CDN服务商对响应服务器的两个IP经常会拒绝服务，客户联系CDN服务商后问题解决。
其次，HTTP/1.1 503服务不可用也是值得客户关注的错误类型，错误主机分布区域主要为：南昌电信、天津电信、武汉电信、郑州联通、徐州电信、佛山电信、镇江电信和上海电信等 。分析原因，主要是由于请求是动态的，回到源站，Jetty处理的请求过多，导致本次服务不可用。建议客户将此请求按频次生成静态页面。
最后对客户官网的元素加载错误进行分析，发现有部分资源出现401、404以及首屏渲染超时（648）等错误。其中648错误，主要是因为Downloading time下载时间过长，导致系统整体性能下降。首屏时间计算的是首屏可视区域内元素正常呈现所占用的时间；首屏时间跟元素下载速度有直接关系，当元素下载时间超时，必定导致首屏时间超时，页面优化建议会在后面章节统一提供。
二、
业务流程监控：
传统IT监控是基于技术的，关注IT基础设施的可用性，然而业务系统故障并不仅仅是IT故障造成的，所以单纯的IT监控往往无法满足企业的业务需求。业务流程监控是云智慧针对企业业务视角推出的特色功能，通过应用接口调用模拟用户使用过程，以可量化、可视化、自动化技术手段，测量业务系统服务的响应性能，准确感知终端用户的体验和整体业务的质量情况。针对此跨境电商客户的业务状况，提出多个监控流程，我们以其中应用最频繁的购物流程作为实例：
1. 登录，获取token；
2. 对获取的token重新进行MD5算法加密，生成新的字符串；
3. 购物，将新的字符串作为头参数传入；
4. 退出
创建API监控任务，获取登录后生成的token信息存入已创建的token变量中；然后对该变量值重新进行MD5加密，生成新的字符串；并作为头参数，传递到下一步的接口中。
监控过程遇到一个问题， 就是按照客户说明进行了配置，获取到token并进行了加密，但访问购物API 接口时一直不成功，Postman却能够顺利通过测试。经过检查对比，发现登录成功后的响应头中包含相应的cookie值，于是重新对监控任务进行修改，将获取到的cookie赋给事先定义好的变量，然后作为购物API接口请求头的Set-Cookie值再次测试，顺利通过。
三、
网页性能和用户体验
1. 首屏用时
首屏用时是网站用户体验的一个重要指标。通常一个网站，如果首屏时间在2秒以内是比较优秀的，5秒以内是可以接受的，5秒以上就不可容忍了。用户会选择刷新页面或立刻离开。
图五网站首屏用时
上图中，绿色代表首屏用时小于3.5s;黄色代表首屏用时小于7s;红色代表首屏用时大于7s。该网站的首屏用时，除山西的首屏用时小于3.5s外，其余都大于3.5s，部分地区，如青海、陕西，更是大于7s。网站速度非常慢，用户体验非常差，需要针对性部署CDN提高各地访问速度。
2. 行业对比
图六 客户与同行业网站页面性能对比
横坐标是基础文档下载的字节数，即页面的基础文档元素的大小，单位是KB；纵坐标是首屏用时，单位是s； 以上这两类值，都是数值越大，网站速度越慢，用户体验越差。小球的体积代表页面开始浏览到接收到最后一个数据包之间的时间差，数据越大，页面整体性能越差。黑色代表我们的客户，另外三个颜色，分别代表同行业其它三个客户。
为什么客户的基础文档元素最小，而首屏用时和响应用时反而最大、用户体验最差呢？
3. 原因剖析
通过对这几个网站进一步分析，有如下几个方面的因素：
（1）
代码层面
我们客户首页包含太多的代码行数、太多的JS数以及太多不同域名的请求数、部分JS未压缩、部分无用的JS是其页面性能差、用户体验不好的重要因素。
同时，通过对四家网站代码查看，发现客户的页面中，JS同时存在外连和内嵌，且放置在页面的上部和中间，这是导致首屏加载慢的又一个重要因素。因为浏览器在执行JavaScript代码时，不能同时做其它事情。即<script>每次出现都会让页面等待脚本的解析和执行（不论JavaScript是内嵌的还是外链的），JavaScript代码执行完成后，才继续渲染页面。
另外，在客户的代码元素中内嵌了6个iframe,其中有4个为空；div 嵌套太深，且有很多为空元素；部分代码没有缩进。
针对代码层面存在的问题，我们的优化建议如下：
A. 优化布局div的层次，尽量避免过多的嵌套；
B. JS尽量采用外连，且合理控制JS文件的引入位置，最好放在页面底部，以提升网站的加载速度；
C. 合理控制JS和CSS文件的大小和数量，进行压缩合并，build成一个或一组，从而减少浏览器请求数量；
D. 元素请求合并：一个页面中会有很多子元素，如果单独去请求，则每个请求都是回源的调用，那么每个请求都会占用很多时间（包括TCP建联时间）。元素请求合并就是指把所有的请求合并成一个，统一提供到服务方，然后服务端再将这些请求分发，然后再统一合并再返回。
E. 尽量不在代码中出现没有意义的空标签；
F. 合理使用iframe ,去掉空的iframe。
（2） 网络层面
通过对这几个网站的分析得知，我们客户的源站在国外，且大陆没有镜像站点，是其页面性能和用户体验差的另一重要因素，所以建议我们的客户联系CDN服务商进行针对性的优化，同时推荐采用某云的动态加速优化方案：
优化前，用户的动态请求都在源站，请求链路是：用户——运营商——源站，全世界用户都要去源站拿数据，这样的请求链路会非常长，过程相当耗时。
优化后，尽量把动态数据推到边缘节点，这些边缘节点不需要去源站进行请求，只需直接在边缘节点做请求。另外一个优化方法：请求可以是同步的，也可以是异步的，可以同时并行请求多个页面内的元素，整体的动态回源的过程是对内容的动态加速。动态加速的做法是，如果需要回源的话，把这个回源网络的最优化路径交给CDN来决定，CDN会帮助找到目前一条最优的链路来回源。动态加速其实是一系列优化方案，比如包括内容压缩等。
云智慧是国内领先的业务运维服务提供商，通过建立以用户体验为核心，以业务价值为导向的业务运维大数据分析平台，为广大跨境电商企业提供基于用户行为的端到端全栈性能问题定位、基于全球分布式网络的用户体验主动感知、基于云端压力测试平台的业务容量规划服务。把企业业务系统、支撑系统和管理系统的业务流程数据和反映前端用户体验的IT性能数据利用大数据技术进行采集、整理和关联分析，实时映射到全局业务拓扑图上，借助数据可视化工具呈现出来，从而帮助管理者找到业务规划和企业发展的方向，实现业务的高速增长和IT价值的不断提升。
