使用WebPageTest测量网页性能及报告解读

WebPageTest是一款非常强大的网站性能测评工具，可以选择不同的测试地址、服务器和浏览器。可以在线使用，也可本地部署使用。

在线使用

除了需要科学上网，在线使用起来还是比较简单方便的。首先进入官网，可以简单的选择测试地址和浏览器。

点击Advanced Settings，展开高级设置，可以看到更多的设置项。其中：

      Connection：链接网络设置，可以选择2G/3G/4G等；

      Number of Tests to Run：测试次数，最多9次，用于多次测试取平均值，减小误差；

      Repeat View：是否显示二次访问的视图，推荐显示；

      Capture Video：捕捉视频

设置完成后点击START TEST，开始测试，测试可能需要一段时间，等待的时间不一定要停留在测试页面上，可以随时在TEST HISTORY中查看测试结果。

本地部署

我们借助docker进行安装，在命令行中依次执行下面的指令，拉取镜像，第一次拉取时，可能需要一些时间。

docker pull webpagetest/server
docker pull webpagetest/agent

安装完成后，可以分别运行server和agent实例

docker run -d -p 4000:80 webpagetest/server
docker run -d -p 4001:80 --network="host" -e "SERVER_URL=http://localhost:4000/work/" -e "LOCATION=Test" webpagetest/agent

运行成功后，访问http://localhost:4001即可看到与线上官网同样的页面。

报告解读

首先来看Summary，表格有两行数据，分别代表第一次访问与第二次访问的测试结果。部分指标如下：

      First Byte（TTFB）：发出的第一个请求得到响应的时间

      Start Render：首屏渲染的时间

      First Contenful Paint：第一次有内容的绘制出现的时间（从白屏到出现内容）

      Speed Index：速度指数，期望在4s以内

      Total Blocking Time：阻塞时间，用户不能做交互的时间。

接下来看Details，以首轮首次加载为例，点击下图瀑布图区域，可进入详情面板。

详情页展示的是单次的测试结果，由于内容较多，就不整体截图了，大体上与Chrome Dev Tool中的瀑布图类似。值得注意的几个指标如下：

      CPU Utilization：CPU的占用情况

      Bandwidth In：带宽

      Browser Main Thread：浏览器的主线程占用

      Long Tasks：长任务