随着移动互联网的发展，用户对产品的使用体验要求越来越高。APP内的H5作为重要载体，灵活，轻量，在移动端的应用非常广泛，是一个非常核心的用户体验指标。但对比App，H5的性能表现还是逊色一筹，比如页面打开往往会出现白屏，加载慢等问题。

针对这些H5具体使用时的各类问题，友盟+U-APM应用性能监控平台为开发者奉上「H5页面分析」功能。针对APP内H5页面常见的用户感知、加载性能、慢加载三大问题，实时监控应用中H5页面的性能情况，即时帮助开发者应对H5页面的各类性能状况。

01

用户感知

从C端用户角度， 用户会向APP开发者投诉页面加载过慢，反应速度很慢，这类偏向感知类的反馈，但这个反馈很难整体进行衡量和判断，锁定到底是哪里出现问题、异常到底指向哪里角度去进行判断。

因此页面上提供首屏时间、首次内容绘制时间、页面可交互时间这3个用户可视性性能指标便于开发者了解当前页面的加载情况；

指标定义

首屏时间（FP）：First Paint，从打开页面到首个像素渲染到页面的时长

首次内容绘制时间（FCP）：First Contentful Paint，首次绘制完成DOM内容的时长，内容包括文本、图片（包含背景图）、非白色的 canvas 或 SVG，也包括带有正在加载中的 Web 字体的文本

页面可交互时间（TTI）：Time to interactive，从页面加载开始到页面处于完全可交互状态的时长。

1秒快开比：首屏完全加载时长≤1s的PV占比2秒快开比：首屏完全加载时长≤2s的PV占比5秒慢开比：首屏完全加载时长>5s的PV占比

通过以上指标开发者可以快速掌握全局加载情况，感知加载时间较长的用户占比情况；还可通过提供的样本分布掌握用户对于页面加载的容忍情况。维度分布、指标列表多个维度。

整体筛选控件支持筛选时间范围、属性维度、页面、高级功能。启动页面的筛选支持按照域名进行聚合，如果需要筛选某个URL，请先选择对应的域名，再在域名下筛选URL。

样本分布和维度分布多个指标可以查看。样本分布按照各个维度下求指标的平均值，支持Top5和明细的查看。

指标列表展示所有指标，支持导出，包含50%、90%、95%分位值。

02

加载性能

在了解完C端对于页面整体的感知情况后，开发者可能会关注到底哪里的加载慢了影响了整体的感知，此时就有了“加载性能”这个模块的设计；

在这个模块中可以为开发者提供页面加载的完整生命周期，并能能够根据不同阶段了解各环节的加载耗时。

整体趋势：洞察页面中不同生命周期的平均时长和维度分布

加载性能包含整体趋势、平均时长、指标列表、样本分布和维度分布等指标。整体趋势可以查看加载指标的平均值、50%、90%、95%分位值。

分页面统计：洞察App中不同页面在不同阶段的加载耗时

03

慢加载

在了解了整体感知和页面各生命周期中阶段的耗时后也可从慢加载角度定位APP的请求较慢的情况。

慢加载定义：可自行设置慢请求的阈值，如果请求时长大于设置的阈值，则为一次慢请求。页面完全加载时长超过慢加载阈值的被视为慢启动，默认为3秒，设定后页面即刻刷新。

URL列表中包含请求URL的列表，URL以host+path进行聚合，点击URL后可以查看到在所有筛选的时间和条件下每次慢请求的ID list。

点击URL行旁边的维度分布可以展开整体的维度分布图，展示了这个URL按照Host+Path聚合后，在每个维度下面的数量分布。

点击请求ID行右边的加载时序图，即可展开这次慢请求的详情，其中展示了本次请求的详细设备信息以及页面加载的完整生命周期。通过完整的加载时序图可以了解单请求中哪个环节出现问题，快速定位。

以上功能可通过U-APM应用性能监控平台新上线的H5页面分析一一实现，开发者只需要额外集成JS SDK，按照集成文档操作就可完成！

04 采样率

H5分析统一采样率为5%，此采样率按照设备的启动定义，即为每次启动有5%的可能性被采样。如果开发者是Pro用户需要做采样率调整，U-APM团队会协助做相应支持。

关于U-APM 应用性能监控平台

截止目前，U-APM已支持服务国内各领域多家头部客户，如七猫免费小说、猎豹清理大师、车来了、江南百景图等。未来，U-APM会继续秉承为开发者提供好工具好服务的理念，助力应用稳定性与性能监控，有效提升开发者发现问题、定位问题的效率，共同守护用户体验。