performance-optimization

Diagnose and fix frontend, backend, and database performance bottlenecks through measurement-driven optimization workflows.

Updated Jul 22, 2026
One-click install
npx skills add https://github.com/Chau165/local_skill --skill performance-optimization-chau165
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: performance-optimization
Source: https://github.com/Chau165/local_skill/tree/main/codex/skills/performance-optimization
Command: npx skills add https://github.com/Chau165/local_skill --skill performance-optimization-chau165

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Slow applications, regressions, and poor Core Web Vitals are hard to fix without a disciplined process. This Skill replaces guesswork with a measure-identify-fix-verify-guard workflow so every optimization targets a proven bottleneck instead of adding complexity for no gain. ## Core Features & Use Cases - Measurement-First Workflow: Establish baselines with synthetic tools (Lighthouse, DevTools) and real-user monitoring (web-vitals, CrUX) before changing any code. - Anti-Pattern Fixes: Concrete before/after code for N+1 queries, unbounded fetching, missing indexes, connection pool exhaustion, unoptimized images, unnecessary React re-renders, large bundles, and missing caching. - Regression Guarding: Performance budgets, CI enforcement with bundlesize and Lighthouse CI, plus a detailed reference checklist covering fonts, caching strategies, query plans, and INP optimization. - Use Case: Your API's p95 latency exceeds 200ms. Use this Skill to profile the endpoint, find an N+1 query pattern, fix it with eager loading, verify with EXPLAIN ANALYZE, and add a CI budget to prevent regression. ## Quick Start Ask the AI to profile your slow page or endpoint and apply the performance-optimization workflow to identify and fix the bottleneck 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
How do I fix N+1 queries in my backend API?

Replace per-record queries with a single query using joins or eager loading, such as Prisma's include option. Verify the fix by checking the database query log and confirming response times drop below your p95 target.

How to improve Core Web Vitals scores like LCP and INP?

Measure first with Lighthouse and the web-vitals library to find the real bottleneck. For LCP, optimize hero images with responsive srcset and fetchpriority; for INP, break up long tasks over 50ms using scheduler.yield() or Web Workers.

When should I add a database index for a slow query?

Run EXPLAIN ANALYZE first to read the query plan before adding any index. Index for the query shape with equality columns first, then range or sort columns, and revert the index if the plan does not change.

Does React.memo always improve rendering performance?

No, React.memo only helps expensive components that re-render with identical props. Overusing it adds comparison overhead without benefit, so apply it only where profiling shows wasted renders.

Why is my connection pool exhausted under load?

Pool exhaustion happens when connections are held too long by long transactions, missing awaits, or leaked clients, or when instances multiplied by pool size exceed the database's max_connections. Diagnose what holds connections before resizing, and use a proxy like pgbouncer for serverless.

When should I avoid caching data in my application?

Avoid caching when the underlying call is already fast, when data changes as often as it is read, or when staleness causes correctness bugs like balances or permissions. Caching adds a network hop, invalidation complexity, and stampede risk.