合成されていないアニメーションを避ける

ローエンドのスマートフォンでは、合成されていないアニメーションがジャンク（スムーズではない）として表示されることがあります。これは、パフォーマンス負荷の高いタスクがメインスレッドで実行されているときです。ジャンクのあるアニメーションにより、ページの Cumulative Layout Shift（CLS）が増加する可能性があります。CLS を減らすと、Lighthouse のパフォーマンス スコアが改善されます。

背景

HTML、CSS、JavaScript をピクセルに変換するブラウザのアルゴリズムは、総称して「レンダリング パイプライン」と呼ばれます。

レンダリング パイプラインは、JavaScript、スタイル、レイアウト、ペイント、コンポジットの連続するステップで構成されます。
レンダリング パイプライン。

レンダリング パイプラインの各ステップの意味がわからなくても問題ありません。ここで知っておくべき重要な点は、レンダリング パイプラインの各ステップで、ブラウザが前のオペレーションの結果を使用して新しいデータを作成することです。たとえば、レイアウトをトリガーする処理をコードで行う場合、ペイント ステップとコンポジット ステップを再度実行する必要があります。非合成アニメーションとは、レンダリング パイプラインで前のステップ（スタイル、レイアウト、ペイント）のいずれかをトリガーするアニメーションです。合成されていないアニメーションはブラウザに多くの処理を強いるため、パフォーマンスが低下します。

レンダリング パイプラインの詳細については、次のリソースをご覧ください。

Lighthouse で合成されていないアニメーションが検出される仕組み

アニメーションを合成できない場合、Chrome は DevTools のトレースに失敗の理由を報告します。このトレースは Lighthouse で読み取られます。Lighthouse では、合成されなかったアニメーションを持つ DOM ノードと、各アニメーションのエラー理由が一覧表示されます。

アニメーションを確実に合成する方法

コンポジタ専用プロパティにとどめてレイヤ数を管理すると高性能アニメーションをご覧ください。

関連情報