remotion-performance-optimizer

Remotion パフォーマンス最適化ツール

Remotion の動画コンポジションを包括的に分析し、パフォーマンスの最適化を提案します。ボトルネックを特定し、レンダー時間を短縮するための実行可能な修正案を提示します。

このスキルでできること

パフォーマンスを詳細に分析します。

1. 計算処理の分析 — レンダーパス内の負荷の高い処理を特定します
2. 再レンダーの検出 — 不要なコンポーネントの再レンダーを特定します
3. アセットの最適化 — アセットのサイズや形式の改善を提案します
4. メモ化の機会 — キャッシュ可能な計算を特定します
5. アーキテクチャのレビュー — 構造上の改善を提案します
6. レンダリングのプロファイリング — フレームのレンダー時間を分析します

入力／出力形式

入力形式：Remotion コンポジションコード

実装済みの Remotion コンポジションファイルを受け付けます。

分析対象のファイル：

src/remotion/compositions/VideoName/
├── index.tsx           # Main composition
├── constants.ts        # Color, timing, spring configs
├── types.ts            # TypeScript types
└── scenes/
    ├── Scene1.tsx
    ├── Scene2.tsx
    └── Scene3.tsx

必要なコンテキスト：

• 目標とするレンダー時間（例：1 フレームあたり 100ms 未満）
• コンポジションの複雑さ（シンプル、中程度、複雑）
• 特定のパフォーマンス上の懸念事項

リクエストの例：

Analyze performance of VideoName composition.
Target: < 100ms/frame average render time.
Scene 2 is rendering slowly (200ms/frame).

出力形式：OPTIMIZATION_REPORT.md

実行可能な修正案を含む、詳細なパフォーマンス分析を生成します。

# Performance Optimization Report: [Video Title]

**Date:** 2026-01-23
**Analyzer:** remotion-performance-optimizer
**Composition:** `src/remotion/compositions/VideoName/`

---

## Executive Summary

**Current Performance:** ⚠️ NEEDS OPTIMIZATION

| Metric | Current | Target | Status |
|--------|---------|--------|--------|
| **Average Render Time** | 145ms/frame | < 100ms | 🔴 45% over target |
| **Slowest Scene** | Scene 2: 285ms | < 150ms | 🔴 90% over target |
| **Total Render Time (estimated)** | 36 minutes | < 20 minutes | 🔴 80% over target |
| **Memory Usage** | Normal | Normal | 🟢 Good |

**Potential Improvement:** 60-70% faster render times after implementing recommendations

**Priority Actions:**
1. Replace Math.random() with seeded random in Scene 2 (55% improvement)
2. Optimize large product image (20% faster asset loading)
3. Extract repeated spring calculations (15% improvement)

---

## Performance Breakdown by Scene

| Scene | Avg Render Time | Status | Primary Bottleneck |
|-------|----------------|--------|-------------------|
| Scene 1 | 75ms | 🟢 Good | None |
| Scene 2 | 285ms | 🔴 Critical | Non-deterministic particle system |
| Scene 3 | 95ms | 🟡 Acceptable | Large asset loading |
| Scene 4 | 80ms | 🟢 Good | None |

**Overall:** 145ms average (Target: < 100ms)

---

## Issues Found

### CRITICAL (Major Performance Impact)

#### 1. Non-Deterministic Particle System in Scene 2
**Impact:** 🔴 200ms per frame slowdown
**Location:** `src/remotion/compositions/VideoName/scenes/Scene2.tsx:48-65`
**Severity:** Critical - 70% of render time in Scene 2

