Cloudflare Skills web-perf实战5步审计工作流快速定位Core Web Vitals性能瓶颈【免费下载链接】skillsSkills for teaching agents how to build on Cloudflare.项目地址: https://gitcode.com/gh_mirrors/skills14/skillsCloudflare Skills是一款为 AI Agent 提供 Cloudflare 开发技能包的开源项目其中的web-perf 技能专门用于审计、诊断和优化网站加载与交互性能。它围绕Core Web VitalsLCP、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 Agentgit 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 2Core 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提取各项洞察常见映射关系如下指标洞察名称关注点LCPLCPBreakdownTTFB、资源加载、渲染延迟的分解CLSCLSCulprits无尺寸图片、注入内容、字体切换导致的布局偏移渲染阻塞RenderBlocking阻塞首绘的 CSS/JS文档延迟DocumentLatency服务器响应慢网络依赖NetworkRequestsDepGraph延迟关键资源的请求链技能内置了官方阈值速查表拿到数值即可直接评级指标良好需改进较差TTFB 800ms 1.8s 1.8sLCP 2.5s 4s 4sINP 200ms 500ms 500msCLS 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/CSSPurgeCSS、Tailwindcontent配置Polyfills 膨胀babel/preset-env的 targets 与browserslist是否过宽压缩与混淆terser/esbuild 是否启用、生产环境 Source Map 是否应外置或关闭 审计第三方网站且无代码库访问权限时此阶段会自动跳过。 审计报告的最终产出web-perf 技能规定了标准化的输出结构报告包含四部分Core Web Vitals 总览——指标、数值、评级的表格Top 问题清单——按高/中/低影响排序具体建议——可直接执行的修复方案代码库发现——技术栈与优化机会无代码权限时省略技能还强调无情地排优先级如果你的站点 LCP 已 200ms、CLS 为 0Agent 会直接告诉你已经很棒了而不是硬凑问题——这正是它区别于泛泛的性能工具的地方。✅ 总结要点说明适用人群需要性能审计的前端开发者、站长、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），仅供参考