首次输入延迟 First Input Delay (FID)

发布日期:2021-07-09

今天有机会说一下这个挺有意思的指标(其实没啥意思)。简单说,这个指标是指页面加载中,用户点击一个链接或者按钮之后,浏览器做出正确反映的延时时间。(鸽和你一样奇怪,为啥要有延迟)

什么是首次输入延迟? 

举个栗子,你去一个小饭店吃饭,进去坐了了下来,高声叫到:服务员点菜。从你开始叫,到服务员前来点菜的这段时间就叫做首次输入延迟。如果饭店不忙,相信很快就会有人来点菜。如果饭店很忙,你可能会等很久。于是你拿出手机来自助扫码点餐。嘿嘿。

反映在浏览器上,第一输入延迟(FID)就是用户首次与您的站点交互时的时间到浏览器实际能够的时间回应这段延迟。作为程序员来说,我们总是认为你点了按钮当然立刻就会回应。但实际用户遇到的情况并非如此。一般都是因为浏览器正在很忙的加载或者运行什么大型JS。这段时间,无论用户点啥都不会有反应的。

鸽知道你可能还没有懂,上图。

使用FCP,TTI和FID的页面加载跟踪

中间那个红色区域。因为浏览器在加载一个JS,很忙。所以呢,这段时间浏览器不会也不能响应用户输入。所以这个就是传说中的FID。

 

 

 

Good fid values are 2.5 seconds, poor values are greater than 4.0 seconds and anything in between needs improvement
 

什么是一个好的FID? 

不要超过0.1秒也就是100毫秒。考虑到手机,这个数字在PC上最好不要超过75毫秒。虎翼和起飞页的FID都很低,肯定是小于75ms的。因为总共加载时间也才300ms么。不可能阻塞太久的。至于具体是多少,鸽还真没有好好测试过。