**Problem:**
```typescript
// ❌ PROBLEM: Math.random() called 70 times per frame
{Array.from({ length: 70 }, (_, i) => {
  const x = Math.random() * width;     // Recalculated every frame!
  const y = Math.random() * height;    // Non-deterministic
  const speed = Math.random() * 2;

  return <Particle key={i} x={x} y={y} speed={speed} />;
})}

処理が遅い理由：

• Math.random() は非決定的です（フレームごとに値が異なります）
• パーティクル 70 個 × 乱数呼び出し 3 回 = 1 フレームあたり 210 回の乱数呼び出し
• 値が変化するため、Remotion はキャッシュできません
• ブラウザーは毎フレーム、位置を再計算する必要があります

解決策：

// ✅ OPTIMIZED: Seeded random, deterministic
const seededRandom = (seed: number): number => {
  const x = Math.sin(seed) * 10000;
  return x - Math.floor(x);
};

const particles = useMemo(
  () => Array.from({ length: 70 }, (_, i) => ({
    x: seededRandom(i * 123.456) * width,
    y: seededRandom(i * 789.012) * height,
    speed: seededRandom(i * 456.789) * 2,
  })),
  [width, height]
);

{particles.map((p, i) => (
  <Particle key={i} x={p.x} y={p.y} speed={p.speed} />
))}

期待される改善：

• シーン 2：285ms → 125ms（55％高速化）
• 全体：145ms → 105ms（28％高速化）
• レンダー合計時間：36 分 → 22 分（40％高速化）

実装時間： 15 分

---

高（パフォーマンスへの影響が大きい）

2. 最適化されていない大きな商品画像

影響： 🟡 アセットの読み込みに 50ms の遅延 場所： public/images/product.png 深刻度： 高 — 読み込みとメモリに影響します

問題：

Current Asset:
- Format: PNG (unnecessary transparency)
- Resolution: 4000x3000 (2x larger than needed)
- File Size: 8.2MB
- Load Time: ~50ms

処理が遅い理由：

• 8.2MB のファイルは読み込みとデコードに時間がかかります
• 1920x1080 の表示には 4000x3000 は過剰です
• PNG 形式は不要です（透過は使用していません）

解決策：

# Resize and convert to JPEG
magick public/images/product.png \
  -resize 1920x1440 \
  -quality 90 \
  public/images/product.jpg

# Update code
<Img src={staticFile('images/product.jpg')} />

結果：

Optimized Asset:
- Format: JPEG
- Resolution: 1920x1440 (2x for retina)
- File Size: ~400KB (95% smaller)
- Load Time: ~5ms (90% faster)

期待される改善：

• シーン 3 の読み込み時間：50ms 短縮
• シーン 3 のレンダー全体：95ms → 85ms
• 最終動画ファイルのサイズを縮小

実装時間： 5 分

---

3. spring 計算の繰り返し

影響： 🟡 シーンあたり 30ms 場所： 複数のシーン 深刻度： 高 — シーンをまたいで累積します

シーン 1 の問題：

// ❌ PROBLEM: Spring calculated 3 times
<div style={{
  opacity: spring({ frame, fps, config: SMOOTH }),
  scale: spring({ frame, fps, config: SMOOTH }),
  y: interpolate(spring({ frame, fps, config: SMOOTH }), [0, 1], [0, 100]),
}} />

処理が遅い理由：

• spring 関数には内部計算があります
• 同じパラメーターで 3 回呼び出されています
• Remotion は重複した呼び出しを最適化できません
• シーンあたり 20〜30ms の無駄が生じます

解決策：

// ✅ OPTIMIZED: Calculate once, reuse
const progress = spring({ frame, fps, config: SMOOTH });

<div style={{
  opacity: progress,
  scale: progress,
  y: interpolate(progress, [0, 1], [0, 100]),
}} />

期待される改善：

• シーンあたり：20〜30ms 高速化
• 全体：145ms → 125ms（15％高速化）
• シーン 1、3、4 に効果があります

実装時間： 10 分

---

中（パフォーマンスへの影響が中程度）

4. コンポーネントがメモ化されていない

影響： 🟡 10〜15ms 場所： シーンコンポーネント 深刻度： 中 — 小規模な不要な再レンダーが発生します

問題：

// Scene components re-render even when props haven't changed
function Scene1() { ... }
function Scene2() { ... }

解決策：

import { memo } from 'react';

const Scene1 = memo(() => { ... });
const Scene2 = memo(() => { ... });

期待される改善：

• シーンあたり 10〜15ms
• 複雑なコンポジションで全体を 10％高速化

実装時間： 5 分

---

低（パフォーマンスへの影響が小さい）

5. レンダー中の配列生成

影響： 🟢 2〜5ms 場所： Scene4.tsx:23 深刻度： 低 — 影響はごくわずかですが、修正可能です

問題：

// Array recreated every frame
{Array(50).fill(0).map((_, i) => <Element key={i} />)}

解決策：

// Reuse array reference
const ELEMENTS = Array.from({ length: 50 }, (_, i) => i);

{ELEMENTS.map((i) => <Element key={i} />)}

期待される改善： 2〜5ms（最小限ですが、適切な実装です）

実装時間： 2 分

---

最適化の実装計画

フェーズ 1：重大な修正（15 分） — 55％の改善

1. シーン 2 の Math.random() をシード付き乱数に置き換える
   • 期待値：285ms → 125ms

フェーズ 2：優先度の高い修正（15 分） — さらに 20％の改善

1. product.png を JPEG に最適化する（5 分）
   • 期待値：シーン 3 で 95ms → 85ms
2. spring 計算を取り出す（10 分）
   • 期待値：全体で 145ms → 125ms

フェーズ 3：優先度が中程度の修正（10 分） — さらに 10％の改善

1. シーンコンポーネントをメモ化する
   • 期待値：10〜15ms の改善

フェーズ 4：優先度低（5 分）— 2～5％の改善

1. 配列定数を抽出する
   • 期待される効果：2～5ms の改善

実装にかかる時間の合計： 45 分 期待される改善効果の合計： レンダリングが 60～70％高速化

---

実施前／実施後の予測

指標	実施前	フェーズ 1 後	フェーズ 2 後	すべて実施後	目標
シーン 2	285ms	125ms	115ms	110ms	< 150ms ✅
シーン 3	95ms	95ms	85ms	80ms	< 100ms ✅
全体の平均	145ms	105ms	90ms	85ms	< 100ms ✅
レンダリング合計	36min	22min	19min	18min	< 20min ✅

すべての最適化を実施後： すべての目標を達成できます！ 🎉

---

パフォーマンスの検証

ベンチマークコマンド

# 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

パフォーマンス目標

コンポジションの種類	目標	現在	ステータス
シンプルなシーン	< 50ms	75ms（シーン 1、4）	🟡 許容範囲
中程度のシーン	< 100ms	平均 145ms	🔴 目標超過
複雑なシーン	< 150ms	285ms（シーン 2）	🔴 目標超過

最適化後： すべてのシーンが目標を達成する見込みです

---

コード品質チェック

✅ 確認された良いパターン：

• 定数を抽出済み（COLORS、SPRING_CONFIGS）
• レスポンシブなサイズ設定に useVideoConfig を使用
• TypeScript の型を定義
• アセットに staticFile() を使用

⚠️ 最適化の機会：

• Math.random() をシード付き乱数に置き換える
• 繰り返し使用する spring 計算を抽出する
• シーンコンポーネントをメモ化する
• 大きなアセットを最適化する

---

アセット最適化の詳細

現在のアセット

アセット	サイズ	形式	ステータス	推奨事項
logo.png	180KB	PNG	🟢 良好	現状のまま使用
product.png	8.2MB	PNG	🔴 最適化が必要	→ JPEG 400KB
background.mp3	1.8MB	MP3	🟢 良好	現状のまま使用
whoosh.mp3	45KB	MP3	🟢 良好	現状のまま使用

最適化コマンド

# Product image (95% size reduction)
magick public/images/product.png \
  -resize 1920x1440 \
  -quality 90 \
  public/images/product.jpg

---

推奨事項のまとめ

すぐに実施する作業（最優先）

1. ✅ シーン 2 の Math.random() を置き換える — 55％高速化
   • 優先度：最優先
   • 所要時間：15 分
   • 効果：フレームごとに 160ms 改善

短期的に実施する作業（優先度高）

1. ✅ 商品画像を最適化する — 読み込みが 20％高速化

   • 優先度：高
   • 所要時間：5 分
   • 効果：50ms 改善

2. ✅ spring 計算を抽出する — 15％高速化

   • 優先度：高
   • 所要時間：10 分
   • 効果：シーンごとに 20～30ms

長期的な改善（優先度中／低）

1. シーンコンポーネントをメモ化する（10％改善）
2. 配列定数を抽出する（2～5％改善）
3. アセットの遅延読み込みを検討する
4. Chrome DevTools でプロファイリングし、さらに詳しく分析する

---

次のステップ

1. 最優先の修正を実施： Math.random() を置き換える（最も効果が大きい作業）
2. ベンチマークを実施： シーン 2 の改善を確認する（285ms → 125ms になる見込み）
3. 優先度の高い作業を実施： アセットと spring を最適化する
4. 分析を再実行： すべての目標が達成されていることを確認する
5. 最終レンダリング： 最適化を適用して本番用動画を生成する

---

ツールとリソース

プロファイリングツール

# Remotion built-in profiling
npx remotion preview --log=verbose

# Chrome DevTools profiling
# Open preview → DevTools → Performance tab → Record

最適化に関する参考資料

• Remotion のパフォーマンスに関するドキュメント： https://remotion.dev/docs/performance
• React Profiler： https://react.dev/reference/react/Profiler
• シード付き乱数のパターン：/remotion-component-builder スキルを参照

---

承認

ステータス： ⚠️ 本番環境に移行する前に最適化が必要です

最優先および優先度の高い修正を実施すると、このコンポジションはすべてのパフォーマンス目標を達成し、本番環境で使用できる状態になります。

本番環境で使用可能になるまでの推定時間： 30～45 分の最適化作業

署名： remotion-performance-optimizer 日付： 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 */;
}

解決策：

// ✓ 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);
};

効果： 要素の多いシーンで、レンダリング時間を 30～50％短縮します。

2. spring 計算の繰り返し

問題： 同じ spring 計算が複数回行われています。

検出方法：

// ❌ PROBLEM - Spring calculated 3 times
<div style={{
  opacity: spring({ frame, fps, config: SMOOTH }),
  scale: spring({ frame, fps, config: SMOOTH }),
  y: interpolate(spring({ frame, fps, config: SMOOTH }), [0, 1], [0, 100]),
}} />

解決策：

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

<div style={{
  opacity: progress,
  scale: progress,
  y: interpolate(progress, [0, 1], [0, 100]),
}} />

効果： シーンごとにレンダリング時間を 10～20％短縮します。

3. 大きなアセットサイズ

問題： 最適化されていないアセットは、読み込みとレンダリングを遅くします。

検出：

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

推奨事項：

✓ Product image: 1920x1440 JPEG 90% (400KB) — 95% smaller
✓ Background video: 1920x1080 H.264 (25MB) — 95% smaller
✓ Logo: 800x800 PNG optimized (80KB) — 95% smaller

効果： レンダリングの高速化、出力ファイルの小型化、プレビュー性能の向上。

4. 不要な再レンダリング

問題： 依存関係が変わっていないのに、コンポーネントが再レンダリングされます。

検出：

// ❌ 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
<ExpensiveComponent data={staticData} />

解決策：

// ✓ 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 <Component data={processedData} />;
}

効果： 複雑なコンポーネントのレンダリング時間を20～40％削減できます。

5. DOMのスラッシング

問題： DOMの読み取り／書き込みが過剰になり、レイアウトのスラッシングが発生します。

検出：

// ❌ PROBLEM - Reading and writing in loop
elements.forEach((el) => {
  const width = el.getBoundingClientRect().width; // Read
  el.style.width = `${width * 2}px`; // Write (causes reflow)
});

解決策：

// ✓ 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`;
});

