skills.rest
raishoemi
raishoemiCOMMUNITY
Explore all skills by this author →
GitHub

performance-optimization

Diagnose and fix frontend and backend performance bottlenecks using measurement-driven profiling workflows.

Updated Jul 1, 2026
Search Tags:#performance#caching#react#bundle size#profiling#lighthouse#core web vitals
One-click install
npx skills add https://github.com/raishoemi/traffic-sim-v2 --skill performance-optimization-raishoemi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: performance-optimization
Source: https://github.com/raishoemi/traffic-sim-v2/tree/main/.github/skills/performance-optimization
Command: npx skills add https://github.com/raishoemi/traffic-sim-v2 --skill performance-optimization-raishoemi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Slow applications hurt user experience and conversions, but optimizing without data wastes effort on the wrong things. This Skill enforces a measure-first workflow so you fix the actual bottleneck instead of guessing. ## Core Features & Use Cases - Measurement-First Workflow: A five-step process (Measure, Identify, Fix, Verify, Guard) combining synthetic tools like Lighthouse with real-user monitoring via the web-vitals library. - Anti-Pattern Fixes: Concrete code examples for N+1 queries, unbounded data fetching, unoptimized images, unnecessary React re-renders, large bundles, and missing caching. - Performance Budgets & CI Enforcement: Budgets for bundle size, API latency, and Core Web Vitals (LCP, INP, CLS) with bundlesize and Lighthouse CI checks. - Use Case: Your React app's LCP is 5 seconds. Use this Skill to profile the network waterfall, identify render-blocking resources and oversized hero images, apply responsive image markup, and verify the improvement against Core Web Vitals thresholds. ## Quick Start Ask the AI to profile your app's slow page load and fix the identified bottleneck following the performance optimization workflow.

Frequently Asked Questions about performance-optimization

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

FAQPage Schema
How do I improve Core Web Vitals scores like LCP and INP?▼

Improve Core Web Vitals by first measuring with Lighthouse or the web-vitals library, then fixing the identified bottleneck. For LCP, optimize hero images with responsive srcset and fetchpriority; for INP, reduce long main-thread tasks and heavy JavaScript.

How to fix N+1 queries in a backend API?▼

Fix N+1 queries by replacing per-record lookups with a single query using joins or ORM include statements. For example, use findMany with include: { owner: true } instead of fetching each owner inside a loop.

What is a good performance budget for a web app?▼

A typical budget is under 200KB gzipped JavaScript, under 50KB CSS, API responses under 200ms at p95, and a Lighthouse score of 90 or above. Enforce budgets in CI with bundlesize and Lighthouse CI.

When should I use React.memo and useMemo?▼

Use React.memo for expensive child components that re-render unnecessarily and useMemo for expensive computations tied to stable dependencies. Overusing them adds complexity, so profile first to confirm re-renders are the actual bottleneck.

Why is premature optimization discouraged?▼

Premature optimization adds complexity without proven benefit because the assumed bottleneck is often wrong. Measure first with profiling tools, fix only what the data shows, and verify the improvement with before-and-after numbers.

Related Skills

Explore More Software Engineering Skills→
josuenavarroaguadojosuenavarroaguado

performance-optimization

Diagnose and fix web performance bottlenecks using Lighthouse, RUM, and profiling data.

Community
Advanced
zinohomezinohome

performance-budget-setter

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

Community
Intermediate
dallascrilleydallascrilley

Test-Driven Development (TDD)

Enforces red-green-refactor test-first workflow for writing production code.

Community
Intermediate
vecearvecear

caching-cdn-strategy-planner

Design multi-layer caching strategies with CDN, edge, and server-side invalidation workflows.

Community
Advanced