icon前端用户访问资源的整个过程icon

用户访问前端页面,任何一个过程都可能会影响用户体验,可能会导致访问量下降、用户流失等问题

icon用户体验的重要性icon

前端作为用户访问业务的直接途径,对用户体验的重要性不言而喻,而用户体验直接影响着企业品牌形象和经济收入

icon为什么要有前端性能监控?icon
页面异常监测

前端用户环境复杂多变:网络、浏览器、平台、ISP等多个维度,导致定位问题难。业务报错时无处可查,线上问题复现困难。无法定位API或静态资源报错导致页面不可用。

页面性能体验

无法掌握用户访问前端页面整个过程的性能,无法从不同维度对前端页面性能进行分析统计,针对性进行优化。无法获取用户访问业务API或静态资源的性能数据。

用户体验分析

无法很好的量化用户体验数据,用户体验优化缺少数据支撑。需要从不同维度获取更多用户行为数据,支撑运营策略以及产品优化方向。

icon前端性能监控 基于真实用户的前端性能监测平台icon

前端性能监控是一站式前端监控解决方案,专注于 Web,小程序等前端场景监控。主要关注用户页面性能(页面测速,接口测速,CDN 测速等)和质量(JS 错误,Ajax 错误等)。用户只需要安装 SDK 到自己的项目中,通过简单配置化,即可实现对用户页面质量的全方位守护,真正做到了低成本使用和无侵入的监控。

icon功能特性icon
日志上报

开发者可以上报任意数据到前端监控平台,其中包括一般性日志、自定义事件、自定义测速等的。用来满足前端开发者日志收集的诉求。

错误收集

浏览器执行 JS 代码报错,接口信息报错、资源加载异常、Promise 异常等的,这些错误都有 SDK 主动收集,开发者不需要做任何操作,只要接入 SDK 就可以实现所有错误收集的功能。

性能监控

页面性能数据包括,首屏耗时、建立 TCP 连接耗时、TTFB 耗时、SSL 耗时等。除此之外,最新的 Web Vitals 标准也已经支持,LCP、FID、CLS 等数据也可以采集和上报。

资源测速

其中包括图片加载耗时,CDN 资源耗时等。开发者可以查看某个页面下具体使用了哪些资源,每个资源的耗时情况等信息。同时支持对地域信息统计,ISP 信息统计等。

接口测速

接口测速可以统计页面上所有调用接口的信息,其中包括接口耗时、状态码统计等。同时支持对地域信息统计,ISP 信息统计等。

智能告警

错误信息告警,页面耗时告警,性能数据告警等,支持智能监控告警。

icon典型应用场景icon
icon页面性能分析icon

通过页面加载瀑布图,用户访问前端的每个过程性能清晰可见。首屏耗时是衡量前端用户体验的重要指标,首屏耗时越小,用户体验越好。

icon页面性能分析icon
Largest Contentful Paint

从用户请求网址到在视口中渲染最大可见内容元素所需的时间。最大的元素通常是图片或视频,也可能是大型块级文本元素。

First Input Delay

从用户首次与您的网页互动(点击链接、点按按钮,等等)到浏览器响应此次互动之间的用时。这种衡量方案的对象是被用户首次点击的任何互动式元素。

Cumulative Layout Shift

CLS 会衡量在网页的整个生命周期内发生的所有意外布局偏移的得分总和。得分是零到任意正数,其中 0 表示无偏移,且数字越大,网页的布局偏移越大。

icon页面性能分析icon

通过页面性能TOP视图对页面性能排序,针对性能不好的页面进行优化。支持网络、平台、ISP、地区、机型、浏览器、版本多个维度对页面性能数据进行分析。

icon页面异常分析icon
 
根据页面异常的严重程度,前端的异常表现会出错、呆滞、损坏、假死和奔溃的现象
出错(页面预期内容不符)、呆滞(操作后没响应)、损坏(界面无法操作)、假死(页面出现卡顿)以及奔溃(界面奔溃退出)这些都会严重影响到用户体验
对前端异常信息进行采集分析,定位异常原因进行优化显得非常关键
icon页面异常分析icon