効果： DOMを多用するシーンで15～30％の改善が見込めます。

6. 最適化されていないループ

問題： 効率の悪い反復処理パターンです。

検出：

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

解決策：

// ✓ OPTIMIZED - Reuse array reference
const PARTICLES = Array.from({ length: 100 }, (_, i) => i);

{PARTICLES.map((i) => (
  <Particle key={i} index={i} />
))}

効果： 要素が多いシーンで5～10％の改善が見込めます。

パフォーマンス最適化チェックリスト

計算の最適化

• render内でMath.random()を使用していない（シード付き乱数を使用する）
• 重い計算にはuseMemoを使用する
• スプリング計算を切り出して再利用する
• 静的データをコンポーネントの外に移動する
• ループではArray().fill()ではなくArray.fromを使用する

コンポーネントの最適化

• コストの高いコンポーネントをmemo()でラップする
• 派生状態にはuseMemoを使用する
• 子コンポーネントに渡すイベントハンドラーにはuseCallbackを使用する
• コンポーネントを適切に分割する（大きくしすぎない）

アセットの最適化

• 画像のサイズを実際の表示寸法に合わせる（Retina用には2倍）
• 写真にはJPEG、透過にはPNG、グラフィックにはSVGを使用する
• 動画には適切なビットレートのH.264コーデックを使用する
• 音声ファイルを正確な長さにトリミングする
• フォントは必要なウェイトのみを読み込む

