skills.rest
nicorevo
nicorevoCOMMUNITY
Explore all skills by this author →
GitHub

performance-optimization

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

Updated May 21, 2026
Search Tags:#performance#caching#optimization#bundle size#profiling#core web vitals#n+1 queries
One-click install
npx skills add https://github.com/nicorevo/AI-SDLC-Template --skill performance-optimization-nicorevo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: performance-optimization
Source: https://github.com/nicorevo/AI-SDLC-Template/tree/main/.opencode/skills/performance-optimization
Command: npx skills add https://github.com/nicorevo/AI-SDLC-Template --skill performance-optimization-nicorevo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams often optimize blindly, adding complexity without improving what users actually experience. This Skill enforces a measure-first workflow that identifies real bottlenecks in frontend rendering, backend queries, and database access before any code changes. ## Core Features & Use Cases - Measure-First Workflow: A five-step loop (Measure, Identify, Fix, Verify, Guard) using Lighthouse, Chrome DevTools, web-vitals RUM data, and APM tooling to establish baselines and validate fixes. - Anti-Pattern Fixes: Concrete before/after code for N+1 queries, unbounded data fetching, unoptimized images, unnecessary React re-renders, oversized bundles, and missing caching. - Core Web Vitals Targets: Threshold tables for LCP, INP, and CLS plus enforceable performance budgets checked in CI with bundlesize and Lighthouse CI. - Use Case: A product page has a 4.5s LCP. Use this Skill to profile the network waterfall, discover an unoptimized hero image and render-blocking scripts, apply responsive image markup with fetchpriority, and re-measure to confirm the improvement beats run-to-run variance. ## Quick Start Ask the agent to profile the slow page or endpoint, identify the actual bottleneck, and apply a verified fix 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 a backend API?▼

Replace per-record queries with a single query using a join or include clause, such as Prisma's findMany with include: { owner: true }. Detect N+1 patterns by enabling database query logging and counting queries per request.

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

Measure first with Lighthouse for synthetic data and the web-vitals library for real user data. For LCP, optimize hero images with responsive srcset and fetchpriority; for INP, profile long tasks over 50ms on the main thread and reduce heavy JavaScript.

What performance budgets should I enforce in CI?▼

Typical budgets are under 200KB gzipped JavaScript, under 50KB CSS, API p95 response under 200ms, and Lighthouse score of 90 or above. Enforce them with bundlesize and Lighthouse CI (lhci autorun) in your pipeline.

When should I not optimize performance?▼

Do not optimize without profiling evidence of an actual bottleneck. Premature optimization adds complexity that costs more than the performance it gains, and changes that show no measurable improvement over baseline should be reverted.

Why did my optimization show no improvement after deployment?▼

The change may have targeted the wrong bottleneck, or the gain fell within run-to-run measurement variance. Re-measure under identical conditions as the baseline, change one thing at a time, and revert anything that does not beat the noise threshold.

Related Skills

Explore More Software Engineering Skills→
petrkindlmannpetrkindlmann
64

performance-testing

Measure load capacity, response times, and Core Web Vitals in CI pipelines.

Community
Advanced
zinohomezinohome

performance-budget-setter

Defines and enforces performance budgets for bundle size, API latency, database queries, and Core Web Vitals.

Community
Intermediate
djankiesdjankies

reviewing-nextjs-16-patterns

Review Next.js 16 code for security, caching, and migration readiness.

Community
Basic
williamzujkowskiwilliamzujkowski
6

Edge Computing Architecture Designer

Design edge architectures with CDN-integrated deployments and latency optimization.

Community
Advanced