使用WebPageTest评估Web网站性能

系统管理员 2022-10-11 01:23 358阅读 0赞

### 在线版本 ###

登录[https://webpagetest.org][https_webpagetest.org]，输入需要测试的网站，然后还可以选对应的请求地址和浏览器  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x0MzI2MDMwNDM0_size_16_color_FFFFFF_t_70]  
我们还可以点击`Advanced Settings`，选择更多高级选项  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x0MzI2MDMwNDM0_size_16_color_FFFFFF_t_70 1]  
在这里举几个例子：

*  Connection：模拟用户网络的情况
 *  Desktop Browser Dimensions：浏览器分辨率
 *  Number of Tests to Run：测试次数
 *  RepeatView：这两条的区别主要是看浏览器的缓存是否有效
    
     *  First View and Repeat View：会有重复访问
     *  First View Only：每次访问都是第一次访问
 *  Capture Video：保存访问情况的视频

点击`Start Test`，过一段时间就可以看到测试的结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x0MzI2MDMwNDM0_size_16_color_FFFFFF_t_70 2]  
我们来简单看几个指标：

*  First View 与 Repeat View  
    就是上文中提到的首次访问和再次访问的访问情况
 *  First Byte：发出去的第一个请求的响应时间
 *  Start Render：开始渲染的时间，简单理解就是“不再白屏”的时间
 *  Total Blocking Time：总共被阻塞的时间(无法产生用户交互)

报告往下，会有多次访问的详情，能看到请求时间的瀑布图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x0MzI2MDMwNDM0_size_16_color_FFFFFF_t_70 3]  
我们可以拉到详情的底部，可以看到CPU使用情况、主线程的占用情况、阻塞情况等  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x0MzI2MDMwNDM0_size_16_color_FFFFFF_t_70 4]

#### 本地部署 ####

当然上面只能测试在线可远程访问的web，我们在开发阶段就要进行测试的话，得选择本地部署，我们使用docker进行安装

docker pull webpagetest/server
    docker pull webpagetest/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

到这里，windows用户就可以直接使用了，mac用户还需要一些额外配置  
我们来制作一个自定义镜像，方便后续大家进行部署或安装

*  制作server镜像

mkdir wpt-mac-server
    cd wpt-mac-server
    vim Dockerfile

Dockerfile内容

FROM webpagetest/server
    ADD locations.ini /var/www/html/settings/

locations.ini

[locations]
    1=Test_loc
    [Test_loc]
    1=Test
    label=Test Location
    group=Desktop
    [Test]
    browser=Chrome,Firefox
    label="Test Location"
    connectivity=LAN

打包

docker build -t wpt-mac-server .

*  制作agent镜像

mkdir wpt-mac-agent
    cd wpt-mac-agent
    vim Dockerfile

Dockerfile内容

FROM webpagetest/agent
    ADD script.sh /
    ENTRYPOINT /script.sh

script.sh

#!/bin/bash
    set -e
    if [ -z "$SERVER_URL" ]; then
    echo >&2 'SERVER_URL not set'
    exit 1
    fi
    if [ -z "$LOCATION" ]; then
    echo >&2 'LOCATION not set'
    exit 1
    fi
    EXTRA_ARGS=""
    if [ -n "$NAME" ]; then
    EXTRA_ARGS="$EXTRA_ARGS --name $NAME"
    fi
    python /wptagent/wptagent.py --server $SERVER_URL --location $LOCATION $EXTRA_ARGS --xvfb --dockerized -vvvvv --shaper none

给脚本添加可执行权限

chmod u+x script.sh

打包

docker build -t wpt-mac-agent .

分别启动两个新的镜像，访问`localhost:4000`就可以看到webpagetest已经在本地跑起来了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x0MzI2MDMwNDM0_size_16_color_FFFFFF_t_70 5]

[https_webpagetest.org]: https://webpagetest.org
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x0MzI2MDMwNDM0_size_16_color_FFFFFF_t_70]: /images/20221005/dac7b56385734aef9181418a62703ca9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x0MzI2MDMwNDM0_size_16_color_FFFFFF_t_70 1]: /images/20221005/716c8a9e986442bc857776b5d6fda569.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x0MzI2MDMwNDM0_size_16_color_FFFFFF_t_70 2]: /images/20221005/39daf462dda14d518fc616eeb57ce58f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x0MzI2MDMwNDM0_size_16_color_FFFFFF_t_70 3]: /images/20221005/7a5a08ab0c9a445fb7df215e1afe1ef8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x0MzI2MDMwNDM0_size_16_color_FFFFFF_t_70 4]: /images/20221005/7f57714ce6dc438b971c72b5f80a7897.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x0MzI2MDMwNDM0_size_16_color_FFFFFF_t_70 5]: /images/20221005/2df5015678e141abb08ff3f49aa32fe4.png