performance-optimization

パフォーマンスの最適化

ディズニーの12原則を使って、遅いアニメーションやカクつくアニメーションを診断し、修正します。

問題の兆候

• フレームレートが60fpsを下回る
• 動きが途切れたり、カクついたりする
• UI の反応が鈍く感じられる
• モバイルでバッテリーの消耗が早い
• レイアウトの再計算が頻繁に発生する

原則ごとの診断

ストレートアヘッドとポーズ・トゥ・ポーズ

問題：すべてのフレームをリアルタイムで計算している
修正：ポーズ・トゥ・ポーズ（キーフレーム）アニメーションを使います。CSS トランジションまたは will-change を使って、状態間をブラウザーに補間させます。

タイミング

問題：同時に実行されるアニメーションが多すぎる
修正：アニメーションの開始をずらします。開始時刻を50～100msずつずらして、同時に行われる計算を減らします。

セカンダリーアクション

問題：セカンダリーエフェクトが多すぎる
修正：低消費電力デバイスでは、不可欠でないセカンダリーアニメーションを削除します。prefers-reduced-motion クエリを使います。

ソリッドドローイング

問題：コストの高いプロパティ（width、height、top、left）をアニメーションさせている
修正：アニメーションさせるのは transform と opacity のみにします。これらは GPU で高速化され、レイアウトやペイントをスキップできます。

ステージング

問題：画面外の要素をアニメーションさせている
修正：表示されているものだけをアニメーションさせます。Intersection Observer を使って、画面外のアニメーションを一時停止します。

すぐにできる修正

1. JS アニメーションを CSS に置き換える - ブラウザー向けに最適化されています
2. 位置プロパティの代わりに transform を使う - GPU レイヤーを使用します
3. will-change は控えめに追加する - ブラウザーにヒントを与えます
4. 同時に実行するアニメーションを減らす - 開始をずらすか、順番に実行します
5. モバイルではアニメーションの複雑さを抑える - デバイスの性能を検出します

トラブルシューティングのチェックリスト

• DevTools の Performance タブで長いフレームがないか確認する
• アニメーションで transform と opacity だけを使っていることを確認する
• 同時に実行されるアニメーションの数を数える（3～4個未満にする）
• 対象デバイスのうち最も性能の低いものでテストする
• レイアウトの再計算（強制リフロー）が頻繁に発生していないか確認する
• will-change を過剰に使用していないことを確認する
• CPU スロットリングを有効にしてテストする
• タブが非表示のときにアニメーションが一時停止するか確認する

コードパターン

/* Fast */
.element {
  will-change: transform;
  transition: transform 200ms ease-out;
}
.element:hover {
  transform: translateY(-4px);
}

/* Slow - avoid */
.element:hover {
  top: -4px; /* Triggers layout */
}