ウェブページ上のアニメーションの中には、レンダリング パイプラインのコンポジタ ステージで完全に処理できるものがあります。
合成されていないアニメーションは、より多くの作業が必要であり、低価格のスマートフォンや、パフォーマンスに負荷の高いタスクがメインスレッドで実行されている場合、ぎくしゃくしてスムーズに動作しないことがあります。
合成されていないアニメーションは、CLS アルゴリズムが測定する要素が実際に移動するため、ページの累積レイアウト シフト（CLS）を増加させる可能性もあります。これにより、他の要素へのシフトが引き起こされる可能性があります。合成アニメーションでは他の要素が移動しないため、CLS から除外されます。CLS を減らすと、Lighthouse のパフォーマンス スコアが向上します。
背景
HTML、CSS、JavaScript をピクセルに変換するブラウザのアルゴリズムは、総称してレンダリング パイプラインと呼ばれます。
レンダリング パイプラインの各ステップの意味を理解していなくても問題ありません。ここで理解しておくべき重要な点は、レンダリング パイプラインの各ステップで、ブラウザが前の操作の結果を使用して新しいデータを作成することです。たとえば、コードでレイアウトをトリガーする操作を行う場合は、Paint と Composite のステップを再度実行する必要があります。合成されていないアニメーションとは、レンダリング パイプラインの初期段階のいずれかのステップ（スタイル、レイアウト、ペイント）をトリガーするアニメーションです。合成されていないアニメーションは、ブラウザに多くの処理を強制するため、パフォーマンスが低下します。
レンダリング パイプラインの詳細については、次のリソースをご覧ください。
Lighthouse が合成されていないアニメーションを検出する方法
アニメーションを合成できない場合、Chrome は失敗の理由を DevTools トレース（Lighthouse が読み取るトレース）に報告します。Lighthouse には、合成されなかったアニメーションを含む DOM ノードと、各アニメーションの失敗理由が表示されます。
アニメーションが合成されるようにする方法
コンポーザタ専用のプロパティに固執し、レイヤ数を管理すると高パフォーマンスのアニメーションをご覧ください。