WebPageTest

特点

1. 详细的性能分析：提供从网页加载时间到资源利用率、渲染时间等详细的性能数据。
2. 多浏览器支持：支持在多个浏览器（如 Chrome、Firefox）和真实设备上运行测试。
3. 网络条件模拟：可以模拟不同的网络条件（如 3G、4G、5G），评估在不同带宽下的网页性能。
4. 多地点测试：支持在全球多个测试地点运行测试，评估不同地理位置的用户体验。
5. 高级功能：包括视频录制、瀑布图分析、页面优化建议、页面元素跟踪等高级功能。
6. 可视化报告：生成易于理解的图形化报告，突出显示性能瓶颈和优化建议。
7. 自动化和 API 支持：提供 API 接口，便于集成到 CI/CD 流程中，实现自动化性能测试。

使用场景

1. 网页性能优化：识别和修复性能瓶颈，优化网页加载速度。
2. 多设备和浏览器兼容性测试：确保网页在不同浏览器和设备上的一致性和性能。
3. 网络条件评估：评估网页在不同网络带宽下的加载性能。
4. 全球用户体验评估：测试不同地理位置的用户体验，优化全球访问速度。
5. 自动化性能监控：集成到 CI/CD 流程中，持续监控网页性能，确保发布高质量的代码。

安装方式

WebPageTest 可以通过其在线服务直接使用，也可以自行搭建 WebPageTest 服务器。

使用在线服务

直接访问 WebPageTest 官方网站 即可开始测试。

本地安装 WebPageTest 服务器

1. 克隆 WebPageTest 仓库：

   git clone https://github.com/WPO-Foundation/webpagetest.git
   

2. 按照仓库中的安装指南进行设置和配置。

使用示例

使用在线服务

1. 访问 WebPageTest。
2. 输入要测试的网页 URL。
3. 选择测试浏览器、设备和网络条件。
4. 点击 "Start Test" 开始测试。

使用 API

1. 注册并获取 API 密钥。
2. 使用 curl 命令进行测试：

   curl -X GET "https://www.webpagetest.org/runtest.php?url=https://example.com&f=json&k=YOUR_API_KEY"
   

查看报告

测试完成后，查看生成的报告，获取详细的性能数据和优化建议。

常用 API 介绍

1. runtest：启动一次测试。

   • url：要测试的网页 URL。
   • k：API 密钥。
   • f：返回数据格式（如 json）。

   curl -X GET "https://www.webpagetest.org/runtest.php?url=https://example.com&f=json&k=YOUR_API_KEY"
   

2. testStatus：查询测试状态。

   • test：测试 ID。

   curl -X GET "https://www.webpagetest.org/testStatus.php?test=TEST_ID&f=json"
   

3. testResults：获取测试结果。

   • test：测试 ID。

   curl -X GET "https://www.webpagetest.org/jsonResult.php?test=TEST_ID"
   

4. cancelTest：取消测试。

   • test：测试 ID。

   curl -X GET "https://www.webpagetest.org/cancelTest.php?test=TEST_ID&k=YOUR_API_KEY"
   

5. locations：获取可用测试地点列表。

   curl -X GET "https://www.webpagetest.org/getLocations.php?f=json&k=YOUR_API_KEY"
   

高级用法

自定义脚本

WebPageTest 支持使用自定义脚本进行更复杂的测试，例如模拟用户交互：

logData 0
navigate https://example.com
clickAndWait id=login
setValue name=username your-username
setValue name=password your-password
submitForm name=loginForm
logData 1
navigate https://example.com/dashboard

在测试设置中选择 "Advanced Settings" -> "Script" 选项卡，粘贴自定义脚本即可。

与 CI/CD 工具集成

以下是一个简单的 GitHub Actions 配置示例，用于集成 WebPageTest 进行性能测试：

name: WebPageTest CI

on: [push]

jobs:
  performance-test:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Run WebPageTest
        run: |
          curl -X GET "https://www.webpagetest.org/runtest.php?url=https://example.com&f=json&k=${{ secrets.WPT_API_KEY }}"

官方资料

• WebPageTest 官方网站
• WebPageTest GitHub 仓库
• WebPageTest 文档