聊一聊H5营销页面的性能优化

2022-12-10 16:27:10 浏览数 (2)

我来自机票BU,目前负责机票营销的业务开发,众所周知营销业务的普遍特点是:访问量很大。每次营销活动,对于不同角色的同学,关注的点也不一样。

运营/产品同学更为关注产品的转化、拉新、留存、用户行为。

普通用户更为关注产品的新特性、吸引力、性价比、产品体验等。

开发同学更为关注页面性能和异常情况。

归纳上述诉求:

  • 从业务发展角度来看,我们需要知道用户的使用情况,包括 PV、UV、停留时长、访问深度、页面跳转等。
  • 从体验优化角度来看,我们需要知道页面真实的性能数据,包括页面加载和资源加载的耗时。
  • 从问题快速排查角度来看,我们需要知道用户的使用快照,包括发生问题时的接口请求、页面报错等。

第一部分属于行为监控的范畴,产品一般会让我们在关键的节点埋点,然后产品上线后,通过BI拉数据来进行分析。我们能做的并不多。

第三部分,用户使用快照这里我们接入了组内其他同学开发的coffeebean系统,可对用户的操作行为进行录制,在排查线上问题时能给予很大的帮助。页面报错(js error、promise 错误、自定义错误等)我们可在cdata查看。

唯独第二部分,用户体验这部分的数据(对应性能监控)对我们影响很大,也是我们着力在提升的。

本文就分享一下我们在用户体验优化和页面性能提升上做的一系列改造工作,希望能给看文章的你一些启发。

1看一看什么是性能监控?

首先来看一下关于性能监控的一些基础知识。

上面这张图梳理了性能监控需要关注的几个核心指标。

衡量一个Web页面的体验和质量一直有非常多的工具和指标。

如果我们全面的了解了 Web 性能标准,就能知道性能指标是如何定义的、性能指标的计算方式以及有哪些浏览器支持的优化策略。基于这些了解,我们才能说如何去排查性能问题、如何去优化性能以及如何去采集这些性能数据来做性能监控。

上图中的指标都会基于下面这张图:

我估计你也会有同样的疑惑:怎么这么多指标。。。

每次我们去关注这些指标的时候都会非常痛苦,因为这些指标真的是又多又难理解,测量这些指标的工具也非常多。但毕竟我们不是性能工程师,我们只是前端工程师

0 人点赞