``` **Why This Is Slow:** - Spring function has internal calculations - Called 3 times with identical parameters - Remotion can't optimize duplicate calls - Wastes 20-30ms per scene **Solution:** ```typescript // ✅ OPTIMIZED: Calculate once, reuse const progress = spring({ frame, fps, config: SMOOTH });

``` **Expected Improvement:** - Per scene: 20-30ms faster - Overall: 145ms → 125ms (15% faster) - Affects Scenes 1, 3, 4 **Implementation Time:** 10 minutes --- ### MEDIUM (Moderate Performance Impact) #### 4. Component Not Memoized **Impact:** 🟡 10-15ms **Location:** Scene components **Severity:** Medium - Minor unnecessary re-renders **Problem:** ```typescript // Scene components re-render even when props haven't changed function Scene1() { ... } function Scene2() { ... } ``` **Solution:** ```typescript import { memo } from 'react'; const Scene1 = memo(() => { ... }); const Scene2 = memo(() => { ... }); ``` **Expected Improvement:** - 10-15ms per scene - Overall: 10% faster in complex compositions **Implementation Time:** 5 minutes --- ### LOW (Minor Performance Impact) #### 5. Array Creation in Render **Impact:** 🟢 2-5ms **Location:** `Scene4.tsx:23` **Severity:** Low - Negligible but fixable **Problem:** ```typescript // Array recreated every frame {Array(50).fill(0).map((_, i) => )} ``` **Solution:** ```typescript // Reuse array reference const ELEMENTS = Array.from({ length: 50 }, (_, i) => i); {ELEMENTS.map((i) => )} ``` **Expected Improvement:** 2-5ms (minimal but good practice) **Implementation Time:** 2 minutes --- ## Optimization Implementation Plan ### Phase 1: Critical Fixes (15 minutes) — 55% improvement 1. Replace Math.random() with seeded random in Scene 2 - Expected: 285ms → 125ms ### Phase 2: High Priority (15 minutes) — 20% additional improvement 1. Optimize product.png to JPEG (5 min) - Expected: 95ms → 85ms in Scene 3 2. Extract spring calculations (10 min) - Expected: 145ms → 125ms overall ### Phase 3: Medium Priority (10 minutes) — 10% additional improvement 1. Memoize scene components - Expected: 10-15ms improvement ### Phase 4: Low Priority (5 minutes) — 2-5% improvement 1. Extract array constants - Expected: 2-5ms improvement **Total Implementation Time:** 45 minutes **Total Expected Improvement:** 60-70% faster renders --- ## Before/After Projections | Metric | Before | After Phase 1 | After Phase 2 | After All | Target | |--------|--------|---------------|---------------|-----------|--------| | Scene 2 | 285ms | 125ms | 115ms | 110ms | < 150ms ✅ | | Scene 3 | 95ms | 95ms | 85ms | 80ms | < 100ms ✅ | | Overall Avg | 145ms | 105ms | 90ms | 85ms | < 100ms ✅ | | Total Render | 36min | 22min | 19min | 18min | < 20min ✅ | **After all optimizations:** All targets met! 🎉 --- ## Performance Validation ### Benchmarking Commands ```bash # Test single frame render time npx remotion still src/index.tsx VideoName --frame=150 # Profile specific scene (Scene 2) npx remotion still src/index.tsx VideoName --frame=225 # Benchmark full render (first 100 frames) time npx remotion render src/index.tsx VideoName test.mp4 --frames=0-100 # Full production render with timing time npx remotion render src/index.tsx VideoName output.mp4 ``` ### Performance Targets | Composition Type | Target | Current | Status | |-----------------|--------|---------|--------| | Simple scenes | < 50ms | 75ms (Scenes 1,4) | 🟡 Acceptable | | Moderate scenes | < 100ms | 145ms avg | 🔴 Over target | | Complex scenes | < 150ms | 285ms (Scene 2) | 🔴 Over target | **After optimizations:** All scenes should meet targets --- ## Code Quality Checks ✅ **Good Patterns Found:** - Constants extracted (COLORS, SPRING_CONFIGS) - useVideoConfig used for responsive sizing - TypeScript types defined - staticFile() used for assets ⚠️ **Optimization Opportunities:** - [ ] Replace Math.random() with seeded random - [ ] Extract repeated spring calculations - [ ] Memoize scene components - [ ] Optimize large assets --- ## Asset Optimization Details ### Current Assets | Asset | Size | Format | Status | Recommendation | |-------|------|--------|--------|----------------| | logo.png | 180KB | PNG | 🟢 Good | Keep as-is | | product.png | 8.2MB | PNG | 🔴 Optimize | → JPEG 400KB | | background.mp3 | 1.8MB | MP3 | 🟢 Good | Keep as-is | | whoosh.mp3 | 45KB | MP3 | 🟢 Good | Keep as-is | ### Optimization Commands ```bash # Product image (95% size reduction) magick public/images/product.png \ -resize 1920x1440 \ -quality 90 \ public/images/product.jpg ``` --- ## Recommendations Summary ### Immediate Actions (Critical) 1. ✅ **Replace Math.random() in Scene 2** — 55% faster - Priority: CRITICAL - Time: 15 minutes - Impact: 160ms per frame improvement ### Short-Term Actions (High Priority) 1. ✅ **Optimize product image** — 20% faster loading - Priority: HIGH - Time: 5 minutes - Impact: 50ms improvement 2. ✅ **Extract spring calculations** — 15% faster - Priority: HIGH - Time: 10 minutes - Impact: 20-30ms per scene ### Long-Term Improvements (Medium/Low) 1. Memoize scene components (10% improvement) 2. Extract array constants (2-5% improvement) 3. Consider lazy loading assets 4. Profile with Chrome DevTools for deeper analysis --- ## Next Steps 1. **Implement Critical Fix:** Replace Math.random() (highest impact) 2. **Benchmark:** Verify Scene 2 improvement (should be 285ms → 125ms) 3. **Implement High Priority:** Optimize assets and springs 4. **Re-run analysis:** Verify all targets met 5. **Final render:** Generate production video with optimizations --- ## Tools & Resources ### Profiling Tools ```bash # Remotion built-in profiling npx remotion preview --log=verbose # Chrome DevTools profiling # Open preview → DevTools → Performance tab → Record ``` ### Optimization References - Remotion Performance Docs: https://remotion.dev/docs/performance - React Profiler: https://react.dev/reference/react/Profiler - Seeded Random Pattern: See `/remotion-component-builder` skill --- ## Approval **Status:** ⚠️ OPTIMIZATION REQUIRED BEFORE PRODUCTION After implementing critical and high-priority fixes, this composition will meet all performance targets and be production-ready. **Estimated Time to Production-Ready:** 30-45 minutes of optimization work **Signed:** remotion-performance-optimizer **Date:** 2026-01-23 ``` **This document provides:** - Current vs. target performance metrics - Prioritized issues by impact (CRITICAL, HIGH, MEDIUM, LOW) - Before/after projections with concrete numbers - Specific code locations and fixes - Implementation time estimates - Step-by-step optimization plan - Benchmarking commands for validation - Asset optimization recommendations **Feeds into:** - Developer: Implement fixes - Re-run `/remotion-video-reviewer` after optimizations - Final production render ## Performance Analysis Categories ### 1. Expensive Computations **Issue:** Calculations executed every frame unnecessarily. **Detection:** ```typescript // ❌ PROBLEM - Recalculated every frame function Scene() { const frame = useCurrentFrame(); // Heavy calculation every frame const particles = Array.from({ length: 1000 }, () => ({ x: Math.random() * 1920, y: Math.random() * 1080, })); return /* render particles */; } ``` **Solution:** ```typescript // ✓ OPTIMIZED - Deterministic, seeded function Scene() { const frame = useCurrentFrame(); // Deterministic calculation const particles = useMemo( () => Array.from({ length: 1000 }, (_, i) => ({ x: seededRandom(i * 123) * 1920, y: seededRandom(i * 456) * 1080, })), [] // No dependencies, calculate once ); return /* render particles */; } // Seeded random for consistency const seededRandom = (seed: number) => { const x = Math.sin(seed) * 10000; return x - Math.floor(x); }; ``` **Impact:** 30-50% render time reduction for scenes with many elements. ### 2. Repeated Spring Calculations **Issue:** Same spring calculation multiple times. **Detection:** ```typescript // ❌ PROBLEM - Spring calculated 3 times

