仅仅关注页面的加载速度对于我们SEO的从业人员来说是不够的，因为很多页面只是看起来加载完成了，但实际上用户点击按钮时不一定都有反应，而这种卡顿感会严重影响到用户的整体体验。在我开始接触Core Web Vitals之后，除了之前讲过的LCP让我学到了很多，其中的FID（First Input Delay）也让我对交互性能有了更清晰的认识。乐站的小杨也就是我在实际工作时发现，很多转化问题其实并不是内容或设计导致的，而是用户第一次操作时页面的响应过慢。所以说理解FID并进行对其进行针对性的优化，也是提升用户体验和SEO表现的重要一步。所以今天我们一起学习一些有关FID的内容，帮助大家正确的理解FID。
什么是FID？
和之前一样，首先我们要知道什么是FID。那么在我自己的理解中，FID（First Input Delay）指的是用户第一次与页面发生交互（例如点击按钮、点击链接或输入内容）时，到浏览器真正开始响应这个操作之间的时间差，通俗一点说就是用户第一次按下交互的按钮之后到网站响应之间的时间。
换句话说，FID衡量的是用户第一次操作后页面多久有反应。这个指标与LCP不同，LCP关注的是重点内容什么时候加载出来，而FID关注的是页面什么时候可以使用。
那我们比较常见的需要触发FID的用户操作包括：
- 用户第一次点击按钮或链接
- 用户第一次输入表单内容
- 用户第一次点击导航菜单栏
- 用户第一次使用与页面中的组件
举个例子，有时候用户在进入页面之后，看起来页面已经加载完成了，但实际上用户点击立即咨询按钮后，等了1-2秒才有反应。这个第一次点击产生的延迟就是FID问题的体现。实际上就是因为在视觉上页面已经准备好，但实际上浏览器仍在处理其他任务，所以会导致无法及时响应用户操作的问题出现。
FID为什么如此重要
其实FID这个指标的作用很明显，那就是FID的实际数值会直接影响用户对于网站是否流畅这个问题的判断。
首先，FID能决定用户在网站中的交互体验。因为当用户点击交互按钮之后没有立即得到反馈，就很容易产生疑惑甚至误操作，比如重复点击或直接离开页面。这种在网站中的体验感会显著影响到用户对网站的满意度。
其次，FID会影响用户的转化行为。这个其实在电商平台的站点中会比较突出，因为在电商的产品页面中，如果用户点击购买按钮后没有及时响应，就很有可能会放弃操作。而且它对于B2B企业的站点来说也很重要，比如用户在提交表单的时候发现延迟过高，就很有可能放弃提交。那么如果我们在优化某个网站的时候，发现了交互的延迟比较高，那么我们就需要去优化它的FID，做完这些之后我们就能发现网站交互的速度明显得到了提升，整体的体验感也得到了提高。
除此之外，FID同样也是搜索引擎评估页面体验的重要指标之一，它在页面体验信号中也占有着一定的权重。
从我的经验来看，做完FID的优化给我们带来的变化主要是：
- 首先使用户操作的流畅度得到了提升
- 其次也降低了用户的流失率
- 然后还进一步的提高了页面的转化效率
FID的参考标准
跟LCP一样，Google也为我们提供了一些标准来方便我们判断FID的表现。
| FID时间 | 表现等级 |
|---|---|
| ≤ 100毫秒 | 良好（Good） |
| 100毫秒 – 300毫秒 | 需要优化（Needs Improvement） |
| > 300毫秒 | 较差（Poor） |
同样的，在我们的工作中，如果发现FID超过了100毫秒，我们就就需要开始关注对它的优化了；如果超过300毫秒，就代表它已经对用户的体验产生了影响，需要我们及时进行优化处理。
这里需要我们注意的是，FID是一个对于用户真的体验产生的指标（Field Data），所以我们不能完全依赖实验室测试。但是我们可以结合下面的一些工具来进行辅助：
- 第一个是通过Search Console体验报告进行查看
- 第二是查看Chrome用户体验数据（CrUX）中的一个数据
- 第三是使用性能分析工具比如Chrome DevToolsj进行一个性能的分析来帮助我们判断
影响FID的常见因素
经过实际的优化工作之后，我们可以发现FID的问题大多数都与JavaScript的执行有关，而不是网络速度。那我们该如何解决这些问题呢？我们看下面就知道了：
1. JavaScript执行时间过长
首先就是最常见的问题，JavaScript的执行时间过长。这是因为浏览器在执行JS时会占用网站的主线程，导致无法响应用户操作。
我的解决方法：
- 首先是可以将大型的JS文件拆分成若干的小文件
- 其次是可以减少使用不必要的脚本
- 最后我们还可以使用代码分割（Code Splitting）来解决
2. 主线程被阻塞
这种情况出现，是因为浏览器的主线程在忙于处理任务时，会导致用户输入被延迟处理。
我的解决方法：
- 第一，我们可以优化任务的执行顺序
- 第二，我们可以将非关键的任务设置延迟执行
- 第三，我们还就可以使用Web Worker来处理复杂的计算
3. 第三方脚本影响
这是因为，很多第三方的脚本，例如广告代码、统计工具等，可能会拖慢页面的响应速度。
我的解决方法：
- 第一，可以精简第三方脚本的数量
- 第二，可以使用异步加载（async/defer）
- 第三，正确的评估每个脚本的必要性，非必要的脚本可以不要
4. 资源加载优先级不合理
如果关键资源加载顺序不合理，也有可能会影响到交互的响应速度。
我的解决方法：
- 给网页设置优先加载关键交互资源
- 对于非核心内容设置延迟加载
优化好FID能提升页面交互的流畅度
一个好的页面，需要做到不仅页面加载得快，还可以快速的响应用户。如果说页面看起来已经加载完成，但如果无法及时响应操作，用户体验依然会不好。所以说我们在优化时需要重点关注主线程是否空闲，以及用户操作是否可以被及时处理。从实际上的结果来看，当页面能够快速响应用户输入时，用户的整体体验会明显改善。