Impact: 10-20% render time reduction per scene.

1. Large Asset Sizes

Issue: Unoptimized assets slow down loading and rendering.

Detection:

Product image: 4000x3000 PNG (8.2MB) Background video: 3840x2160 ProRes (450MB) Logo: 2000x2000 PNG (1.5MB)

Recommendations:

✓ 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.

1. Unnecessary Re-renders

Issue: Components re-render when dependencies haven't changed.

Detection:

// ❌ 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:

// ✓ 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.

1. DOM Thrashing

Issue: Excessive DOM reads/writes causing layout thrashing.

Detection:

// ❌ 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:

// ✓ 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.

1. Unoptimized Loops

Issue: Inefficient iteration patterns.

Detection:

// ❌ PROBLEM - Array creation every frame {Array(100).fill(0).map((_, i) => ( ))}

Solution:

// ✓ 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

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:

// 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:

// 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:

// String operations every frame const words = text.split(' '); const processed = words.map(w => w.toUpperCase());

Fix:

// Process once outside render const processedWords = useMemo( () => text.split(' ').map(w => w.toUpperCase()), [text] );

Pattern 3: Conditional Rendering

Issue:

// Component always rendered, visibility toggled 100 ? 1 : 0 }} />

Fix:

// Don't render at all when not visible

Optimization Report Template

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

1. 4K product image not optimized
2. Location: Scene 4
3. Current: 8.2MB PNG
4. Impact: Slow loading, memory pressure
5. Fix: Resize to 1920x1440, convert to JPEG
6. 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 — Optimizing calculations rules/asset-optimization.md — Asset size and format rules/memoization-strategies.md — When and how to memoize rules/render-optimization.md — Render path improvements

This skill ensures Remotion videos render as fast as possible while maintaining quality.