一次 Lighthouse 跑分很容易变成团队的目标,但用户体验不会被压缩成单一分数。页面初次访问、列表筛选、路由切换和保存操作,各自有不同的性能边界。

一、沿用户旅程测量

为关键流程定义阶段:内容何时可见、界面何时可交互、操作后多久得到反馈。实验室数据用于快速回归,真实用户数据则告诉我们问题究竟发生在哪些设备和网络中。

二、立即确认用户意图

无法立刻完成的操作,也应立即给出反馈。按钮状态、骨架屏、乐观更新都在降低感知等待;但必须避免用动画掩盖一个本可消除的阻塞请求。

三、给依赖设置预算

每个第三方脚本、每张大图和每个 UI 组件都有成本。性能预算应进入代码评审和构建流程,在回归发生时尽早提醒,而不是等用户投诉。

// 一个简单、可执行的页面预算
initial_js < 180 KB
hero_image < 120 KB
third_party_main_thread < 100 ms

四、优化是一种产品取舍

最终仍要回答:变快的是什么人、什么场景和什么任务。一个清晰的关键路径,往往比十项微小的技术优化更能改变体验。