H5前端性能测试快速入门
作者:yanghj 发布时间:[ 2016/11/8 11:21:43 ] 推荐标签:性能测试 WEB测试 H5
以手机管家端午节运营活动H5为例,附上上述工具测试结果页,当然这里仅仅是结果的罗列。具体的分析还是需要测试人员来做,衡量是否符合当前运营需求。
WebPagetest
Page Speed:
PCAP Web Performance Analyzer:
Chrome DevTools:
常见问题举例:
同样以手机管家端午节运营活动H5为例:(完成整个加载性能测试耗时只需20分钟左右)
1、HTTP请求过多
图为PCAP Web Performance Analyzer解析pcap包的结果,图中我们可以看出,21个http请求中,有7个是统计点发出的请求。这里可以考虑统计点合并上报和首屏时减少上报统计点。
2、图片空白部分太多
这里需要用到的图片仅仅是作为右上角分享,但是在我们请求的图片确实整张完整的图。
可以考虑请求小的切图,通过CSS控制图片显示位置。
3、图片尺寸
下面一张背景图,我们可以看到尺寸是1080X1919,然后当前市面上Android主流机型主要为 480x800, 480x854, 540x960, 720x1280, 800x1280 。所以,为每一个移动设备都提供一张1080X1919的图片实在没有必要。
4、没有使用的资源
下面这一幅图,在chrome DevTools中看到请求响应并下载成功,但是在实际的H5活动中并没有使用过。
5、返回码非200
非200的返回码意味着本次请求没有实质性的收获,如上图所示的两次非200请求返回值:
404:上图请求图片时出现404:一方面,可能图片本身在H5中不展示,所以这里直接去掉多余的连接好了。另一方面,可能H5中需要该图片,而恰好访问结果为404,那此时定位了一个bug 的存在。
302:请求音乐时出现302重定向:从图中可以明显看出两次请求后才获取到背景音乐,从用户侧可能会感知是音乐加载速度慢。
6、未使用CDN,未设置cache
如果该运营活动是性的,且用户量很大,那么非常有可能网络“边缘”的用户没有办法正常访问该H5活动。
7、资源未压缩
这里详细列出了各个没有压缩的图片资源。这里要建议的图片的压缩,如上图测试结果,压缩后可以减少16K的图片资源大小。还可以考虑是否采用图片地图来减少http请求。
相关推荐
更新发布
功能测试和接口测试的区别
2023/3/23 14:23:39如何写好测试用例文档
2023/3/22 16:17:39常用的选择回归测试的方式有哪些?
2022/6/14 16:14:27测试流程中需要重点把关几个过程?
2021/10/18 15:37:44性能测试的七种方法
2021/9/17 15:19:29全链路压测优化思路
2021/9/14 15:42:25性能测试流程浅谈
2021/5/28 17:25:47常见的APP性能测试指标
2021/5/8 17:01:11