通过SDK自动收集前端异常信息,对异常信息进行统计分析,方便用户掌握应用的整体异常情况

icon页面异常分析icon

通过JS错误排行,了解发生最多的JS错误,方便问题定位优化。支持网络、平台、ISP、地区、机型、浏览器、版本多个维度对页面异常数据进行分析。

icon页面异常分析-案例icon

利用前端性能监控对前端进行监测,发现Ajax异常突增,经过分析某个URL在某个地区访问异常,最终排查该URL被运营商屏蔽。

icon页面日志查询icon
 
用户访问前端出现问题时,开发者只能通过本地复现,可能是客户端兼容性、网络环境导致的Bug,只能靠“猜”来复现问题,无法复现的问题好比“断了线的风筝”。 如果能获取到用户访问前端的日志流,以及上下文信息,快速还原问题发生现场,可以快速定位并排查问题,让“风筝”再次回到开发者的手里。
icon页面日志查询icon

支持检索用户日志,还原异常发生现场,获取足够的信息来定位问题。

icon页面日志查询-案例icon

某用户投诉手机端页面打不开,利用前端性能监控查询页面日志,最后发现用户安卓版本过低,某个JS函数不支持

icon页面访问分析icon
精准运营策略
通过对用户访问数据进行分析,构建用户画像,定制精准的运营策略
关键绩效指标
用户访问相关数据是业务的关键绩效指标
量化用户收益
收集每个页面访问数据,量化功能优化产生的用户收益
产品优化方向
针对用户访问的数据,为产品优化指明方向,提升用户体验
icon页面访问分析icon

业务PV/UV数据,每个页面访问的TOP数据,支持查看总体以及每个页面的访问量。支持网络、平台、ISP、地区、机型、浏览器、版本多个维度对页面访问数据进行分析。

iconAPI监控icon
 
API用于前端用户和后端进行交互
页面动态内容加载需通过API进行获取数据
API性能差或发生异常,势必会造成用户体验差
优化API = 优化用户体验
iconAPI监控icon

通过嵌入SDK,自主上报前端请求的API,统计API请求耗时,HTTP Code成功率以及retcode成功率等,通过40x和50x TOP视图,非常方便的定位API异常。

iconAPI监控icon

支持网络、平台、ISP、地区、机型、浏览器、版本多个维度对API监控数据进行分析。

 

icon静态资源优化icon
 
静态资源包括HTML、JS、CSS、图片、音频等内容
静态资源一般不会经常发生变化,所以我们一般都利用CDN对静态资源进行分发
衡量静态资源加载的性能,监测静态资源加载的异常,对于用户体验有明显的影响
icon静态资源优化icon

统计静态资源请求的平均耗时,以及静态资源下载过程的异常,通过TOP视图优化性能,定位并解决问题,提升用户访问体验。

icon静态资源优化icon

支持网络、平台、ISP、地区、机型、浏览器、版本多个维度对静态资源数据进行分析。

icon静态资源优化-案例icon

静态资源加载成功率为98%,通过资源请求TOP视图发现部分静态资源URL错误,重新发版顺利解决问题。

icon自定义信息上报icon
 
不满足于SDK主动上报的数据,想自定义上报一些数据,能不能支持?
自定义日志:主动上报用户日志,包括info、report、error、retcode等,方便排查问题。
自定义事件:上报页面自定义事件,并提供强大的检索能力和多维分析能力。
自定义测试:SDK的测速不满足需求,支持自定义测试,提供多维分析能力。
icon多平台支持icon

支持 Web、小程序(微信、QQ)、React Native、Hippy、Flutter 等前端性能监控场景。

icon接入成本低icon

