动画如何影响核心网络生命（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