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