アニメーションがコア ウェブ バイタル (LCP、INP、CLS) に与える影響
アニメーションとアニメーション ランタイムが LCP、INP、CLS に与える影響と、Core Web Vitals を損なうことなくモーションを豊かに保つための実践的な方法。
核心
アニメーションは 3 つの Core Web Vital すべてに悪影響を与える可能性があります。重いアニメーション ファイルとランタイムは LCP を遅延させる可能性があり、JavaScript 駆動のアニメーションはメイン スレッドをブロックして INP を悪化させる可能性があり、レイアウト プロパティをアニメーション化するか、予約されたスペースなしでアニメーションを読み込むと CLS を引き起こします。ヒーロー コンテンツをアニメーションから独立させ、フォールドの下にランタイムを遅延読み込みし、変換と不透明度をアニメーション化し、アニメーション化されたすべての要素用のスペースを確保します。
3 つの指標とその目標
web.dev に記載されている Google の Core Web Vitals では、読み込み (最大コンテンツフル ペイント、2.5 秒以下で良好)、応答性 (次のペイントへのインタラクション、200 ミリ秒以下で良好)、および視覚的安定性 (累積レイアウト シフト、0.1 以下で良好) を測定し、実際のページ読み込みの 75 パーセンタイルで測定されます。
LCP: ヒーローをアニメーションまで待たせないでください
画面上の最大の要素がアニメーションであり、最初にランタイムとファイルをロードする必要がある場合、LCP は両方を待機します。最初に静的な画像または実際のテキストをレンダリングしてから、それを強化し、必要なときにスクロールせずに見えるコンテンツの近くまたは下のコンテンツにのみアニメーション ランタイムを読み込みます。
INP: メインスレッドを解放しておきます。
INP は、タップとクリックに対するページの応答速度を測定します。 Web.dev は、メインスレッド上の長いタスクにより入力への応答が遅れると説明しています。すべてのフレームで複雑な JavaScript を実行するアニメーション、または一度に開始される多数のアニメーションは、まさにそれを引き起こす可能性があります。単純な効果には変換と不透明度の CSS トランジションを優先し、オフスクリーン アニメーションを一時停止し、インタラクションに応じて重い作業を開始するのを避けます。
CLS: スペースを確保し、変換をアニメーション化します。
Web.dev では、CSS 変換プロパティを使用して、レイアウトのシフトを引き起こさずにアニメーション化することをお勧めします。幅と高さを変更する代わりに拡大縮小し、上または左を変更する代わりに移動します。キャンバスベースのアニメーションを含むすべてのアニメーション要素には、ページが表示されたときにジャンプしないように、ロードする前にサイズを固定してください。
キャンバスのランタイム
Lottie のキャンバス レンダラー、Rive、ExodeUI などのキャンバス ベースのランタイムは DOM の外側で描画されるため、フレームごとのレイアウト作業が回避されますが、ダウンロードして実行するランタイムが追加されます。ページのトレードオフを測定します。ランタイムを遅延読み込みし、事前に CSS でキャンバスのサイズを調整し、ミッドレンジの携帯電話でテストします。
覚えておきたい原則
- 目標: LCP ≤ 2.5 秒、INP ≤ 200 ms、75 パーセンタイルでの CLS ≤ 0.1
- LCP 要素をアニメーション ランタイムに依存させないでください。
- インタラクション中はメインスレッドを解放しておきます
- 変形と不透明度をアニメーション化します。アニメーション要素用のスペースを確保する
- 遅延読み込みランタイムとミッドレンジの携帯電話でのテスト
よくある質問
出典
- Web Vitals — web.dev
- Interaction to Next Paint (INP) — web.dev
- Cumulative Layout Shift (CLS) — web.dev