一、列表页用户体验优化项目
【项目背景】:
随着功能迭代和资源量的上升,列表页性能下降明显,其中用户可操作耗时95线在7s左右。华客调研:2秒内是优质的体验,三秒内客人可以忍受,超过三秒体验较差,是亟待优化的。
【项目目标】:
在保持预订CR不下降的基础上,列表页用户可操作耗时95线由7s提升到3s内
【项目成员】:
3名前端 + 3名后端 + 1名测试
个人职责:前端开发&前端技术负责人
【优化详情】
1、前期在进行性能瓶颈分析时,在各个层级建立更细粒度的埋点,并构建多维度及多渠道的性能监控与预警
2、改采用分页的交互方式,来减少首屏传输的报文量,提升传输速度
3、报文精简,对于一些冗余或未使用的字段进行前后端联合下线处理,以减少报文大小,缩短传输耗时
4、在前置页面,前端进行预请求处理,利用空闲时间,提前准备好数据,命中缓存的,可达到秒开效果,未完全命中缓存的,也可以复用请求,有效缩短请求耗时
【项目成果】:
1、用户可操作耗时95线最终降低到2.7s
2、首屏缓存命中率维持在60%以上
3、列表页到详情页的CR转化显著提升
4、该项目获得公司2021技术杰出贡献提名奖
二、前端性能优化项目
【项目背景】
APP首页、列表页、订单详情页详等预订流程核心页面的加载比较慢,影响用户体验。另外其它端对于性能监控看哪些数据没有统一定义,性能对比APP差距较大(业务涉及H5、小程序等多个渠道)。其中APP主要技术栈是React Native
【技术方案】
1、制定统一性能数据标准,建立统一性能监控
2、接入lazyRequire,实现路由维度的文件按需加载
3、js模块采用get属性的方式赋值,调整文件引用方式,以实现按需加载
4、对一些大文件按路由进行懒加载,以减少业务js加载的耗时
5、优化冗余代码,缩小包的size,减少首次加载包的耗时
6、采用渐进式方式渲染页面,来提升首屏渲染速度
7、通过数据透传的方式,优先直接展示首屏数据,其它内容实时查询,
8、首屏接口动静分离,优先保证首屏内容展示,减少loading等待时长
9、减少重复渲染,提升页面渲染速度及交互速度
10、使用GraphQL,合并请求,减少页面抖动,提升用户体验
【优化效果】
预订主流程页面整体秒开率从60%提升到90%以上