在使用 SDK 时无需在业务代码中打点或者做任何其他操作,可以做到与业务代码充分解耦。SDK 将会自动监控前端错误,在错误发生时上报错误的具体情况,帮助您快速定位问题。当您开启资源测速时,SDK 将会自动监听页面资源加载情况(耗费时长、成功率等),并在不影响前端性能的前提下收集前端的性能数据,帮助您快速定位性能短板,提升用户体验。

icon多维分析icon

支持从网络、平台、ISP、地区、机型、浏览器、Version等多个维度对数据进行分析,提供多图表展示方式,帮助您多维查看监控图表。

 

icon离线日志icon

通过离线日志功能,不需要全量上报日志数据,可通过白名单系统将需要的日志进行上报,未上报的日志存储在前端用户的本地indexedDB中,当需要排查客户问题时,再将日志数据拉取上来,可以极大程度上减少存储成本。

icon智能告警icon
 
告警策略可配置多种指标的告警触发阈值
支持智能告警,无需手动设置阈值,系统自适应进行告警通知
icon客户案例-QQ空间icon
QQ空间是新生代最活跃的社交平台,用户以青少年为主。提高用户体验,预防用户流失是QQ空间最关注的问题。前端性能监控RUM助力QQ空间对真实用户访问进行监测,持续不断优化访问性能,预防访问异常,更加有效的提高用户体验。
效果 查询用户日志,还原故障的上下文信息,让问题定位有迹可循。应用质量监控大盘,多维分析,助力业务质量优化效果展示。对接口和静态资源加载进行监测,有异常及时进行告警。
痛点 用户反馈问题无法复现 页面性能质量优化效果无法衡量 接口报错没有告警 无法主动掌握静态资源加载性能
icon客户案例-腾讯动漫小程序icon
腾讯动漫小程序作为在线内容月度平台,对于用户访问的性能要求和体验要求都非常高,用户体验下降就面临着客户流失。利用前端性能监控RUM,腾讯动漫解决了小程序存在的一些报错问题,获取用户访问数据,对业务接口持续监控,增强了用户体验监测的手段。
效果 对页面异常信息进行分析,解决了大部分报错问题。采集用户访问数据,多维度分析页面访问数据,优化页面访问。对业务的接口返回码监控,有异常及时进行告警。
痛点 业务存在的一些问题无法解决,如JS报错,接口报错等 无法获取用户机型分布、地域分布、网络分布等 无法监控业务的返回码,并及时告警
icon合作客户icon
产品推荐 查看更多>>
    腾讯云 费控报销系统

    腾讯云费控报销系统,全方位提升企业满意度,曾经报销30分钟,现在5分钟。填单体验、填单效率显著提升 ,电子发票无需黏贴,提升员工效率;发票查验、查重、合规、风险控制系统自动完成,报销审核效率显著提升;一键入账;数据报表系统生成;提升财务效率;预算、部门费用使用情况轻松掌控各类报表随时查阅。

    填单体验、填单效率显著提升

    一键入账、数据报表系统生成

    预算、部门费用使用情况轻松掌控

    全方位提升企业满意度

    腾讯云智优保:AI智能核保解决方案

    腾讯云智优保:AI智能核保解决方案能够影像识别快速准确、数据资产沉淀、核保决策智能可解释、专业完整的领域知识、健康管理增值服务等功能,覆盖核保全流程的AI能力

    影像识别快速准确

    数据资产沉淀

    核保决策智能可解释

    健康管理增值服务

    腾讯健康新零售药店SaaS

    基于微信生态、腾讯云云资源的SaaS化部署,帮助连锁药店快速搭建独立主体的线上线下一体化商城,实现数字化转型;帮助连锁药店用户线上化,提供药事服务,丰富的营销方式,以数据驱动销售,精准营销,提升药店人效坪效,打造增长新曲线。

    基于微信生态、腾讯云云资源的SaaS化部署

    帮助连锁药店快速搭建独立主体的线上线下一体化商城

    提供药事服务,丰富的营销方式

    提升药店人效坪效,打造增长新曲线