webperf-loading

WebPerf：加载性能

用于在 Chrome DevTools 中测量 Web 性能的 JavaScript 代码片段。

运行脚本

1. 使用 mcp__chrome-devtools__evaluate_script 运行脚本，并读取其返回的对象。脚本不会输出到控制台，因此返回的对象就是结果：script、status 和指标数据（value、rating、details、items、issues），详见 references/schema.md。
2. 当 status 为 "tracking" 时，脚本会继续观察页面。完成交互后，再调用 getDataFn 中命名的函数，并通过另一次 mcp__chrome-devtools__evaluate_script 调用该函数，例如 getINP()，然后读取其返回的对象。
3. 当 status 为 "error" 或 "unsupported" 时，请读取 error：页面可能尚未加载，或者浏览器不支持相应 API。

如果没有 Chrome DevTools MCP，请使用 webperf-snippets CLI 运行相同的代码片段。它会在无头 Chromium 中加载页面，并输出相同的结果对象：npx webperf-snippets <url> --snippet <Name> --json，其中 <Name> 是脚本名称（不含 .js）。它需要 Playwright 和 Chromium（先运行 npm install --save-dev webperf-snippets playwright，然后运行 npx playwright install chromium）；跟踪类代码片段需要通过 --interact-script <file> 驱动交互。

脚本

• scripts/Back-Forward-Cache.js — 后退/前进缓存
• scripts/CSS-Media-Queries-Analysis.js — CSS 媒体查询分析
• scripts/Cache-Strategy-Analysis.js — 缓存策略分析
• scripts/Client-Side-Redirect-Detection.js — 客户端重定向检测
• scripts/Compression-Audit.js — 压缩审计
• scripts/Content-Visibility.js — 内容可见性
• scripts/Critical-CSS-Detection.js — 关键 CSS 检测
• scripts/Event-Processing-Time.js — 事件处理时间
• scripts/FCP.js — 首次内容绘制（FCP）
• scripts/Find-Above-The-Fold-Lazy-Loaded-Images.js — 查找首屏中的延迟加载图片
• scripts/Find-Images-With-Lazy-and-Fetchpriority.js — 查找设置了 loading lazy 和 fetchpriority 的图片
• scripts/Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js — 查找视口之外未延迟加载的图片
• scripts/Find-render-blocking-resources.js — 查找阻塞渲染的资源
• scripts/First-And-Third-Party-Script-Info.js — 第一方和第三方脚本信息
• scripts/First-And-Third-Party-Script-Timings.js — 第一方和第三方脚本耗时
• scripts/Fonts-Preloaded-Loaded-and-used-above-the-fold.js — 首屏中的预加载、已加载和已使用字体
• scripts/Inline-CSS-Info-and-Size.js — 内联 CSS 信息和大小
• scripts/Inline-Script-Info-and-Size.js — 内联脚本信息和大小
• scripts/JS-Execution-Time-Breakdown.js — JavaScript 执行时间细分
• scripts/Prefetch-Resource-Validation.js — 预取资源验证
• scripts/Priority-Hints-Audit.js — 优先级提示审计
• scripts/Resource-Hints-Validation.js — 资源提示验证
• scripts/Resource-Hints.js — 资源提示
• scripts/SSR-Hydration-Data-Analysis.js — SSR 框架水合数据分析
• scripts/Script-Loading.js — 脚本加载
• scripts/Server-Timing-Early-Hints.js — Server-Timing 和 Early Hints 查看器
• scripts/Service-Worker-Analysis.js — Service Worker 分析
• scripts/Speculation-Rules-Inspector.js — Speculation Rules 检查器
• scripts/TTFB-Resources.js — 首字节时间：测量所有资源的 TTFB
• scripts/TTFB-Sub-Parts.js — 首字节时间：测量 TTFB 的各个组成部分
• scripts/TTFB.js — 首字节时间：测量首字节时间
• scripts/Third-Party-Impact-by-Domain.js — 按域名分析第三方影响
• scripts/Validate-Preload-Async-Defer-Scripts.js — 验证 Preload、Async 和 Defer 脚本
• scripts/Webfont-Usage-Analyzer.js — Web 字体使用情况分析器

常见工作流

完整的加载性能审计

当用户要求进行全面的加载分析或“审计加载性能”时：

1. TTFB.js — 建立服务器／网络性能基线
2. FCP.js — 检查初始渲染时间
3. Find-render-blocking-resources.js — 找出阻塞渲染的内容
4. Critical-CSS-Detection.js — 验证 CSS 策略
5. Script-Loading.js — 审计脚本加载模式
6. Resource-Hints-Validation.js — 检查优化提示

服务器／后端性能调查

当 TTFB 较慢或用户询问“为什么我的服务器很慢”时：

1. TTFB.js — 测量整体 TTFB
2. TTFB-Sub-Parts.js — 分解 DNS、连接和服务器耗时
3. Service-Worker-Analysis.js — 检查影响 TTFB 的 SW 开销
4. TTFB-Resources.js — 找出缓慢的第三方或 API 端点
5. Server-Timing-Early-Hints.js — 从 Server-Timing 读取后端各阶段耗时，并检查 103 Early Hints

