skills.rest
dseirz-rgb
dseirz-rgbCOMMUNITY
Explore all skills by this author →
GitHub

performance-optimization

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

Updated Dec 29, 2025
Search Tags:#performance#caching#indexing#React#optimization#profiling
One-click install
npx skills add https://github.com/dseirz-rgb/worker --skill performance-optimization-dseirz-rgb
Or copy as Structured Prompt for Agent▼
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

  1. Run a Lighthouse audit for the page and profile components with React Profiler.
  2. Identify the top bottlenecks and implement fixes (e.g., code splitting, memoization, caching, indexing).
  3. 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.

Related Skills

Explore More Software Engineering Skills→
SPeeDoA1SPeeDoA1
6

performance-audit

Audit web application performance with Lighthouse, WebPageTest, and Chrome DevTools.

Community
Intermediate
anshul-garg27anshul-garg27

performance

Measure baselines, profile bottlenecks, and validate performance improvements.

Community
Advanced
KaakatiKaakati
2

performance-profiler

Diagnose performance bottlenecks across Rails, PostgreSQL, Redis, Sidekiq, React Native, and Centrifugo.

Community
Advanced
HollowvynHollowvyn

static-rendering

Pre-generate HTML at build time for non-personalized pages and dynamic routes.

Official
Intermediate