``` **Solution:** ```typescript // ✓ OPTIMIZED - Calculate once, reuse const progress = spring({ frame, fps, config: SMOOTH });

``` **Impact:** 10-20% render time reduction per scene. ### 3. Large Asset Sizes **Issue:** Unoptimized assets slow down loading and rendering. **Detection:** ```markdown Product image: 4000x3000 PNG (8.2MB) Background video: 3840x2160 ProRes (450MB) Logo: 2000x2000 PNG (1.5MB) ``` **Recommendations:** ```markdown ✓ Product image: 1920x1440 JPEG 90% (400KB) — 95% smaller ✓ Background video: 1920x1080 H.264 (25MB) — 95% smaller ✓ Logo: 800x800 PNG optimized (80KB) — 95% smaller ``` **Impact:** Faster renders, smaller output files, better preview performance. ### 4. Unnecessary Re-renders **Issue:** Components re-render when dependencies haven't changed. **Detection:** ```typescript // ❌ PROBLEM - Re-renders on every frame change function ExpensiveComponent({ data }) { // Heavy calculation const processed = data.map(item => /* complex transform */); return /* render */; } // Parent re-renders every frame ``` **Solution:** ```typescript // ✓ OPTIMIZED - Memoized component const ExpensiveComponent = memo(({ data }) => { // Heavy calculation const processed = useMemo( () => data.map(item => /* complex transform */), [data] ); return /* render */; }); // Or: Extract static data outside component const processedData = staticData.map(item => /* complex transform */); function Scene() { return ; } ``` **Impact:** 20-40% render time reduction for complex components. ### 5. DOM Thrashing **Issue:** Excessive DOM reads/writes causing layout thrashing. **Detection:** ```typescript // ❌ PROBLEM - Reading and writing in loop elements.forEach((el) => { const width = el.getBoundingClientRect().width; // Read el.style.width = `${width * 2}px`; // Write (causes reflow) }); ``` **Solution:** ```typescript // ✓ OPTIMIZED - Batch reads, then batch writes const widths = elements.map((el) => el.getBoundingClientRect().width); elements.forEach((el, i) => { el.style.width = `${widths[i] * 2}px`; }); ``` **Impact:** 15-30% improvement in DOM-heavy scenes. ### 6. Unoptimized Loops **Issue:** Inefficient iteration patterns. **Detection:** ```typescript // ❌ PROBLEM - Array creation every frame {Array(100).fill(0).map((_, i) => ( ))} ``` **Solution:** ```typescript // ✓ OPTIMIZED - Reuse array reference const PARTICLES = Array.from({ length: 100 }, (_, i) => i); {PARTICLES.map((i) => ( ))} ``` **Impact:** 5-10% improvement in scenes with many elements. ## Performance Optimization Checklist ### Computation Optimizations - [ ] No Math.random() in render (use seeded random) - [ ] Heavy calculations use useMemo - [ ] Spring calculations extracted and reused - [ ] Static data moved outside components - [ ] Loops use Array.from instead of Array().fill() ### Component Optimizations - [ ] Expensive components wrapped in memo() - [ ] useMemo for derived state - [ ] useCallback for event handlers passed to children - [ ] Components split appropriately (not too large) ### Asset Optimizations - [ ] Images sized to actual display dimensions (2x for retina) - [ ] JPEG for photos, PNG for transparency, SVG for graphics - [ ] Videos use H.264 codec with reasonable bitrate - [ ] Audio files trimmed to exact duration - [ ] Fonts load only required weights ### Render Optimizations - [ ] Avoid inline object/array creation in JSX - [ ] Use key prop correctly in lists - [ ] Minimize div nesting depth - [ ] Use CSS transforms over position changes - [ ] AbsoluteFill instead of complex layouts ### Architecture Optimizations - [ ] Extract reusable components - [ ] Scene components under 200 lines - [ ] Constants extracted to top of file - [ ] Utility functions outside components - [ ] Logical component composition ## Performance Benchmarking ### Measuring Render Time ```bash # Benchmark a specific frame npx remotion still src/index.tsx VideoName --frame=100 # Benchmark full render (first 100 frames) time npx remotion render src/index.tsx VideoName output.mp4 --frames=0-100 # Profile with Chrome DevTools npx remotion preview # Open Chrome DevTools → Performance tab → Record ``` ### Performance Targets | Composition Type | Target Render Time | Notes | |-----------------|-------------------|-------| | Simple (text, shapes) | < 50ms/frame | Minimal computations | | Moderate (animations, images) | 50-100ms/frame | Standard videos | | Complex (particles, 3D) | 100-200ms/frame | Heavy effects | | Very Complex (thousands of elements) | 200-500ms/frame | Acceptable with optimization | **Red flags:** - Single frame > 500ms → Major optimization needed - Render time increases over time → Memory leak ## Common Bottleneck Patterns ### Pattern 1: Particle Explosion **Issue:** ```typescript // 1000 particles, each calculating independently {Array(1000).fill(0).map((_, i) => { const x = Math.random() * width; // Recalculated every frame! const y = Math.random() * height; return ; })} ``` **Fix:** ```typescript // Deterministic particles, calculated once const particles = useMemo( () => Array.from({ length: 1000 }, (_, i) => ({ x: seededRandom(i * 123.456) * width, y: seededRandom(i * 789.012) * height, })), [width, height] ); {particles.map((p, i) => ( ))} ``` ### Pattern 2: Text Processing **Issue:** ```typescript // String operations every frame const words = text.split(' '); const processed = words.map(w => w.toUpperCase()); ``` **Fix:** ```typescript // Process once outside render const processedWords = useMemo( () => text.split(' ').map(w => w.toUpperCase()), [text] ); ``` ### Pattern 3: Conditional Rendering **Issue:** ```typescript // Component always rendered, visibility toggled 100 ? 1 : 0 }} /> ``` **Fix:** ```typescript // Don't render at all when not visible {frame > 100 && } ``` ## Optimization Report Template ```markdown ## Performance Optimization Report ### Current Performance - Average render time: 180ms/frame - Slowest scene: Scene 3 (350ms/frame) - Total video render time: 45 minutes (estimated) ### Identified Issues **CRITICAL (Major Impact)** 1. Particle system using Math.random() - Location: Scene 2, ParticleSystem component - Impact: +200ms per frame - Fix: Replace with seeded random - Estimated improvement: 55% faster 2. 4K product image not optimized - Location: Scene 4 - Current: 8.2MB PNG - Impact: Slow loading, memory pressure - Fix: Resize to 1920x1440, convert to JPEG - Estimated improvement: 95% smaller file **HIGH (Significant Impact)** 1. Repeated spring calculations - Location: Scene 1, Scene 3, Scene 5 - Impact: +50ms per scene - Fix: Extract to progress variable - Estimated improvement: 20% faster **MEDIUM (Moderate Impact)** 1. Components not memoized - Location: Scene components - Fix: Wrap in React.memo() - Estimated improvement: 10% faster ### Optimization Plan 1. Implement seeded random (15 min) — 55% improvement 2. Optimize assets (30 min) — Better loading 3. Extract spring calculations (10 min) — 20% improvement 4. Memoize components (20 min) — 10% improvement **Expected Result:** - Render time: 180ms → 80ms per frame (55% faster) - Total render: 45 min → 20 min ``` ## Integration with Other Skills **Works with:** - `/remotion-video-reviewer` — Performance audit during review - `/remotion-best-practices` — Ensures optimized patterns - `/remotion-spec-translator` — Generates optimized code from start ## Rules Directory Detailed optimization guides: - [rules/computation-optimization.md](rules/computation-optimization.md) — Optimizing calculations - [rules/asset-optimization.md](rules/asset-optimization.md) — Asset size and format - [rules/memoization-strategies.md](rules/memoization-strategies.md) — When and how to memoize - [rules/render-optimization.md](rules/render-optimization.md) — Render path improvements --- This skill ensures Remotion videos render as fast as possible while maintaining quality.