Cloudflare Skills web-perf实战：5步审计工作流快速定位Core Web Vitals性能瓶颈
【免费下载链接】skillsSkills for teaching agents how to build on Cloudflare.项目地址: https://gitcode.com/gh_mirrors/skills14/skills
Cloudflare Skills是一款为 AI Agent 提供 Cloudflare 开发技能包的开源项目，其中的web-perf 技能专门用于审计、诊断和优化网站加载与交互性能。它围绕Core Web Vitals（LCP、CLS、TBT 等核心指标）内置了一套 5 步审计工作流，能让 Agent 像专业性能工程师一样快速定位性能瓶颈，并给出可落地的优化建议。本文带你完整走一遍这套审计流程。
🧭 web-perf 是什么？
web-perf是 Cloudflare Skills 插件中的一个技能模块，其定位如下：
Audit, diagnose, or optimize website loading and interaction performance, Core Web Vitals, and Lighthouse performance scores.
简单来说，它教 Agent 完成三件事：
- 测量——用浏览器性能跟踪采集真实指标
- 诊断——从网络请求、布局偏移、渲染阻塞中找出根因
- 优化——输出按优先级排序的具体修复建议
技能完整定义见 skills/web-perf/SKILL.md。它的核心设计理念是"先验证，再建议"：Agent 会先检查网络请求、DOM 或代码库来证实问题，再给出量化影响的结论，避免"优化图片"这类空泛建议。
📥 如何获取 web-perf 技能
最通用的方式是把仓库克隆到本地，再把技能目录复制给你的 AI Agent：
git clone https://gitcode.com/gh_mirrors/skills14/skills不同 Agent 的技能目录参考 README.md 中的安装表格（Claude Code 为~/.claude/skills/，Cursor 为~/.cursor/skills/等）。项目还通过 mcp.json 内置了 Cloudflare 官方 MCP 服务器，可让 Agent 实时查阅最新文档，避免使用过时的阈值数据。
🚀 5步审计工作流详解
web-perf 技能内置了一份可复制的进度清单（Progress Checklist），将审计拆分为 5 个阶段：
| 阶段 | 名称 | 核心动作 |
|---|---|---|
| Phase 1 | 性能跟踪 | 导航到目标页 + 冷加载录制 |
| Phase 2 | Core Web Vitals 分析 | 解析 LCP、CLS 等关键指标 |
| Phase 3 | 网络分析 | 找出阻塞资源与网络链 |
| Phase 4 | 可访问性快照 | 检查 ARIA 与对比度问题 |
| Phase 5 | 代码库分析 | 检测框架并定位优化点 |
下面逐步拆解每个阶段。
第1步：性能跟踪——采集冷加载指标
Agent 首先导航到目标 URL，然后启动一次带页面重载的性能跟踪（performance_start_trace，开启reload: true以采集冷加载数据）。
💡 关键细节：重载能模拟真实用户的首次访问。若跟踪结果为空，技能会指导 Agent 先用导航命令确认页面加载正常，再检查跟踪响应中可用的 insight 名称。
第2步：Core Web Vitals 分析——对号入座看阈值
这是定位瓶颈的核心环节。Agent 通过performance_analyze_insight提取各项洞察，常见映射关系如下：
| 指标 | 洞察名称 | 关注点 |
|---|---|---|
| LCP | LCPBreakdown | TTFB、资源加载、渲染延迟的分解 |
| CLS | CLSCulprits | 无尺寸图片、注入内容、字体切换导致的布局偏移 |
| 渲染阻塞 | RenderBlocking | 阻塞首绘的 CSS/JS |
| 文档延迟 | DocumentLatency | 服务器响应慢 |
| 网络依赖 | NetworkRequestsDepGraph | 延迟关键资源的请求链 |
技能内置了官方阈值速查表，拿到数值即可直接评级：
| 指标 | 良好 | 需改进 | 较差 |
|---|---|---|---|
| TTFB | < 800ms | < 1.8s | > 1.8s |
| LCP | < 2.5s | < 4s | > 4s |
| INP | < 200ms | < 500ms | > 500ms |
| CLS | < 0.1 | < 0.25 | > 0.25 |
⚡ 值得注意：LCP 与 CLS 的 insight 名称会随 Chrome DevTools 版本变化。技能明确提示 Agent：若名称不匹配，应检查跟踪响应中的
insightSetId来发现当前可用的 insight，而不是盲目重试。
第3步：网络分析——揪出 6 类隐藏杀手
Agent 会列出所有脚本、样式表、文档、字体和图片请求，重点排查：
- 渲染阻塞资源：
<head>中缺少async/defer属性的 JS/CSS - 网络链：因依赖其他资源而延迟发现的请求（如 CSS @import、JS 加载的字体）
- 缺失预加载：首屏字体、Hero 图片、关键脚本未做 preload
- 缓存缺陷：缺少
Cache-Control、ETag等响应头 - 超大包体：未压缩或体积过大的 JS/CSS bundle
- 无效预连接：技能要求 Agent先验证再下结论——检查该源站是否真的有请求，若为零则果断建议删除
第4步：可访问性快照——性能之外的顺手检查
通过take_snapshot获取可访问性树，标记 ARIA ID 缺失/重复、对比度不足（WCAG AA 标准：正文 4.5:1、大字号 3:1）、焦点陷阱等问题。性能与体验一步到位。
第5步：代码库分析——把建议落到工程层面
审计自己的项目时，Agent 会通过配置文件识别技术栈（Vite、Next.js、SvelteKit、Astro 等），然后逐项检查：
- Tree-Shaking 与死代码：
sideEffects配置、整包引入的 lodash/moment - 未使用的 JS/CSS：PurgeCSS、Tailwind
content配置 - Polyfills 膨胀：
@babel/preset-env的 targets 与browserslist是否过宽 - 压缩与混淆：terser/esbuild 是否启用、生产环境 Source Map 是否应外置或关闭
📌 审计第三方网站且无代码库访问权限时，此阶段会自动跳过。
📊 审计报告的最终产出
web-perf 技能规定了标准化的输出结构，报告包含四部分：
- Core Web Vitals 总览——指标、数值、评级的表格
- Top 问题清单——按高/中/低影响排序
- 具体建议——可直接执行的修复方案
- 代码库发现——技术栈与优化机会（无代码权限时省略）
技能还强调"无情地排优先级"：如果你的站点 LCP 已 200ms、CLS 为 0，Agent 会直接告诉你"已经很棒了"，而不是硬凑问题——这正是它区别于泛泛的性能工具的地方。
✅ 总结
| 要点 | 说明 |
|---|---|
| 适用人群 | 需要性能审计的前端开发者、站长、AI Agent 使用者 |
| 核心能力 | 5 步工作流定位 Core Web Vitals 瓶颈 |
| 独特价值 | 先验证再建议、量化影响、跳过 0 收益项 |
| 入口文件 | skills/web-perf/SKILL.md |
| 项目总览 | README.md |
只需把 web-perf 技能装给 Agent，说一句"帮我审计这个站点的性能"，你获得的就不是一份分数，而是一份带证据、带优先级、可动手修复的性能体检报告。搭配项目中的 workers-best-practices 与 wrangler 技能，从诊断到部署优化，整条链路都能交给 Agent 完成。🚀
【免费下载链接】skillsSkills for teaching agents how to build on Cloudflare.项目地址: https://gitcode.com/gh_mirrors/skills14/skills
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考