home / skills / harborgrid-justin / lexiflow-premium / performance-profiling-at-scale

performance-profiling-at-scale skill

safe

/frontend/.github-skills/performance-profiling-at-scale

This skill guides rigorous performance profiling for large React apps, delivering root-cause artifacts and measurable p95/p99 render-time improvements.

npx playbooks add skill harborgrid-justin/lexiflow-premium --skill performance-profiling-at-scale

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

912 B

---
name: performance-profiling-at-scale
description: Conduct rigorous, statistically grounded performance profiling for large React applications.
---

# Performance Profiling at Scale (React 18)

## Summary

Conduct rigorous, statistically grounded performance profiling for large React applications.

## Key Capabilities

- Isolate render hotspots via flame graphs and commit profiling.
- Use synthetic benchmarks to identify tail-latency regressions.
- Quantify memoization impact with variance-aware metrics.

## PhD-Level Challenges

- Design controlled experiments with confounding factors minimized.
- Use A/B benchmarking with statistical significance thresholds.
- Build performance budgets tied to user-centric KPIs.

## Acceptance Criteria

- Provide profiling artifacts and a root-cause analysis.
- Show measurable improvements in p95/p99 render times.
- Document a reproducible profiling protocol.

Overview

This skill performs rigorous, statistically grounded performance profiling for large React applications. It focuses on isolating render hotspots, measuring tail-latency, and quantifying the impact of optimizations. The goal is reproducible analysis that drives measurable improvements in p95/p99 render times.

How this skill works

The skill combines commit profiling, flame graphs, and synthetic benchmarks to pinpoint expensive renders and asynchronous bottlenecks. It runs controlled A/B experiments with variance-aware metrics and significance testing to separate signal from noise. Outputs include profiling artifacts, root-cause analysis, and a documented protocol for reproducible measurement.

When to use it

When intermittent UI jank or high p95/p99 render times impact user experience
Before and after large refactors to validate performance impact
When deciding where to apply memoization, virtualization, or rendering splits
To build performance budgets tied to user-centric KPIs
When deploying optimizations that require statistical validation across environments

Best practices

Run benchmarks on representative hardware and workloads to avoid sampling bias
Design experiments that control confounding variables and use clear A/B splits
Prefer tail-focused metrics (p95/p99) and report variance, not just means
Collect commit-level traces and flame graphs to link symptoms to component lists
Automate the profiling protocol so results are reproducible and auditable

Example use cases

Isolating a component subtree that triggers repeated costly commits under heavy input load
Measuring the real-world benefit of adding React.memo to a set of components
Detecting tail-latency regressions after upgrading React or changing rendering strategy
Establishing a performance budget for interactive flows and gating PRs by it
Producing a root-cause report that links a regression to specific rendering code paths

FAQ

Will this work for server-side rendering?

Yes. The approach adapts to SSR by profiling server render time and hydration costs, but you should measure both server and client phases separately.

How do you ensure statistical validity?

Use repeated runs, control groups, and significance tests on tail metrics. Report confidence intervals and effect sizes, not just p-values.