Claude Code performance 技能：控制首屏图片、脚本和字体的加载预算
EnglishClaude Code 安装步骤
- 从固定版本 GitHub 工作副本获取完整的 `cli-tool/components/skills/development/performance` 目录。
- 将目录放入目标项目的 `.claude/skills/`，确认 `.claude/skills/performance/SKILL.md` 存在，再从项目根目录启动 Claude Code 并输入 `/performance`。
中文摘要
从首屏资源和浏览器加载顺序检查页面性能，识别阻塞渲染或不必要的下载。适合给内容页建立可复测的资源预算。
SKILL.md 中文导读
可复现示例
虚构的活动主页初始下载一张 900 KB 首图和两张下方照片。请规划首图尺寸与优先级，并把非首屏照片的请求与首屏分开检查。工作步骤
- 记录首屏中实际影响渲染的资源和大小。
- 优先处理关键图像、脚本和字体，按同一条件重测并对照预算。
验收方法
验收应给出首屏资源清单和各自优先级。重测时比较图片下载量及加载顺序，避免仅凭一次评分宣称改善。
GitHub 原文 · 更新日期
适用环境
Claude Code、固定版本技能与能录制网络请求的浏览器。准备待测页面和可重复的网络条件。
常见问题
每张图片都适合预加载吗？
先确定会影响首屏的关键资源。其他图片按实际显示时机加载，让优先级与可见内容一致。