技能：性能优化
确保用户界面快速且稳定。将性能视为可访问性问题——缓慢或卡顿的界面会首先影响低端设备用户。
步骤
- 读取
workflows/performance.md（核心网页指标目标、加载策略、布局偏移、动画性能、设计系统运行时成本）。 - 根据预算进行诊断：LCP ≤ 2.5秒、INP ≤ 200毫秒、CLS ≤ 0.1。在中端移动设备配置（慢速4G网络 + 4倍CPU节流）下进行测量。
- 加载：优先渲染首屏内容（SSR/服务端组件），按路由和重量级组件进行代码拆分，懒加载非首屏/交互触发的内容（Astro Islands / Qwik），预加载一种关键字体，使用现代响应式图片。
- 消除布局偏移：将骨架屏尺寸设为最终尺寸，通过
aspect-ratio属性保留媒体空间（tokens/sizing.json），切勿在现有内容之上注入新内容。 - 动画：仅使用
transform和opacity属性，谨慎使用will-change，动画时长为100-300毫秒（tokens/motion.json），遵循prefers-reduced-motion用户偏好。优先使用CSS状态样式而非JavaScript以降低INP；进行摇树优化并按组件导入。
验证（完成标准）
- Lighthouse实验室数据或实际字段数据满足：LCP ≤ 2.5秒，INP ≤ 200毫秒，CLS ≤ 0.1（以中端移动设备为基准）。
- 首次交互在慢速4G网络 + 4倍CPU节流条件下保持响应。
- 骨架屏和媒体元素预留空间（加载时零CLS）；循环动画中无非合成器属性变化。