perf-analyzer
提供可执行的前端性能审计与优化方案
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：perf-analyzer。 它的用途是：提供可执行的前端性能审计与优化方案 完整的 Skill 内容见：https://321skill.com/skills/perf-analyzer/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“/perf-expert”，它会分析当前项目的前端代码，生成一份详细的性能审计报告，指出关键的性能瓶颈（如过大的字体文件、未优化的图片），并给出具体的修改文件和代码行。或者说：“/perf-expert a11y”，它会专注于可访问性问题，检查ARIA属性、键盘导航和对比度等，并提供修复方案。
介绍
perf-analyzer 是一个专为前端性能优化设计的 Claude Skill，它解决了开发者在面对网站性能瓶颈时，不知从何下手或只能获得泛泛建议的痛点。它通过深入分析代码，直接定位问题根源，如未优化的字体包、导致布局偏移的 CSS 或特定浏览器的兼容性问题，并提供包含具体文件路径、行号和修改代码的精准修复方案。
使用时，开发者只需在 Claude 中调用 /perf-expert 命令，即可获得一份完整的性能审计报告。该报告不仅包含 Lighthouse 分数和核心 Web 指标评估，还会将发现的问题按严重性分类，并给出按优先级排序的、附带预期效果的具体修复步骤。用户也可以指定 /perf-expert performance、/perf-expert a11y 等进行专项审计。
这个 Skill 非常适合前端开发、全栈开发和运维工程师，尤其是那些负责网站性能、用户体验和 SEO 排名的技术人员。对于需要快速提升网站速度、解决棘手的浏览器兼容性问题或系统化建立性能优化流程的团队来说，它是一个强大的效率工具。
建议在项目关键页面（如首页、核心转化页）上线前，或收到性能相关用户反馈时使用。由于它提供的是具体的代码级修改建议，使用者需具备相应的前端技术知识来理解和实施。对于完全静态或无代码控制权的网站，其实用性可能受限。
核心特点
与同类工具相比，它直接提供包含文件路径、行号和具体代码修改的“处方级”修复方案，而非“多喝水”式的泛泛建议；其知识源于真实生产环境中的棘手问题（如Safari特定CSS bug、构建工具副作用），具备实战可靠性。
注意事项
不适合对没有代码修改权限的第三方网站进行深度优化，或用于非前端技术栈（如纯原生App）的性能分析。
常见问题
这个Skill能优化移动端网页性能吗？
可以，它针对的核心Web指标（如LCP, INP, CLS）是衡量移动端体验的关键，给出的优化建议（如图片、字体、JS捆绑）同样适用于移动端。
需要提供网站源代码吗？
是的，该Skill通过分析您提供的代码文件来定位问题，因此需要您将相关前端代码（HTML, CSS, JS）提供给Claude进行分析。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/perf-analyzer/raw/index.md 读取 perf-analyzer 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/perf-analyzer/raw/index.md（查看排版版本）