performance-optimization

Measure bottlenecks, apply targeted fixes, and verify Core Web Vitals improvements.

42|3|Updated May 8, 2026
One-click install
npx skills add https://github.com/KevinKE93/Dev_Agent_OPC --skill performance-optimization-kevinke93
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: performance-optimization
Source: https://github.com/KevinKE93/Dev_Agent_OPC/tree/main/dev-agent/skills/performance-optimization
Command: npx skills add https://github.com/KevinKE93/Dev_Agent_OPC --skill performance-optimization-kevinke93

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves performance bottlenecks by turning guesswork optimization into a measurement-driven workflow that improves load time, responsiveness, and stability without adding unnecessary complexity.

Core Features & Use Cases

  • Measure before optimizing: Establish baselines using synthetic tools (Lighthouse/DevTools) and validate with real-user metrics (Web Vitals/RUM).
  • Identify the real bottleneck: Diagnose whether the slowdown comes from rendering, network/TTFB, JavaScript long tasks, backend query patterns (e.g., N+1), caching gaps, or oversized payloads.
  • Fix, verify, and guard against regressions: Apply targeted fixes (bundle splitting, pagination, image optimization, caching, profiling) and re-measure to confirm improvement, then add monitoring/tests to prevent backsliding.

Example use case: You notice a regression after a release—use this Skill to profile the page, find whether the issue is an LCP image, a slow API/TTFB, or a backend N+1 query, then verify that Core Web Vitals improve.

Quick Start

Use performance-optimization to profile your application, identify the specific bottleneck causing the slowdown, implement the targeted fix, and verify the improvement with before-and-after measurements.

Frequently Asked Questions about performance-optimization

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What is the best way to diagnose backend latency and API bottlenecks?

Diagnose backend latency by profiling API endpoints to identify slow database queries, N+1 patterns, or missing caching layers, then applying fixes and re-measuring response times to confirm improvements.

How do I track down a performance regression after a new release?

Track down performance regressions by profiling the affected page to isolate the cause—such as an LCP image, slow TTFB, or JavaScript long tasks—and verifying the fix restores baseline metrics.

Can I optimize performance for high-traffic applications with large datasets?

Yes, you can optimize high-traffic applications handling large datasets by diagnosing query patterns, implementing pagination and caching strategies, and validating real-user metrics to ensure stability.

How do I identify if JavaScript long tasks are causing rendering issues?

Identify JavaScript long tasks causing rendering issues by using synthetic profiling tools like DevTools to detect main thread blockages, applying bundle splitting, and re-measuring to confirm smoother rendering.

Does this approach work for both frontend load times and backend query problems?

Yes, this approach handles both frontend load times and backend query problems by establishing baselines, categorizing issues like network waterfalls or N+1 queries, and verifying improvements across the stack.