提高终端用户体验对任何一家互联网公司来说都尤为重要，长时间等待网页加载是一件让人沮丧的事情，用户是否会继续浏览你的网站与网页的加载速度成正比关系，只有真正关心终端用户体验才具备行业的核心竞争力。

网页的加载速度是提高用户体验的首选指标，权威数据调查表明，如果页面响应时间增加1秒，就会降低7%的访问量，可能会导致33%的用户会选择竞争对手的产品；30% 的用户表示，下次不会再考虑使用这款产品；同时7.65%的用户表示，槽糕用户体验甚至会影响他们对品牌的看法。本文意在讨论如何在浏览端提升网站加载速度，从而提高用户体验的途径以及评价标准。

终端用户体验监控「EUM End User Monitoring」致力于寻找和解决应用系统中用户体验最差的环节，差的用户体验可能源于服务器、网络、浏览器、APP 应用等。EUM 提供了全方位的视图，一款好的 EUM 工具至少要囊括以下重要指标：

• 掌握网站的负载和并发量
• 掌握发生缓慢的组件
• 追踪缓慢请求及原因所在
• 收集页面加载、交互过程中的错误
• 掌握发生缓慢的移动端请求及原因所在
• 量化服务器性能对终端用户体验的影响
• 模拟用户体验
• 以不同视角了解用户性能数据（全球区域、浏览器类型、终端设备、电信运营商）

目前浏览器端用户体验监控多采用传统的模拟拨测的方式来检测网站访问速度及其他性能指标，对于真实的用户端感受并未提供清晰可靠的数据，不能对用户端的页面加载和用户交互进行统计，OneAPM Browser Insight「Bi」 对浏览器端用户性能监控提供了更为全面、真实、可靠的监控与分析功能，注重影响页面加载时间的每一个环节，深入用户交互，拉近开发者与真实用户的距离。Browser Insight 作为一款 EUM 工具凭借其强大的功能已经成为浏览器端用户体验监控的核心利器，以下对 Bi 的功能做简要概述。

总览视图

总览视图中包含了所有会影响用户体验的全部信息：PV 统计、页面加载时间、Apdex 指数、慢加载追踪、JS 错误、AJAX 调用等；并以「浏览器类型」、「地理位置」 、「电信运营商」 为视角对用户体验数据进行分类，以不同维度对性能数据进行综合考量，找出需要优化的环节。页面加载时间作为贯穿整个 Bi 的核心功能，为此我们将其划分为以下五个技术指标：

• Request queuing：请求延迟时间，该时间显示的是应用程序和服务器之间的等待时间，数值较大则表示应用程序服务器较为忙碌。
• Web application：应用响应时间，应用程序所消耗的时间。
• Network：网络传输时间，网络延迟以及请求在网络上的往返时间。
• DOM processing：DOM 加载时间，在浏览器中分析和解析 HTML 的时间，以及 DOM 模型构建的时间。
• Page Rendering：页面渲染时间，在浏览器中显示 HTML、在网页上运行 JS 以及加载图片的时间。

受访页面加载时间细分

构成网站的页面元素会很庞大，加载一个页面时需要加载很多第三方的插件、广告、和跨域的资源，这些资源的加载受到很多因素的影响，这些资源出现性能问题是会造成统计网页加载速度缓慢，但这部分资源的加载往往并非网站的核心业务，一个广告的加载失败或者跨域图片加载缓慢并不会影响到用户正常业务使用及交互体验。据此为更加准确的去衡量浏览器端真实的用户体验数， Bi 将影响页面加载时间的五个技术指标细分为以下四个时间段：

1. 白屏时间：请求发起到浏览器收到第一个字节数据的时间

2. 首屏时间：header 标签中核心资源加载完的时间

3. H5启动时间：DOM 文档结构加载完的时间

4. 页面就绪时间：包括页面渲染时间、图片的加载时间、外部引用及第三方资源加载完成的时间

强大的 Session trace 功能：收集影响页面加载时间的每一个因素，按照访问页面来诊断性能瓶颈

• 甘特图：抓取用户缓慢的请求，获取 Browser trace 的相关信息，包括：用户访问时间、用户访问 IP，地点、浏览器类型和版本号、响应时间等。用户访问时的响应时间甘特图，包括：Redirect、Cache、DNS、TCP、Request、Response、DOM、Page loading 时间，同时能深入到 Dom 加载细节、Page loading 细节。

• 详细资源列表：

• 资源列表时序图：

• 按照资源类型、域名分类统计：

AJAX

AJAX 请求是数据交互、用户交互体验的重要指标，Bi 可以采集到 AJAX 的发生时间、执行时间、流量、调用次数、请求的吞吐量、HTTP 状态等。利用 Bi 的 AJAX 功能可以排查在 AJAX 请求中出现的缓慢、报错及失败等问题。

脚本错误收集

Bi 的 JS 错误统计功能，可以快速了解和统计用户端 JS 报错的情况。同时可以查看每种错误出现的次数，以及不同类型的浏览器发生错误的次数，这些错误，会直接影响到网站的真正用户体验。JS 错误统计细分为 URL、发生时间、浏览器类型、错误信息、请求参数、自定义参数、样本堆栈信息等。

多视角查看用户体验数据

• 浏览器类型：覆盖所有种类的浏览器，Bi 会对终端用户的不同设备类型、不同浏览器类型的吞吐量、页面加载时间进行统计展示，通过这些指标，反映出应用在真实用户终端的性能，为应用优化提供有效数据。

• 按照地域分类（全国视图、全球视图）:

地理视角可呈现出不同色彩的 Apdex 指数和其他性能信息，提供了关于终端用户体验的一种区域视角。可以选择特定的地理区域，不同省和城市，钻取关于页面加载性能和历史相关信息的细节。

• 按照运营商分类：

运营商视角提供以不同电信运营商为视角的分类统计功能，展示出不同运营商的终端用户在访问页面时的性能指标，并提供钻取关于页面加载性能和历史相关信息的细节。

权威调查结果表明，大多数用户感知到延迟问题时，很大程度上是因为网页加载问题，而 90% 的加载时间都是发生在前端，所以对前端进行性能优化，用户也能够最快、最直观地感受到。Browser Insight 希望能够帮助用户提供全面、真实的前端性能监控 ，最终提升浏览器端的性能表现。