透视宝:透过浏览器问诊真实用户体验
对于通过网站为用户提供服务的企业来说,通过浏览器准确感知终端用户的真实体验至关重要。比如电商网站,如果不能先于用户发现因商品价格无法加载,就会造成用户放弃购买,使业务蒙受损失;视频网站如果无法发现用户浏览器不能正确加载视频的问题,就无法阻止用户投入竞争对手的怀抱,无论是在电脑上还是在手机端,诸如此类的问题其实比比皆是。
云智慧透视宝提供面向浏览器的真实用户体验监控(RUM)与管理解决方案,通过浏览器页面端的用户行为与体验数据分析,帮助企业掌握页面在不同区域、浏览器下的性能表现,提供页面的JS、AJAX请求错误诊断及页面元素瀑布图,帮助前端开发人员深入定位每一个问题细节。
在解读透视宝浏览器监控之前有必要先说明一个概念:真实用户体验监控(RUM),因为浏览器监控最终目的就是去实现RUM:
一、真实用户体验监控(RUM):
1、什么是RUM?
RUM是一种被动的监测技术,记录一个网站或者客户机与服务器或者云应用之间的所有用户交互。
2、RUM的作用是什么?
监控一个网站或者应用的真实用户交互,是运营部门确定用户能否被快速和无错误服务的重要手段,如果没有,说明其业务流程是缺失的。
RUM实现监控所有时间、所有地点的所有用户使用应用程序的性能以及可用性情况,还会发现基础设施和分类用户操作,可以及时查看网络会话和整个服务的健康状况,以及移动端的用户体验。RUM可以追踪跨层的网络用户体验,捕获实时会话,看到用户在哪里点击,测量响应时间,并看到出现问题的页面等。而且,RUM可以轻松捕获和重放用户会话,然后创建反映真实用户行为的测试脚本。
扩展知识:
被动监测:在页面植入脚本或探针,当用户访问网页时,探针自动采集数据并回传数据库进行分析。
主动监测: 搭建分布式监控环境,模拟用户发起页面访问请求,主动采集性能数据并进行分析。
二、透视宝浏览器监控的作用
云智慧的透视宝作为一款应用性能管理产品,为什么要把浏览器监控作为最重要的功能之一呢?
在应用性能管理技术领域的“终端用户体验(EUE)”是监控实时应用程序的关键部分,同时也是我们端到端性能数据的重要组成部分,它所监控的数据对于分析用户正在执行的应用程序事务,和他们正在经历应用程序的响应状况是非常有意义的,所以透视宝设计开发了浏览器监控的功能模块。
透视宝浏览器性能监控是面向Web端真实用户体验的性能监控与管理,通过分析用户行为、用户分布、页面性能、错误堆栈等数据,帮助开发深入定位问题,为其优化解决方案提供分析的数据依据,还能帮助运营深度分析用户行为。
三、透视宝浏览器监控部署
1、首先通过透视宝官网免费注册账号:
2、注册成功后,可登录透视宝应用管理后台,在配置界面下载安装透视宝Smart Agent:
3、Smart Agent在发现应用之后会自动将一小段JS代码注入到被监测的页面,这段JS将引用透视宝线上RUM监控的JS文件,对当前终端用户所访问的WEB页面进行分析处理,获取页面性能、浏览器基本信息、行为分析等数据,然后通过发送http请求的方式将数据回传到透视宝的数据平台接口。几分钟之后,就可以在【透视宝→浏览器】中查看应用列表和数据了。(当然有些客户不希望在其应用中安装Smart Agent,只想单纯的使用透视宝的浏览器监控功能,对于这样的需求,我们添加了手动引入JS的功能)
四、浏览器监控分类及实现
1、页面性能监控:
通过使用HTML5提供的performance接口获取页面中各个阶段的精确时间,去分析计算出企业所关心的网站性能指标,并按照地域、网页、浏览器、运营商绘制成对应的响应时间分解图和响应时间变化趋势图等。
分析计算出指标:终端用户响应时间,首字节时间,服务器连接时间,响应可用时间,前端时间,文档准备时间, 文档下载时间,文档处理时间,页面渲染时间。
图表实例:
按地域分布响应时间趋势 (TOP5)
响应时间分解图:
浏览器对比(TOP5):
扩展知识:
HTML5的performance接口可获取到各个页面的精确时间,如下图所示:
狼蚁网站SEO优化是对各个时间变量的解释说明:
navigationStart:当前浏览器窗口的前一个网页关闭,发生unload事件时的Unix毫秒时间戳。如果没有前一个网页,则等于fetchStart属性。
unloadEventStart:如果前一个网页与当前网页属于同一个域名,则返回前一个网页的unload事件发生时的Unix毫秒时间戳。如果没有前一个网页,或者之前的网页跳转不是在同一个域名内,则返回值为0。
unloadEventEnd:如果前一个网页与当前网页属于同一个域名,则返回前一个网页unload事件的回调函数结束时的Unix毫秒时间戳。如果没有前一个网页,或者之前的网页跳转不是在同一个域名内,则返回值为0。
redirectStart:返回第一个HTTP跳转开始时的Unix毫秒时间戳。如果没有跳转,或者不是同一个域名内部的跳转,则返回值为0。
redirectEnd:返回最后一个HTTP跳转结束时(即跳转回应的最后一个字节接受完成时)的Unix毫秒时间戳。如果没有跳转,或者不是同一个域名内部的跳转,则返回值为0。
fetchStart:返回浏览器准备使用HTTP请求读取文档时的Unix毫秒时间戳。该事件在网页查询本地缓存之前发生。
domainLookupStart:返回域名查询开始时的Unix毫秒时间戳。如果使用持久连接,或者信息是从本地缓存获取的,则返回值等同于fetchStart属性的值。
domainLookupEnd:返回域名查询结束时的Unix毫秒时间戳。如果使用持久连接,或者信息是从本地缓存获取的,则返回值等同于fetchStart属性的值。
connectStart:返回HTTP请求开始向服务器发送时的Unix毫秒时间戳。如果使用持久连接(persistent connection),则返回值等同于fetchStart属性的值。
connectEnd:返回浏览器与服务器之间的连接建立时的Unix毫秒时间戳。如果建立的是持久连接,则返回值等同于fetchStart属性的值。连接建立指的是所有握手和认证过程全部结束。
secureConnectionStart:返回浏览器与服务器开始安全链接的握手时的Unix毫秒时间戳。如果当前网页不要求安全连接,则返回0。
requestStart:返回浏览器向服务器发出HTTP请求时(或开始读取本地缓存时)的Unix毫秒时间戳。
responseStart:返回浏览器从服务器收到(或从本地缓存读取)第一个字节时的Unix毫秒时间戳。
responseEnd:返回浏览器从服务器收到(或从本地缓存读取)最后一个字节时(如果在此之前HTTP连接已经关闭,则返回关闭时)的Unix毫秒时间戳。
domLoading:返回当前网页DOM结构开始解析时(即Document.readyState属性变为“loading”、相应的readystatechange事件触发时)的Unix毫秒时间戳。
domLoading:返回当前网页DOM结构开始解析时(即Document.readyState属性变为“loading”、相应的readystatechange事件触发时)的Unix毫秒时间戳。
domContentLoadedEventStart:返回当前网页DOMContentLoaded事件发生时(即DOM结构解析完毕、所有脚本开始运行时)的Unix毫秒时间戳。
domContentLoadedEventEnd:返回当前网页所有需要执行的脚本执行完成时的Unix毫秒时间戳。
domComplete:返回当前网页DOM结构生成时(即Document.readyState属性变为“complete”,以及相应的readystatechange事件发生时)的Unix毫秒时间戳。
loadEventStart:返回当前网页load事件的回调函数开始时的Unix毫秒时间戳。如果该事件还没有发生,返回0。
loadEventEnd:返回当前网页load事件的回调函数运行结束时的Unix毫秒时间戳。如果该事件还没有发生,返回0