字体加载优化

当用户询问字体、FOIT、FOUT 或字体性能时：

1. Fonts-Preloaded-Loaded-and-used-above-the-fold.js — 全面审计字体
2. Resource-Hints-Validation.js — 验证字体预加载是否正确
3. Find-render-blocking-resources.js — 检查字体是否阻塞渲染
4. Webfont-Usage-Analyzer.js — 找出未使用、从未加载或使用阻塞式 font-display 的字体样式

文本压缩审计

当用户询问压缩、gzip、brotli 或文本资源传输体积过大时：

1. Compression-Audit.js — 找出未压缩传输的文本资源并估算节省的流量
2. Find-render-blocking-resources.js — 优先处理阻塞渲染的未压缩 CSS／JS
3. TTFB-Resources.js — 检查未压缩资源的服务器响应

深入分析脚本性能

当怀疑脚本拖慢页面时：

1. Script-Loading.js — 找出阻塞脚本并检查加载策略
2. First-And-Third-Party-Script-Info.js — 区分第一方与第三方的影响
   • Third-Party-Impact-by-Domain.js — 按阻塞渲染的影响、主线程耗时和体积对第三方域名排序
3. First-And-Third-Party-Script-Timings.js — 诊断缓慢的脚本连接
4. JS-Execution-Time-Breakdown.js — 区分网络耗时与解析／执行耗时
5. Inline-Script-Info-and-Size.js — 测量内联脚本开销
6. Validate-Preload-Async-Defer-Scripts.js — 找出预加载反模式

资源提示与优先级优化

当用户希望优化资源加载优先级时：

1. Resource-Hints.js — 概览所有正在使用的提示
2. Resource-Hints-Validation.js — 验证提示是否确实生效
3. Priority-Hints-Audit.js — 检查 fetchpriority 的使用情况
4. Prefetch-Resource-Validation.js — 验证预取策略
5. Validate-Preload-Async-Defer-Scripts.js — 找出冲突
6. Speculation-Rules-Inspector.js — 检查预取／预渲染规则及预渲染激活情况

CSS 优化工作流

当 CSS 臃肿或阻塞渲染时：

1. Critical-CSS-Detection.js — 检查关键 CSS 策略
2. Inline-CSS-Info-and-Size.js — 测量内联 CSS 开销
3. CSS-Media-Queries-Analysis.js — 找出未使用的响应式 CSS
4. Find-render-blocking-resources.js — 找出阻塞渲染的样式表

SSR／框架性能

分析 Next.js、Nuxt、Remix 或其他 SSR 框架时：

1. SSR-Hydration-Data-Analysis.js — 分析水合数据体积
2. Script-Loading.js — 检查框架脚本加载模式
3. JS-Execution-Time-Breakdown.js — 测量水合执行开销
4. Content-Visibility.js — 检查是否使用 content-visibility 进行优化

决策树

根据结果使用此决策树自动运行后续代码片段：

TTFB.js 之后

• 如果 TTFB > 600ms → 运行 TTFB-Sub-Parts.js，诊断时间花在了哪里
• 如果检测到 Service Worker → 运行 Service-Worker-Analysis.js，检查 SW 开销
• 如果不同资源的 TTFB 差异显著 → 运行 TTFB-Resources.js
• 如果 TTFB-Sub-Parts.js 显示服务器耗时占主导 → 运行 Server-Timing-Early-Hints.js，查看哪个后端阶段较慢

Server-Timing-Early-Hints.js 之后

• 如果未找到 Server-Timing 指标 → 建议为数据库、缓存和渲染阶段添加 Server-Timing 响应头
• 如果跨域资源似乎被隐藏 → 建议在这些响应上设置 Timing-Allow-Origin
• 如果未收到 103 Early Hints 且服务器耗时较高 → 建议为主样式表和 LCP 图片使用 Early Hints

FCP.js 之后

• 如果 FCP > 1.8s → 运行：
  1. Find-render-blocking-resources.js（CSS/JS 阻塞）
  2. Critical-CSS-Detection.js（CSS 策略）
  3. Script-Loading.js（阻塞脚本）
• 如果 FCP 表现良好，但用户抱怨感知速度慢 → 使用 webperf-core-web-vitals 技能检查 LCP

Find-render-blocking-resources.js 之后

• 如果发现阻塞样式表 → 运行 Critical-CSS-Detection.js
• 如果发现阻塞脚本 → 运行：
  1. Script-Loading.js（加载策略）
  2. Validate-Preload-Async-Defer-Scripts.js（检查反模式）
• 如果字体造成阻塞 → 运行 Fonts-Preloaded-Loaded-and-used-above-the-fold.js

Script-Loading.js 之后

• 如果有许多阻塞或解析器阻塞脚本 → 运行：
  1. JS-Execution-Time-Breakdown.js（测量执行开销）
  2. First-And-Third-Party-Script-Info.js（识别第三方问题来源）
• 如果检测到第三方脚本 → 运行 First-And-Third-Party-Script-Timings.js
• 如果有大型内联脚本 → 运行 Inline-Script-Info-and-Size.js

