Skip to content
arch-performance-optimization logo

Performance Optimization Workflow

arch-performance-optimization

Use when analyzing and improving performance for database queries, API endpoints, or frontend rendering.

SKILL.md

Full skill instructions

Performance Optimization Workflow

When to Use This Skill

  • Slow API response times
  • Database query optimization
  • Frontend rendering issues
  • Memory usage concerns
  • Scalability planning

Pre-Flight Checklist

  • Identify performance bottleneck
  • Gather baseline metrics
  • Determine acceptable thresholds
  • Plan measurement approach

Performance Analysis Framework

Step 1: Identify Bottleneck Type

Performance Issue
├── Database (slow queries, N+1)
├── API (serialization, processing)
├── Network (payload size, latency)
└── Frontend (rendering, bundle size)

Step 2: Measure Baseline

# API response time
curl -w "@curl-format.txt" -o /​dev/​null -s "http://api/​endpoint"

# Database query time (SQL Server)
SET STATISTICS TIME ON;
SELECT * FROM Table WHERE ...;

# Frontend bundle analysis
npm run build -- --stats-json
npx webpack-bundle-analyzer stats.json

Database Optimization

N+1 Query Detection

// :x: N+1 Problem
var employees = await repo.GetAllAsync();
foreach (var emp in employees)
{
    // Each iteration queries database!
    Console.WriteLine(emp.Department.Name);
}

// :white_check_mark: Eager Loading
var employees = await repo.GetAllAsync(
    e => e.CompanyId == companyId,
    ct,
    e => e.Department,      // Include Department
    e => e.Manager          // Include Manager
);

Query Optimization

// :x: Loading all columns
var employees = await repo.GetAllAsync();
var names = employees.Select(e => e.Name);

// :white_check_mark: Projection
var names = await repo.GetAllAsync(
    q => q.Where(e => e.IsActive)
          .Select(e => e.Name));

Index Recommendations

-- Frequently filtered columns
CREATE INDEX IX_Employee_CompanyId ON Employees(CompanyId);
CREATE INDEX IX_Employee_Status ON Employees(Status);

-- Composite index for common queries
CREATE INDEX IX_Employee_Company_Status
ON Employees(CompanyId, Status)
INCLUDE (FullName, Email);

-- Full-text search index
CREATE FULLTEXT INDEX ON Employees(FullName, Email);

Paging Patterns

// :x: Loading all then paging in memory
var all = await repo.GetAllAsync();
var page = all.Skip(skip).Take(take);

// :white_check_mark: Database-level paging
var page = await repo.GetAllAsync(
    (uow, q) => q
        .Where(e => e.IsActive)
        .OrderBy(e => e.Id)
        .Skip(skip)
        .Take(take));

API Optimization

Parallel Operations

// :x: Sequential
var users = await userRepo.GetAllAsync();
var companies = await companyRepo.GetAllAsync();
var settings = await settingsRepo.GetAllAsync();

// :white_check_mark: Parallel (Tuple Await)
var (users, companies, settings) = await (
    userRepo.GetAllAsync(),
    companyRepo.GetAllAsync(),
    settingsRepo.GetAllAsync()
);

Response Size

// :x: Returning entire entity
return new Result { Employee = employee };

// :white_check_mark: Return only needed fields
return new Result
{
    Id = employee.Id,
    Name = employee.FullName,
    Status = employee.Status
};

Caching

// Static data caching
private static readonly ConcurrentDictionary<string, LookupData> _cache = new();

public async Task<LookupData> GetLookupAsync(string key)
{
    if (_cache.TryGetValue(key, out var cached))
        return cached;

    var data = await LoadFromDbAsync(key);
    _cache.TryAdd(key, data);
    return data;
}

Frontend Optimization

Bundle Size

// :x: Import entire library
import _ from 'lodash';

// :white_check_mark: Import specific functions
import { debounce } from 'lodash-es/​debounce';

Lazy Loading

// :white_check_mark: Lazy load routes
const routes: Routes = [
  {
    path: 'feature',
    loadChildren: () => import('./​feature/​feature.module')
      .then(m => m.FeatureModule)
  }
];

Change Detection

// :white_check_mark: OnPush for performance
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush
})

// :white_check_mark: Track-by for lists
trackByItem = this.ngForTrackByItemProp<Item>('id');

// Template
@for (item of items; track trackByItem)

Virtual Scrolling

// For large lists
import { CdkVirtualScrollViewport } from '@angular/​cdk/​scrolling';

<cdk-virtual-scroll-viewport itemSize="50">
  @for (item of items; track item.id) {
    <div class="item">{{ item.name }}</​div>
  }
</​cdk-virtual-scroll-viewport>

Background Job Optimization

Bounded Parallelism

// :x: Unbounded
await items.ParallelAsync(ProcessAsync);

