Vibe Coding Web 性能回归门：把 CWV 与资源预算绑定到发布差分

AI 很容易给页面加一个动画库、客户端状态容器和第三方图表，功能测试仍全部通过。等用户感到变慢，团队再跑一次 Lighthouse，可能得到另一个受机器、缓存和网络影响的分数。单次分数既不能定位是哪次改动，也不能代表真实用户分布；只看线上数据又要等流量积累，回归已经进入生产。

Core Web Vitals 基础解释 LCP、INP 与 CLS，Web 性能预算介绍预算思想。本文不再写通用优化清单，而是把它们变成 Vibe Coding 改动的双层发布合同：PR 阶段用可重复预算快速失败，上线后用同一 release 身份观察真实 cohort。

先把“快”绑定到页面任务

按路由和关键任务建立场景，例如冷启动打开文章、登录后搜索、编辑器首次输入、提交后看到确认。每个场景固定内容夹具、身份、语言、视口、浏览器、CPU 与网络档位、缓存状态和第三方替身策略。首页的预算不能替代编辑器，桌面宽带也不能替代移动弱网。

预算分三类。数量预算约束传输字节、初始 JavaScript、图片、字体、请求数和第三方来源；时间预算约束服务器响应、关键资源完成、长任务及可交互动作；结果预算约束 LCP、INP、CLS 和产品自己的任务完成时间。三类必须同时存在，因为压缩后传输很小的 JavaScript 仍可能占用主线程，视觉指标良好也可能掩盖提交接口慢。

阈值来自当前已接受基线、用户目标和设备支持合同，不由 Agent 挑一个“行业标准”代替。web.dev 在 2026-07-30 可见的 Core Web Vitals 指南仍以第 75 百分位判断页面体验，并把良好阈值描述为 LCP 不高于 2.5 秒、INP 不高于 200 毫秒、CLS 不高于 0.1；这些是核心指标边界，不是每个产品完整的发布标准。

PR 门只比较可比实验

候选提交与 base 提交用同一 runner、浏览器、夹具和构建模式交替运行，多次采样并保存原始分布。先确认 runner 噪声，再比较绝对预算和差分预算。只和昨天某次 CI 的单值比较会混入机器变化；只允许百分比回归又会让本来很慢的页面继续慢。

构建产物必须是目标生产模式，记录源提交、lockfile、环境配置和 bundle 摘要。开发服务器的额外检查、热更新和未压缩资源不能用于发布结论。一次失败先定位到资源、网络阶段或主线程任务；后续可沿Bundle 与网络瀑布诊断建立实际归因，不允许通过提高全局预算让当前 PR 变绿。

实验室交互使用稳定动作和准备完成断言。不能用固定 sleep 假装页面稳定，也不能在测试中删除真实会运行的第三方代码。若第三方不稳定，保留受控替身的确定性门，同时安排一个受限在线场景观察真实成本，分别标注证据范围。

门禁结果至少包含每次样本、median 与尾部、资源清单、长任务、失败截图和测量版本。Lighthouse 分数可以辅助导航，但接受条件使用底层可解释指标；分数权重变化不应在没有产品变化时制造回归。

字段数据回答真实用户发生了什么

上线后的 RUM 绑定 release、路由模板、设备类别、有效连接类型和关键任务，不直接记录完整 URL、用户 ID 或自由文本。分群要足以发现移动端、特定页面或新 cohort 回归，又要有高基数预算。字段与实验室 Web Vitals说明两类测量为何不可互换，Web 性能 RUM可继续展开采样与数据质量。

字段门按页面访问分布计算，不把平均值当作尾部体验。发布前声明观察窗口、最低样本量、基线 cohort、允许变化和处置动作。流量组成变化、缓存预热、营销活动与后端事故都可能同时改变指标，所以发现相关变化后先按 release 与页面切片，再用 trace、资源时序和回放验证，不能仅凭时间相邻断言本次 CSS 或 JavaScript 是根因。

新版本先进入稳定小 cohort。若实验室已超硬预算，不能用“线上再看看”绕过；若实验室通过而字段退化，停止扩大，比较相同设备和页面的旧新 release。回滚条件同时考虑用户任务、错误率与性能，避免为了 LCP 恢复而撤回重要正确性修复。不可回滚的数据变化需要前向修复与流量隔离方案。

让预算随产品演进但不随当前结果移动

新增重量级能力时，可以批准预算变化，但必须展示用户价值、替代方案、受影响页面和收回计划。例如编辑器路由增加语法高亮，不应提高所有内容页预算；按需加载并只调整编辑器场景更可审。预算修改与功能 diff 分开批准，防止同一作者通过改规则接受自己的回归。

删除能力后也要收紧预算。定期检查预算是否仍能抓住一个真实坏变更：注入额外脚本、阻塞字体、未设图片尺寸或长任务，门禁应在对应指标失败。若变异逃过，先修场景和 oracle，不要继续收集没有辨错力的绿色报告。

Next.js AI 界面的客户端边界问题可参照水合与 Client Boundary 预算，但框架专用指标仍要回到当前页面任务。最终报告连接 base/head、制品、实验室结果、字段观察计划和批准人，并进入编程 Agent 改动验证门。

可靠的性能门不是承诺每次发布都更快，而是让任何变慢都有明确页面、预算、证据和决策人。这样 Vibe Coding 可以高频改变界面，却不能把资源增长和真实用户退化藏在一次漂亮的总分后面。