以手机管家端午节运营活动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请求。