网站性能卡成狗？这个 Skill 让 AI 秒变性能调优工程师

每次遇到页面加载慢、LCP 爆表、CLS 乱跳，你是不是也只能打开 DevTools，对着 Network 面板一脸懵？别慌，今天给你挖到一个能直接把 AI 变成「前端性能审计员」的开源 Skill：webperf-snippets。

它是什么？

webperf-snippets 是一套面向浏览器 DevTools 的 JavaScript 性能审计脚本合集，同时被打包成了 Agent Skill。作者是 performance 社区老炮 nucliweb，GitHub 上已经拿了 1,400+ Star，并且持续更新。

简单说，它就是把你平时在 DevTools 里手动跑的那些性能检查，整理成了可复用、可自动化的 Skill。AI 助手可以直接调用，替你完成从发现问题到定位根因的全过程。

能帮你做什么？

这套 Skill 覆盖了前端性能的核心战场：

• Core Web Vitals：LCP、CLS、INP 一键测量，还带诊断流程
• Loading 性能：TTFB、FCP、render-blocking resources、字体优化
• Interaction 性能：Long Animation Frames、scroll jank、主线程阻塞
• Media 优化：图片/视频审计、懒加载验证、SVG 位图检测
• 网络质量：自适应加载策略，根据 2G/3G/4G 自动建议压缩方案

最爽的是它还带了 decision trees。比如 TTFB 超过 600ms，就自动跑子部分分析；FCP 超过 1.8s，就转去查 render-blocking。不像普通脚本跑完就完事，它会根据结果继续往下挖。

怎么用？

支持 Claude Code、Cursor、OpenCode、Gemini CLI 等主流 AI 编程工具。装起来也简单：

npx skills add nucliweb/webperf-snippets

装完之后，直接跟 AI 说「审计这个页面的 Core Web Vitals」或「为什么我的 LCP 这么慢」，它就会自动调用对应的 Skill 跑审计，输出带根因分析的优化建议。

如果你想在 CI 里自动化跑性能检查，项目里还自带一个基于 Playwright 的 CLI，不用开 DevTools 也能批量测：

npx webperf-snippets https://your-site.com --budget-lcp 2500 --budget-cls 0.1

谁适合用？

• 前端工程师做性能优化
• QA 做性能验收
• AI 编程助手需要「专业眼睛」时
• 想给 CI 加性能预算的项目

总之，如果你还在手动截图 DevTools 发给 ChatGPT 问「为什么慢」，那这个 Skill 就是为你省时间的。

GitHub 地址：https://github.com/nucliweb/webperf-snippets

GitHub: https://github.com/nucliweb/webperf-snippets