许达来|前端质量｜基于业务驱动的前端性能有效实践案例云从科技

文章图片

文章图片

文章图片

文章图片

文章图片

文章图片

文章图片

文章图片

文章图片

一、背景 1.1.前端性能优化的业务意义
前端的本质价值是什么?
我认为是给用户创造良好的交互体验。前端性能对用户体验、对业务跳失率的影响，在业界已有共识，不言而喻。根据 Google 的数据，如果移动站点的加载时间超过 3 秒， 53% 的用户会放弃访问。
加载时间从 1s 延长到 3s 时，跳失率增加32%加载时间从 1s 延长到 5s 时，跳失率增加90%——用户还没看到辛苦优化的页面，就走了一部分。
（参考文末链接）
抵达率优化应该在转化率之前，用户能够正常访问网页，网页的内容才能产生价值。所以在优化着陆页内容、提高转化率之前，要先保障抵达率。抵达率太低，哪怕页面转化100% ，整体的转化效果也会很差。
1.2.测试把控难点
现在流行的，运营自行搭建页面+自行多端投放方式，使我们的不可控。原先发现性能问题主要通过感受+性能跑测数据，或者运营以业务要挟、或者质疑受机器等因素影响、或者相互推诿主要瓶颈点，使优化无法落实。部分性能优化困难，影响性能点比较复杂，实行优化的收益不可预知，也阻碍了优化的落实。二、前端性能优化测试视角的解法很多人都以为，前端性能优化，重点在“前端”优化， “测试”很难起到主导作用。试着换个角度，从整个研发团队视角看，前端做运动员专项治理，测试做裁判员专项评测，这套机制，是否更能切实做到优化，达成的数据也更让大家信赖？再者，测试不止局限于此，还可做队医、分析师。。。。
2.1.可持续优化闭环
以下持续优化闭环，是我们摸索着实行了一年多，有效且高效的解法。

从上图看，整个过程为：
step0、前端事先进行埋点，（一般前端做了sdk ，直接引入即可）step1、测试通过性能黑榜，发现最为突出的重点性能问题页面（首屏平均时长秒开率， PV业务意义，多项结合度量）step2、协助前端一起专业分析问题页面，找出性能瓶颈点step3、前端更有策略地针对性治理step4、查看性能趋势变化，验证优化效果step5、假设已达到优化预期，或者有更糟糕的页面把之前页面挤下去，继续关注黑榜前列的页面（即跳到step1 ，继续轮转）
我们可以发现，测试通过发现、分析、验证三板斧，驱动推进页面性能优化。

2.2.效果明显
从2021年10月份开始迭代以来，共发现了8类严重性能问题。