合成されていないアニメーションは避けてください
合成されていないアニメーションは、ローエンドの電話で、またはパフォーマンスの高いタスクがメインスレッドで実行されている場合に、ぎくしゃくした（つまりスムーズではない）ように見えることがあります。ぎこちないアニメーションは、ページの累積レイアウトシフト（CLS）を増やす可能性があります。 CLSを減らすと、LighthousePerformanceスコアが向上します。
バックグラウンド #
HTML、CSS、およびJavaScriptをピクセルに変換するためのブラウザーのアルゴリズムは、まとめてレンダリングパイプラインと呼ばれます。
レンダリングパイプラインの各ステップが何を意味するのか理解していなくても大丈夫です。ここで理解しておくべき重要なことは、レンダリングパイプラインの各ステップで、ブラウザーが前の操作の結果を使用して新しいデータを作成することです。たとえば、コードがレイアウトをトリガーする何かを実行する場合、ペイントとコンポジットのステップを再度実行する必要があります。合成されていないアニメーションとは、レンダリングパイプラインの初期のステップ（スタイル、レイアウト、またはペイント）のいずれかをトリガーするアニメーションです。合成されていないアニメーションは、ブラウザに多くの作業を強制するため、パフォーマンスが低下します。
レンダリングパイプラインの詳細については、次のリソースを確認してください。
Lighthouseが合成されていないアニメーションを検出する方法 #
アニメーションを合成できない場合、Chromeは失敗の理由をDevToolsトレースに報告します。これは、Lighthouseが読み取るものです。 Lighthouseは、合成されなかったアニメーションを持つDOMノードと、各アニメーションの失敗理由を一覧表示します。
アニメーションを確実に合成する方法 #
コンポジターのみのプロパティに固執し、レイヤー数と高性能アニメーションを管理するを参照してください。
資力 #
- 合成されていないアニメーションを回避する監査のソースコード
- コンポジターのみのプロパティに固執し、レイヤー数を管理します
- 高性能アニメーション
- ペイントの複雑さを簡素化し、ペイント領域を減らします
- 最新のWebブラウザの内部を見る（パート3）