// :white_check_mark: Bounded
await items.ParallelAsync(ProcessAsync, maxConcurrent: 5);

Batch Processing

// :x: One at a time
foreach (var item in items)
    await repo.UpdateAsync(item);

// :white_check_mark: Batch update
await repo.UpdateManyAsync(items, dismissSendEvent: true);

Performance Monitoring

Logging Slow Operations

var sw = Stopwatch.StartNew();
var result = await ExecuteOperation();
sw.Stop();

if (sw.ElapsedMilliseconds > 1000)
    Logger.LogWarning("Slow operation: {Ms}ms", sw.ElapsedMilliseconds);

Database Query Logging

// In DbContext configuration
optionsBuilder.LogTo(
    Console.WriteLine,
    new[] { DbLoggerCategory.Database.Command.Name },
    LogLevel.Information);

Performance Checklist

Database

  • Indexes on filtered columns
  • Eager loading for relations
  • Projection for partial data
  • Paging at database level
  • No N+1 queries

API

  • Parallel operations where possible
  • Response DTOs (not entities)
  • Caching for static data
  • Pagination for lists

Frontend

  • Lazy loading for routes
  • OnPush change detection
  • Track-by for lists
  • Virtual scrolling for large lists
  • Tree-shaking imports

Background Jobs

  • Bounded parallelism
  • Batch operations
  • Paged processing
  • Appropriate scheduling

Anti-Patterns to AVOID

:x: SELECT * in production

var all = await context.Table.ToListAsync();

:x: Synchronous I/​O

var result = asyncOperation.Result;  // Blocks thread

:x: Unbounded result sets

await repo.GetAllAsync();  // Could be millions

:x: Repeated database calls in loops

foreach (var id in ids)
    await repo.GetByIdAsync(id);  // N queries

Verification Checklist

  • Baseline metrics recorded
  • Bottleneck identified and addressed
  • Changes measured against baseline
  • No new performance issues introduced
  • Monitoring in place

More skills from majiayu000

xiaohongshu logo
majiayu000/claude-arsenal

xiaohongshu

xiaohongshu

286 148
View
agent-task-conductor logo
majiayu000/claude-skill-registry

agent-task-conductor

Conduct multi-agent task orchestration and workflow coordination.

663 1
View
conductor-setup logo
majiayu000/claude-skill-registry

conductor-setup

Initialize project with Conductor artifacts (product definition,

663 1
View
animation-designer logo
majiayu000/claude-skill-registry

animation-designer

Expert in web animations, transitions, and motion design using Framer Motion and CSS

663 1
View
diagramming logo
majiayu000/claude-skill-registry

diagramming

Creates Mermaid and ASCII diagrams for flowcharts, architecture, ERDs, state machines, mindmaps, and more. Use when user mentions diagram, flowchart, mermaid, ASCII diagram, text diagram, terminal diagram, visualize, C4, mindmap, architecture diagram, sequence diagram, ERD, or needs visual docume...

663 1
View
h3-pg logo
majiayu000/claude-skill-registry-data

h3-pg

PostgreSQL bindings for H3 hexagonal grid system. Use when working with H3 cells in Postgres, including spatial indexing, geometry/geography integration, and raster analysis.

23 1
View
conductor-development logo
majiayu000/claude-skill-registry

conductor-development

Context-Driven Development skill for projects using Conductor. Use this skill when you detect a `conductor/` directory in the project, when working on tasks defined in a `plan.md` file, or when the user asks about tracks, specs, or plans. Automatically applies TDD workflow, tracks task completion...

663 1
View
conductor-status logo
majiayu000/claude-skill-registry

conductor-status

Display project status, active tracks, and next actions

663 1
View
dockerization logo
majiayu000/claude-skill-registry

dockerization

Official Stakpak application containerization standard operating procedure, a step-by-step guidline to properly dockerize applications. This is a rule book curated by the Stakpak Team.

663 1
View

Popular AI tools

Kaiber logo
Video

Kaiber

Generate, edit, and beat-sync AI video with leading models in one workspace.

Paid
View
Vimcal logo
Productivity

Vimcal

The world's fastest calendar for remote work

Free
View

Transform Your Design with AI Designer by ImgCreator.ai

Freemium
View
Akool AI logo
Content & writing

Akool AI

Revolutionizing Video Production with AI-Powered Creativity

Paid
View

Extend an image past the frame and let AI fill the new aspect ratio.

Freemium
View
StarByFace logo
Security

StarByFace

Discover your celebrity doppelgänger with StarByFace!

Free
View
C

ChainClarity explains 700+ crypto whitepapers in plain English, with layered summaries, comparisons, research tools, alerts, and a $4.99 Pro plan.

Freemium
View
Opus Clip logo
Coding & apps

Opus Clip

Opus.ai: Revolutionize Your Web Experience

Free
View