Claude Code Performance Skill for Initial Page Resource Budgets
Review the loading order and sizes of images, scripts, and fonts. Define a repeatable budget for resources that affect the first visible view.
中文Install in Claude Code
Use Claude Code with the pinned skill and a browser that records network requests. Bring a page and repeatable network conditions.
- Get the complete `cli-tool/components/skills/development/performance` directory from the pinned GitHub checkout.
- Copy it under the target project's `.claude/skills/`. Confirm `.claude/skills/performance/SKILL.md`, open Claude Code at the project root, and call `/performance`.
Example task
A fictional event home page loads a 900 KB hero and two below-the-fold photos. Plan hero size and priority, and check the other photos separately.What to check
Expect an initial resource list and loading priorities. Compare image bytes and request order on rerun and keep conclusions tied to the recording.
Original SKILL.md on GitHub · Updated
Frequently asked question
Should every image be preloaded?
Identify resources that affect the initial view. Load other images when they are needed so priority matches what users see.