performance-optimization
by addyosmaniThe performance-optimization skill helps you measure first, find the real bottleneck, fix it, and verify results. Use it when performance requirements exist, you suspect a regression, or Core Web Vitals, load times, or interaction latency need improvement.
This skill scores 84/100, which means it is a solid listing candidate for Agent Skills Finder. Directory users get a clearly triggerable, non-placeholder optimization workflow with enough substance to support a real install decision, though they should expect a focused performance-tuning skill rather than a broad systems-performance toolkit.
- Explicit trigger conditions cover performance requirements, regressions, Core Web Vitals, and profiling results, reducing guesswork about when to use it.
- The workflow is concrete and measurement-led (measure, identify, fix, verify), which gives agents a usable execution path instead of generic advice.
- The document includes specific Core Web Vitals targets and a clear “when not to use” section, improving decision value and trustworthiness.
- Repository evidence shows no support files, scripts, or references, so agents may need to rely on the markdown guidance alone.
- The available evidence suggests a narrow optimization workflow; it may be less helpful for teams needing deeper implementation patterns, tool-specific commands, or platform-specific performance playbooks.
Overview of performance-optimization skill
What the performance-optimization skill does
The performance-optimization skill is a measurement-first workflow for diagnosing and improving app speed without defaulting to guesswork. Its core job is simple: help you profile first, identify the real bottleneck, fix that bottleneck, and verify the result. That makes it more useful than a generic “make this faster” prompt when you need disciplined performance work rather than broad advice.
Who should install it
This performance-optimization skill is best for developers, AI-assisted coders, and technical leads working on web apps, frontends, APIs, or data-heavy features where latency, load time, or Core Web Vitals matter. It is a strong fit if you already have a symptom or requirement: slow interactions, poor LCP/INP/CLS, large bundle size, regressions after a change, or traffic-sensitive code paths.
Real decision criteria before installing
Install performance-optimization if you want a repeatable optimization process, not magic fixes. The main differentiator is that it explicitly warns against premature optimization and centers evidence. If you want instant framework-specific tuning recipes without measuring, this skill is probably too disciplined for that use case. If you need a method for deciding what to optimize first, it is a good fit.
How to Use performance-optimization skill
Install context and where to read first
To use the performance-optimization skill, add the parent skill collection in your AI coding environment, then invoke the skill by name in a task that includes measurable performance goals. Start by reading skills/performance-optimization/SKILL.md; this repository path matters because the skill is self-contained and does not ship extra helper scripts or references. That means your inputs drive quality more than hidden tooling does.
What input the skill needs to work well
The best performance-optimization usage starts with evidence, not a vague complaint. Provide:
- affected page, route, feature, or endpoint
- current metric values or symptoms
- how you measured them
- environment details: device, browser, network, dataset size, production vs local
- recent changes if you suspect a regression
- constraints such as “no framework migration” or “must preserve SEO”
Strong input:
Use
performance-optimizationfor our product page. Mobile LCP is 4.1s in Chrome, CLS is 0.18, and users report delayed hero rendering on 4G. We recently added a carousel and a third-party review widget. Please identify likely bottlenecks, suggest measurement steps, rank fixes by expected impact, and tell me how to verify improvement.
Weak input:
Make my site faster.
How to turn a rough goal into a usable prompt
A good performance-optimization guide prompt usually follows this structure:
- State the target metric or user complaint.
- Give baseline numbers.
- Name the scope.
- Share code or architecture context.
- Ask for prioritized fixes and verification steps.
Example:
Apply the
performance-optimization skillto our React checkout flow. INP is ~320ms on mid-range Android during quantity changes. The page renders a large cart list, coupon validation runs on input, and analytics fire on every interaction. Help me measure the hot path, isolate the interaction bottleneck, propose code-level fixes, and define a before/after verification checklist.
Practical workflow and output expectations
In practice, use the skill in four passes: baseline, bottleneck isolation, fix design, and verification. Ask it to separate hypotheses from confirmed findings. If you already profiled the issue, paste traces, Lighthouse output, DevTools findings, or flamegraph summaries. If you have not measured yet, ask the skill to design the profiling plan first. This is the main quality lever in performance-optimization install decisions: the skill is most valuable when paired with real measurements and repository context, not as a replacement for them.
performance-optimization skill FAQ
Is this better than a normal “optimize performance” prompt?
Usually yes, if your goal is reliable decision-making. The performance-optimization skill gives a stronger default workflow: measure, identify, fix, verify. Ordinary prompts often jump straight to caching, memoization, lazy loading, or code splitting whether or not those are the real bottlenecks.
Is it only for web performance and Core Web Vitals?
No, but the skill clearly emphasizes user-facing performance signals and explicitly references Core Web Vitals targets. It is most naturally suited to frontend and page-speed work, yet the same process also helps with backend latency, data processing slowdowns, or regressions—as long as you can define what “slow” means and measure it.
When should you not use performance-optimization?
Do not use performance-optimization for Performance Optimization as your first move when no evidence of a problem exists. If there is no slowdown, no budget, no SLA, and no user complaint, the skill itself argues against optimization work. It is also a weak fit if you want benchmarking automation or framework-specific scripts included out of the box, because the repository does not provide those support assets.
How to Improve performance-optimization skill
Give sharper evidence, not broader requests
The fastest way to improve performance-optimization output quality is to provide narrower scope and clearer metrics. “Checkout page on mobile, LCP 3.8s, likely image and font issue” will outperform “entire app is slow.” Include screenshots, profiler notes, bundle reports, request waterfalls, or recent commits when possible. The skill can reason much better when it has observable facts.
Watch for common failure modes
The biggest failure mode is asking for fixes before confirming the bottleneck. Another is mixing many symptoms into one request: startup slowness, interaction lag, and API latency often need different investigations. Also avoid requesting “all possible optimizations.” That leads to generic lists instead of prioritized action. Ask for ranked fixes by expected impact, implementation cost, and verification method.
Iterate after the first answer
After the first pass, return with results: “We deferred the widget script and LCP improved from 4.1s to 3.2s, but INP is unchanged.” This lets the performance-optimization skill move from theory to guided iteration. The best workflow is cyclical: baseline, change one meaningful variable, remeasure, then ask for the next-highest-impact improvement rather than applying ten speculative fixes at once.