レンダリングの最適化

• JSX内でオブジェクトや配列をインライン生成しない
• リストでkeyプロパティを正しく使用する
• divのネストを最小限に抑える
• positionの変更よりCSS transformを使用する
• 複雑なレイアウトよりAbsoluteFillを使用する

アーキテクチャの最適化

• 再利用可能なコンポーネントを切り出す
• シーンコンポーネントを200行未満にする
• 定数をファイルの先頭に切り出す
• ユーティリティ関数をコンポーネントの外に置く
• 論理的にコンポーネントを構成する

パフォーマンスのベンチマーク

レンダリング時間の測定

# 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

パフォーマンスの目標値

コンポジションの種類	目標レンダリング時間	備考
シンプル（テキスト、図形）	< 50ms/frame	計算は最小限
中程度（アニメーション、画像）	50-100ms/frame	標準的な動画
複雑（パーティクル、3D）	100-200ms/frame	負荷の高いエフェクト
非常に複雑（数千の要素）	200-500ms/frame	最適化すれば許容範囲

要注意事項：

• 1フレームが500msを超える → 大幅な最適化が必要
• 時間の経過とともにレンダリング時間が増加する → メモリーリーク

よくあるボトルネックのパターン

パターン1：パーティクルの大量発生

問題：

// 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 <Particle key={i} x={x} y={y} />;
})}

修正：

// 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) => (
  <Particle key={i} x={p.x} y={p.y} />
))}

パターン2：テキスト処理

問題：

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

修正：

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

パターン3：条件付きレンダリング

問題：

// Component always rendered, visibility toggled
<HeavyComponent style={{ opacity: frame > 100 ? 1 : 0 }} />

修正：

// Don't render at all when not visible
{frame > 100 && <HeavyComponent />}

最適化レポートのテンプレート

## 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

他のスキルとの連携

連携対象：

• /remotion-video-reviewer — レビュー中のパフォーマンス監査
• /remotion-best-practices — 最適化されたパターンを適用
• /remotion-spec-translator — 最初から最適化されたコードを生成

ルールディレクトリ

詳細な最適化ガイド：

• rules/computation-optimization.md — 計算の最適化
• rules/asset-optimization.md — アセットのサイズと形式
• rules/memoization-strategies.md — メモ化するタイミングと方法
• rules/render-optimization.md — レンダリングパスの改善

---

このスキルを使うと、品質を維持しながらRemotion動画を可能な限り高速にレンダリングできます。