動畫如何影響核心網路生命（LCP、INP 和 CLS）
動畫和動畫運行時如何影響 LCP、INP 和 CLS，以及在不損害 Core Web Vitals 的情況下保持動作豐富的實用方法。
核心要點
動畫會損害所有三個核心 Web 生命體：繁重的動畫檔案和運行時會延遲 LCP，JavaScript 驅動的動畫會阻塞主執行緒並惡化 INP，動畫佈局屬性或在沒有保留空間的情況下載入動畫會導致 CLS。保持英雄內容獨立於動畫，延遲載入運行時，動畫變換和不透明度，並為每個動畫元素保留空間。
三個指標及其目標
Google 的 Core Web Vitals（記錄在 web.dev 上）測量加載（最大內容繪製，擅長 2.5 秒或更短）、響應能力（與下一個繪製的交互，擅長 200 毫秒或更短）和視覺穩定性（累積佈局偏移，擅長 0.1 或更短），在實際頁面加載的第 75 個百分位數處測量。
LCP：不要讓英雄等待動畫
如果螢幕上最大的元素是需要先載入執行時間和檔案的動畫，則 LCP 會同時等待這兩者。首先渲染靜態圖像或真實文本，然後對其進行增強，並僅在需要時加載折疊附近或折疊下方的內容的動畫運行時。
INP：保持主線程空閒
INP 衡量頁面響應點擊的速度。 Web.dev 解釋說，主執行緒上的長任務會延遲對輸入的回應。在每一幀上運行複雜的 JavaScript 的動畫，或者同時啟動的許多動畫，都可能導致這種情況。偏好在變換和不透明度上使用 CSS 過渡以獲得簡單效果，暫停螢幕外動畫，並避免為響應互動而開始繁重的工作。
CLS：預留空間與動畫變換
Web.dev 建議使用 CSS 變換屬性來製作動畫而不觸發佈局轉換：縮放而不是更改寬度和高度，平移而不是更改頂部或左側。在載入之前為每個動畫元素（包括基於畫布的動畫）提供固定尺寸，以便頁面在出現時不會跳躍。
畫布運行時
基於畫布的運行時（例如 Lottie 的畫布渲染器、Rive 和 ExodeUI）在 DOM 外部繪製，這避免了每個幀的佈局工作，但增加了下載和運行的運行時。衡量頁面的權衡：延遲載入運行時，預先調整 CSS 中的畫布大小，並在中階手機上進行測試。
要記住的關鍵 Principle
- 目標：LCP ≤ 2.5 秒，INP ≤ 200 毫秒，CLS ≤ 0.1（第 75 個百分位數）
- 不要使 LCP 元素依賴動畫運行時
- 在互動過程中保持主線程空閒
- 動畫變換與不透明度；為動畫元素預留空間
- 延遲載入運行時並在中階手機上進行測試
常見問題解答
來源
- Web Vitals — web.dev
- Interaction to Next Paint (INP) — web.dev
- Cumulative Layout Shift (CLS) — web.dev