啥是FID

首次输入延迟。衡量负载响应能力，数值越低页面交互体验越好。

FCP是衡量网站加载速度的开始，剩下的交互也很重要。

用户第一次和页面交互

  • 点击链接
  • 点击按钮
  • 自定义js空间
  • 输入

image.png

解决什么问题

鼓励异步响应事件，让主线程不要那么忙碌。

用户如果是主线程最繁忙时候，和空闲时候，FID值是不同的。

和滚动无关。

为啥值考虑 first第一个输入？

因为它早，第一印象，鼓励异步拆分。

这个值说明什么问题

哪些元素会受到主线程影响：

  • 文本字段，复选框和单选按钮（<input>，<textarea>）
  • 选择下拉菜单（<select>）
  • 链接（<a>）

如果浏览器主线程忙于操作其他任务，会导致输入延迟，无法及时响应用户。FID会高。
如果用户自始至终都没有上述操作，那就是没有值。操作或早或晚，值也有高有低。

一个糟糕的 FID 主要原因是JS执行过长，优化JS的解析、编译、执行可以直接降低 FID。

拆分代码、分解长任务 可以降低用户输入延迟。

长任务指的是用户可能会发现页面无响应的时期执行的js代码。任何阻塞主线程大于等于50ms的代码都是长任务。长任务一般是js体积过大的潜在因素（浏览器加载并执行了比页面初始化所需要的更多的js）。

如何计算

最简单方法是使用web-vitals

手动计算的话，也是使用 PerformanceObserver ，监听的type是 first-input

一般建议75%，但这个指标建议观察 95% - 99%

比如我们要承诺 99% 的用户都要小于 5 秒，我们看页面加载时长时候就应该看 99 分位数。如果我们现在精力不够，我们只能承诺 50% 的人页面加载时长小于 5 秒，实际上 50 分位数，就是中位数，就是 50% 的访问能够不小于这个时间打开这个页面。

其他优化，后续在补充。

不能在lab中测算，可以参考 TBT

参考资料