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