performance-optimization

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

Updated Jul 19, 2026

Search Tags:#performance #caching #optimization #bundle size #profiling #core web vitals #n+1 queries

Ready to run

npx skills add https://github.com/DagimAlemayehuu/AgenticEngineering --skill performance-optimization-dagimalemayehuu

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: performance-optimization
Source: https://github.com/DagimAlemayehuu/AgenticEngineering/tree/main/agentic-engineering/core/dependencies/quality/performance-optimization
Command: npx skills add https://github.com/DagimAlemayehuu/AgenticEngineering --skill performance-optimization-dagimalemayehuu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Slow applications lose users, but optimizing without data wastes effort on the wrong things. This Skill enforces a measure-first workflow that identifies real bottlenecks in frontend rendering, backend APIs, and database queries before any code changes. ## Core Features & Use Cases - Measurement-First Workflow: Follows a five-step loop (measure, identify, fix, verify, guard) using Lighthouse, Chrome DevTools, web-vitals RUM data, and backend timing logs. - Anti-Pattern Fixes: Provides 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: Defines thresholds for LCP, INP, and CLS plus enforceable performance budgets (bundle size, API p95 latency) with CI checks via bundlesize and Lighthouse CI. - Use Case: Your product page has a 5-second LCP. Use this Skill to trace the network waterfall, find render-blocking resources and an oversized hero image, apply responsive image markup with fetchpriority, and verify the improvement against the 2.5s target. ## Quick Start Use the performance-optimization skill to profile this page's load time and fix the biggest bottleneck.

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?▼

N+1 queries are fixed by replacing per-record lookups with a single query using joins or ORM includes, such as Prisma's include option. Detect them by enabling database query logging and counting queries per request.

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

Improve LCP by optimizing hero images with responsive srcset, fetchpriority, and modern formats like AVIF. Improve INP by reducing main-thread long tasks, and fix CLS by setting explicit width and height on images.

What performance budget should I set for a web app?▼

A typical budget is under 200KB gzipped JavaScript, under 50KB CSS, under 200KB per above-the-fold image, and API p95 response time under 200ms. Enforce it in CI with bundlesize and Lighthouse CI.

Does React.memo always improve rendering performance?▼

No. React.memo helps only for expensive components receiving stable props; overusing it adds comparison overhead without benefit. First stabilize object references, then memoize expensive renders and computations with useMemo.

When should I not optimize performance?▼

Avoid optimizing without profiling evidence of a real bottleneck. Premature optimization adds complexity that costs more than the performance gained, so measure first and fix only what data proves matters.