WebPageTest怎么用？

学完这篇，你能独立在 WebPageTest 上跑完一次真实浏览器测试，看懂它给出的核心指标和水瀑布图，并知道哪些参数该改、哪些结果值得深挖。

WebPageTest（网址 webpagetest.org）和 Lighthouse 最大的区别是：它用分布在各地的真实机器、真实浏览器、真实网络环境跑你的页面，所以拿到的是「用户实际体验」，不是本地模拟值。下面按顺序走一遍。

第一步：打开网站，填入要测的 URL

在浏览器打开 https://www.webpagetest.org，页面最顶部是 Enter a Website URL 输入框，把完整地址粘进去，包括 https://。建议先用首页或无痕状态下能访问的公开页面练手，比如你自己的博客或公司官网。

注意：需要登录态才能打开的页面（后台、订单页）在这里会直接跳到登录页，测出来的结果没有意义。这类页面要用后面的 Script 或 Auth 标签处理。

第二步：选测试地点和浏览器

Test Location 是下拉框，决定用哪台机器跑。列表里的格式是「城市, 国家 - 浏览器 - 网络」，例如 Dulles, Virginia USA - Chrome - Cable，也能看到 Guangzhou, China、Hong Kong, China 之类的亚洲节点。Browser 下拉框里显示的版本号（如 Chrome 121）就是该节点实际安装的版本，换节点等于换版本。

如果你要测的访客主要在国内，就选广州或香港节点；要测欧美用户，选 Dulles 或 Frankfurt。选错地理位置的后果非常直接——跨洋 RTT 会让 TTFB 凭空多出两百多毫秒。

第三步：按需要展开 Advanced Settings

首页中间有一个折叠区 Advanced Settings，点开后会看到 Connection、Auth、Script、Block、SPOF、Custom Headers、Emulate 等标签页。新手 90% 的需求集中在这几项：

• Connection：默认是节点原生网络，可以改成 Cable、3G、4G 做限速模拟，测移动端体验必改。
• Emulate 标签里的 Emulate Mobile Browser：模拟手机视口和 UA，比 Connection 更接近真机场景。
• Script 标签：写一段简单脚本，可以做到「先登录再截图」「点开弹窗后再测」。
• Block 标签：屏蔽第三方域名，用来验证去掉埋点后页面能快多少。

首页折叠区之外还有三个复选框别忽略：Include Repeat View（测不测二次访问，缓存命中后的表现完全不同）、Number of Tests to Run（默认 9 次取中位数，想快点出结果可以改成 3 或 5）、Capture Video（生成逐帧胶片图）。

注意：Number of Tests to Run 调小会牺牲稳定性。测抖动大的页面时保留 9 次，看结果页里各次数据是否离散，比只看一个中位数靠谱得多。

第四步：点 Start Test，拿到 Test ID

点左上角的 Start Test 按钮，页面会跳到一个进度页，显示当前队列位置（Position in Queue）。免费公共节点高峰期排队几分钟很常见，耐心等。

跑完后你会得到一个 Test ID（形如 240101_AiD_1），结果页 URL 可以直接发给同事，对方不用登录就能看到同样的报告。

第五步：读结果页的四个地方

结果页信息很多，先看这四块就够了：

1. Summary（顶部的指标卡）：TTFB、Start Render、First Contentful Paint、Speed Index、Largest Contentful Paint、Total Blocking Time、Cumulative Layout Shift。First View 和 Repeat View 两列并排，一眼看出缓存有没有起作用。
2. Filmstrip / Video：逐帧截图，能直接看到「白屏了多久」「内容是不是跳着出现的」。
3. Waterfall（Details 标签）：每条请求的 DNS、连接、TLS、TTFB、下载各阶段耗时。找长条、找串行链、找被推迟到最后才加载的图片。
4. Content Breakdown / Domains：按域名和资源类型统计请求数与字节数，第三方脚本占了多少一目了然。

第六步：进阶——API 与批量测试

要接进 CI 或做定时监控，用 REST API：https://www.webpagetest.org/runtest.php?url=https://你的域名&k=你的API_KEY&f=json，返回的 JSON 里带 Test ID 和后续查询地址。API Key 在官网右上角注册账号后在 Account → API Keys 里申请，免费额度通常是每天 200 次左右。

注意：公开测试默认任何人都能看到结果。测内网或含参数的真实链接前，先在 Advanced Settings 的 Auth 或 Private 选项里确认可见性设置，别把带 token 的 URL 暴露出去。

小结

• WebPageTest 的价值在「真实地点 + 真实浏览器 + 真实网络」，不是本地模拟。
• 必调的三处：Test Location、Connection、Include Repeat View。
• 结果先看 Summary 指标卡，再看 Filmstrip 和 Waterfall，最后看 Content Breakdown 找第三方元凶。
• Test ID 就是分享链接，接 CI 用 runtest.php + API Key。
• 需要登录态的页面，用 Advanced Settings 里的 Script 或 Auth 解决。