WebPerf: Loading Performance 是 nucliweb/webperf-snippets 项目中的加载性能分析技能，提供一组在 Chrome DevTools 中测量网页性能的 JavaScript 代码片段。执行方式为通过 mcp__chrome-devtools__evaluate_script 运行脚本，并用 mcp__chrome-devtools__get_console_message 捕获输出。
用途 该技能面向网页加载性能的诊断与审计，覆盖从服务器响应到首屏渲染、脚本执行、资源优先级、字体、压缩、Service Worker 以及 SSR 框架水合等多个环节。它既可用于单点问题排查，也可按预设工作流完成整体加载性能审计。
主要能力（脚本） 脚本目录 scripts/ 下包含以下片段：Back-Forward-Cache.js（往返缓存）、CSS-Media-Queries-Analysis.js（CSS 媒体查询分析）、Cache-Strategy-Analysis.js（缓存策略分析）、Client-Side-Redirect-Detection.js（客户端重定向检测）、Compression-Audit.js（压缩审计）、Content-Visibility.js（内容可见性）、Critical-CSS-Detection.js（关键 CSS 检测）、Event-Processing-Time.js（事件处理时间）、FCP.js（首次内容绘制）、Find-Above-The-Fold-Lazy-Loaded-Images.js（查找首屏懒加载图片）、Find-Images-With-Lazy-and-Fetchpriority.js（查找同时使用 lazy 与 fetchpriority 的图片）、Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js（查找视口外非懒加载图片）、Find-render-blocking-resources.js（查找渲染阻塞资源）、First-And-Third-Party-Script-Info.js（第一方与第三方脚本信息）、First-And-Third-Party-Script-Timings.js（第一方与第三方脚本计时）、Fonts-Preloaded-Loaded-and-used-above-the-fold.js（字体预加载、加载与首屏使用情况）、Inline-CSS-Info-and-Size.js（内联 CSS 信息与体积）、Inline-Script-Info-and-Size.js（内联脚本信息与体积）、JS-Execution-Time-Breakdown.js（JavaScript 执行时间拆解）、Prefetch-Resource-Validation.js（预取资源校验）、Priority-Hints-Audit.js（优先级提示审计）、Resource-Hints-Validation.js（资源提示校验）、Resource-Hints.js（资源提示）、SSR-Hydration-Data-Analysis.js（SSR 框架水合数据分析）、Script-Loading.js（脚本加载）、Server-Timing-Early-Hints.js（Server-Timing 与 Early Hints 查看器）、Service-Worker-Analysis.js（Service Worker 分析）、Speculation-Rules-Inspector.js（推测规则检查器）、TTFB-Resources.js（测量所有资源的 TTFB）、TTFB-Sub-Parts.js（测量 TTFB 子部分）、TTFB.js（测量首字节时间）、Third-Party-Impact-by-Domain.js（按域名统计第三方影响）、Validate-Preload-Async-Defer-Scripts.js（校验 preload/async/defer 脚本）、Webfont-Usage-Analyzer.js（Web 字体使用分析器）。
使用方式 脚本在 Chrome DevTools 环境中执行，通过 mcp__chrome-devtools__evaluate_script 运行，输出通过 mcp__chrome-devtools__get_console_message 获取。技能内置常见工作流，例如：完整加载性能审计、服务器/后端性能调查、字体加载优化、文本压缩审计、脚本性能深入分析、资源提示与优先级优化、CSS 优化工作流、SSR/框架性能。每个工作流列出应依次运行的脚本。
决策树 技能提供决策树，根据前一个脚本的结果自动决定后续片段。例如：TTFB.js 结果大于 600ms 时运行 TTFB-Sub-Parts.js；检测到 Service Worker 时运行 Service-Worker-Analysis.js；FCP 大于 1.8s 时运行 Find-render-blocking-resources.js、Critical-CSS-Detection.js、Script-Loading.js；发现阻塞样式表时运行 Critical-CSS-Detection.js；发现未使用的 preload 时建议移除；压缩审计估算节省超过 100KB 时建议在服务器或 CDN 启用 gzip 或 brotli；第三方域名主线程时间超过 250ms 时运行 Long-Animation-Frames-Script-Attribution.js（属于 webperf-interaction）；水合数据超过 100KB 时建议优化策略；LCP 候选缺少 fetchpriority="high" 时建议添加；预取提示超过 10 个时建议精简；关键 CSS 渲染阻塞超过 14KB 时建议内联；bfcache 被阻止时给出针对性修复建议；检测到客户端重定向时建议改用服务器端重定向等。
适用场景 适用于前端性能工程师、Web 开发者、性能审计人员，在 Chrome DevTools 中对页面进行加载性能测量、瓶颈定位与优化验证。可用于 TTFB 调查（DNS/连接/服务器拆解）、渲染阻塞检测、脚本加载策略审计、资源提示与优先级校验、字体加载优化、文本压缩审计、Service Worker 开销分析、SSR 框架水合数据评估等。
限制 该技能依赖 Chrome DevTools 环境及对应的 MCP 工具执行脚本。部分分析受跨域限制影响，例如压缩审计中 corsLimitedAnalysis 为 true 时结果只能作为下限，并建议在可控资源上添加 Timing-Allow-Origin。决策树中的部分建议（如添加 Server-Timing 头、Early Hints、启用 gzip/brotli、子集化字体等）属于优化建议，实际效果取决于具体站点与服务器配置。关于收费、价格、平台支持范围等信息，资料中暂未提供。