performance-optimization

Name: performance-optimization
Availability: InStock
Author: dseirz-rgb

Diagnose performance bottlenecks in React, API endpoints, and database queries.

Updated Dec 29, 2025

Search Tags:#performance #caching #indexing #React #optimization #profiling

Ready to run

npx skills add https://github.com/dseirz-rgb/worker --skill performance-optimization-dseirz-rgb

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: performance-optimization
Source: https://github.com/dseirz-rgb/worker/tree/main/.kiro/skills/performance-optimization
Command: npx skills add https://github.com/dseirz-rgb/worker --skill performance-optimization-dseirz-rgb

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps teams diagnose and fix performance bottlenecks across React frontend, API endpoints, and database queries, turning slow experiences into responsive interfaces.

Core Features & Use Cases

Measurement-driven diagnosis: use Lighthouse and React Profiler to quantify bottlenecks before optimizing.
Frontend, API, and database optimizations: apply code splitting, memoization, caching, and indexing strategies to reduce render times and latency.
Real-world scenario: when a page loads slowly, use this Skill to locate the bottleneck and implement targeted improvements, such as avoiding N+1 queries or heavy re-renders.

Quick Start

Run a Lighthouse audit for the page and profile components with React Profiler.
Identify the top bottlenecks and implement fixes (e.g., code splitting, memoization, caching, indexing).
Re-measure to confirm improvements and iterate.

Frequently Asked Questions about performance-optimization

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

FAQPage Schema

How do I diagnose and fix slow React app performance?▼

Profile slow components with React Profiler to identify bottlenecks, then apply memoization and code splitting to eliminate unnecessary re-renders and reduce initial load times.

What is the best way to reduce high API latency in web applications?▼

Reduce high API latency by profiling the endpoints to locate slow queries, then applying caching strategies and proper database indexing to optimize data access and speed up response times.

How do I fix N+1 queries causing slow database access?▼

Fix N+1 queries by profiling your database access to locate the bottleneck, then implementing proper database indexing and caching strategies to optimize query execution and reduce latency.

Can I use Lighthouse and React Profiler for measurement-driven optimization?▼

Yes, Lighthouse audits page load metrics while React Profiler isolates component bottlenecks, establishing a measurement-driven baseline to validate that code splitting and memoization deliver real gains.

When should I use memoization vs code splitting for sluggish interactions?▼

Use memoization to prevent heavy re-renders during sluggish interactions, and apply code splitting to reduce slow initial loads by deferring non-critical JavaScript execution until components mount.