パフォーマンスを犠牲にしないモーション

アニメーションは簡単にやりすぎてしまいます。優れたプロダクトサイトは、装飾のためではなく、注意を導くためにモーションを使います。

モーションは控えめに使う

私は入口アニメーションをセクション表示とカードグリッドに絞っています。ホバー状態はCSSを優先し、純粋なCSSでは扱いにくい連続表現だけをMotion.devに任せます。

prefers-reduced-motionを尊重する

必須ではないアニメーションは、必ず低モーション設定の確認で止められるようにします。Launchfolioのモーションユーティリティは、ユーザーが動きを減らしたい設定にしている場合、早期に処理を終えます。これはアクセシビリティにもパフォーマンスにも有効です。

アニメーションコードを遅延読み込みする

motion は、描画後や要素がビューポートに入ったときに動く関数の中で読み込みます。必要ないページでアニメーションライブラリを読み込まないようにします。

影響を測る

モーション追加前後のLighthouseスコアを比較します。数点以上落ちるなら、効果を簡略化するか、読み込みを遅らせるべきです。

うまく使えば、モーションは静的なサイトに生き生きとした感覚を与えます。使い方を誤ると、速いサイトまで重く感じさせてしまいます。