Resource-Hints-Validation.js 之后

• 如果发现未使用的预加载 → 建议移除
• 如果关键资源缺少预加载 → 运行：
  1. Fonts-Preloaded-Loaded-and-used-above-the-fold.js（字体）
  2. Priority-Hints-Audit.js（LCP 候选资源）
• 如果异步/延迟脚本使用了预加载 → 运行 Validate-Preload-Async-Defer-Scripts.js

Compression-Audit.js 之后

• 如果发现未压缩的 CSS/JS → 运行 Find-render-blocking-resources.js，查看它们是否阻塞渲染
• 如果预计节省 > 100KB → 建议在服务器或 CDN 上启用 gzip 或 brotli
• 如果 corsLimitedAnalysis 为 true → 将结果报告为下限，并建议对你控制的资源设置 Timing-Allow-Origin

Third-Party-Impact-by-Domain.js 之后

• 如果某个域名造成渲染阻塞 → 建议使用 async、defer、延迟加载或自托管；运行 Script-Loading.js 检查加载策略
• 如果某个域名的主线程耗时 > 250ms → 运行 Long-Animation-Frames-Script-Attribution.js（webperf-interaction），查找相关函数，并建议延迟加载或移除该脚本
• 如果有许多请求数较少的域名 → 建议审查标签并移除未使用的标签
• 如果 corsLimitedAnalysis 为 true → 将大小报告为下限；使用 First-And-Third-Party-Script-Timings.js 查看隐藏资源的耗时

Service-Worker-Analysis.js 之后

• 如果 SW 开销 > 100ms → 建议使用 Navigation Preload API
• 如果 SW 缓存了许多资源 → 运行 TTFB-Resources.js 验证缓存命中情况
• 如果未检测到 SW，但网站是 SPA/PWA → 建议实现 SW

Fonts-Preloaded-Loaded-and-used-above-the-fold.js 之后

• 如果字体已预加载，但未在首屏区域使用 → 建议移除预加载
• 如果字体已使用，但未预加载 → 建议添加预加载
• 如果加载了许多字体变体 → 建议进行子集化或减少变体，并运行 Webfont-Usage-Analyzer.js 查找未使用的变体

Webfont-Usage-Analyzer.js 之后

• 如果字体已加载但未使用 → 建议移除 @font-face 声明或预加载
• 如果字体面使用 font-display: auto 或 block → 建议改用 swap 或 optional，然后检查 Find-render-blocking-resources.js
• 如果字体字节数过高 → 建议使用 unicode-range 和 WOFF2 进行子集化
• 如果 LCP 元素是文本 → 使用 webperf-core-web-vitals 技能运行 LCP.js

First-And-Third-Party-Script-Info.js 之后

• 如果第三方脚本较多（>5） → 运行：
  1. First-And-Third-Party-Script-Timings.js（详细计时）
  2. JS-Execution-Time-Breakdown.js（执行影响）
• 如果第三方脚本较慢 → 建议使用 async/defer 或移除脚本

SSR-Hydration-Data-Analysis.js 之后

• 如果水合数据 > 100KB → 建议采用优化策略
• 如果有多个水合脚本 → 调查框架配置
• 如果内联水合数据过大 → 考虑流式传输或分块

Priority-Hints-Audit.js 之后

• 如果 LCP 候选项缺少 fetchpriority="high" → 建议添加
• 如果优先级冲突（preload + low） → 建议解决冲突
• 如果非关键资源设置了 fetchpriority → 检查优先级策略

Prefetch-Resource-Validation.js 之后

• 如果预取提示 >10 条 → 建议减少到关键资源
• 如果单个预取资源 > 500KB → 质疑其必要性
• 如果预取总量 > 2MB → 标记为移动端带宽问题
• 如果可能的后续导航几乎没有或完全没有预取提示 → 运行 Speculation-Rules-Inspector.js，检查预取/预渲染规则

Speculation-Rules-Inspector.js 之后

• 如果未发现推测规则，但网站存在可预测的导航 → 建议添加预取或预渲染规则
• 如果 JSON 无效或规则浪费资源（对许多 URL 进行积极预渲染） → 建议修复规则，或将积极程度降至 moderate 或 conservative
• 如果页面已预渲染（activationStart > 0） → 解读 TTFB.js、FCP.js 和 LCP 结果时减去 activationStart

Critical-CSS-Detection.js 之后

• 如果阻塞渲染的 CSS > 14KB → 建议内联关键 CSS
• 如果没有内联 CSS，但存在阻塞样式表 → 建议提取关键 CSS
• 如果 CSS 总量 > 50KB → 运行 CSS-Media-Queries-Analysis.js 查找可节省空间

Back-Forward-Cache.js 之后

• 如果 bfcache 被阻止 → 根据具体阻止原因提供修复建议
• 如果符合 bfcache 条件 → 确认优化已生效

Client-Side-Redirect-Detection.js 之后

• 如果检测到客户端重定向 → 建议改用服务器端重定向
• 如果发现重定向链 → 建议消除中间跳转

参考资料

• references/snippets.md — 各脚本的说明和阈值
• references/schema.md — 用于解读脚本输出的返回值架构