写这篇文章的契机是登陆服务器的时候,网站提示INP将于2024年3月取代FID作为 Core Web Vitals 的一部分。
那么问题来了，啥是INP，啥是FID，这些指标到底是什么，我们如何测量它，又如何优化它
什么是FID(首次输入延迟)
它是一个「真实用户网页性能指标」，用于追踪用户在进入网页后「首次」与网页进行交互的时间，直到浏览器开始处理该交互（即浏览器的主线程空闲时）。
人话就是, “页面按钮我看到了，但是你脚本还没加载好，我点不了啊，我啥时候能够开始交互呢” 的这个延迟时间。
- FID在100毫秒或以下被认为是良好的
- FID在100-300毫秒之间需要改进
- FID超过300毫秒被认为是较差的
如何测量
1、使用web-vital JavaScript库 可以同时测量多个指标 后文不会再提
import { onCLS, onFID, onLCP } from 'web-vitals'
onCLS(console.log)
onFID(console.log)
onLCP(console.log)
2、手动添加 PerformanceObserver 以跟踪输入。 如果我们不想导入web-vitals库，还可以手动使用Event Timing API来跟踪FID,具体用法大家需要的时候查一下就可以了
3、Google的lighthouse 不能直接测量这种真实的用户指标，虽然你可以看得到，但其实是不准确的，但是我们可以通过别的指标侧面体现，也就是总阻塞时间TBT(Total Blocking Time),如果我们改善了TBT，很可能也会改善FID。
如何优化
主要的优化方向就是减少堵塞时间跟优先加载重要脚本
- 较小的异步任务，做到不堵塞主进程
- 生成服务器内容，这样客户端做的活就会变少
- 按需加载第三方代码
- 使用web worker 减少主线程的工作负担
- 排序脚本，关键的脚本放在页面顶部,尽早下载进行
- 优化图像，压缩图像大小或使用WebP
- 删除不必要的脚本
- 使用延迟defer加载或者async加载脚本
什么是INP(与下一次绘制的交互)
这位兄台将在2024年三月份替代楼上那位FID,具体而言，它衡量的是用户交互（如点击或按键）后到下次在页面上看到视觉更新之间经过的时间，也就是【输入延迟】+【处理时间】+【呈现延迟】
人话就是我点击了按钮+处理我操作的时间+UI出现变化完成的时间,包含了FID
- 小于200ms 超过500ms不合格
如何测量
- Web Vitals
- Google PageSpeed Insights
指针在75%,意味着对于25%的用户他们感觉到的最长延迟是201ms
如何优化
- 避免滥用定时器,setInterval在一定的时间间隔内运行一个回调，因此有可能妨碍交互
- 避免长任务，也是避免堵塞主进程
- 避免交互重叠，手段如防抖；CSS动画；AbortController取消掉不需要的fetch
- 避免使用Alert、confirm、prompt对话框，这些会阻塞主进程
- 让主线程空闲，例如requestAnimatinFrame、web worker
- 减小dom大小减少呈现延迟
什么是LCP(最大内容块呈现时间)
呈现包含「最大数量内容」的元素所需的时间，也就是你屏幕上最大那货的加载时间,这里有个FCP,那就是第一个带有内容的元素绘制所需的时间
- LCP在250毫秒或以下被认为是优秀的
- LCP在400毫秒或以下被认为是良好的
- LCP在750毫秒或以下被认为是合格的
- LCP在750毫秒以上被认为是不合格的
如何测量
- Web Vitals
- Google PageSpeed Insights
如何优化
- 使用图像CDN
- 确保正确的图像尺寸,因为它是测量最大的模块
- 优化图像,如图片大小跟格式
- 提高服务器的响应速度
- 使用服务端缓存跟浏览器缓存(大家可以了解下LiteSpeed)
- 如果延迟加载模块导致LCP得分降低了，就不要在首屏上使用JavaScript的延迟图片加载
- 缩小js、css、html
- 推迟解析不必要的Javascript
- 压缩文本资源
- 消除堵塞的JS和CSS
我们可以使用Chrome DevTools 中的 Coverage来识别定位到非关键的CSS和JS文件
如果阻塞渲染的url中存在非关键代码,可以将其保留在url中，并标记async或者defer；必要的css放到页面头部的style中，非关键使用preload异步加载样式
什么是CLS(累计布局位移)
如果你的页面模块发生了很大的变化，用户刚想要点击这个模块，突然这个模块移动了，用户点错了，将会造成用户巨大的疑惑，所以稳定的视觉是非常重要的
造成CLS不合格的因素有哪些呢？
- 无尺寸的图像跟视频；
- 动态注入的内容；
- FOIT/FOUT字体闪烁；
- 在更新DOM之前等待网络响应的操作；
FOIT 字体文件未加载，出现空白再出现，为不可见的文本闪烁；FOUT先有默认样式后又突然文本样式化，为未样式化的文本闪烁
如何测量
跟LCP一致，基本都可以拿到
这里讲讲我们如何知道什么造成了布局偏移
我们可以在Chrome DevTools 中的 Performance 选项卡中看到导致页面偏移的dom元素
如何优化
- 使用css做动画
- 使用CDN
- 骨架屏占位
- 字体使用font-display
- 使用 link rel=preload 预加载字体文件
- 为视频和图像设置width、height、或者宽高比(padding-top/aspect ratio)
- 通过srcset属性设置不同视口和分辨率的图像源
- 给dom设置min-height、min-width 属性
总结
FID 是追踪「网站响应性」
CLS 是追踪「视觉稳定性」
LCP 是追踪「加载速度」
INP 是新一代的FID指标
这些指标体现了一个网站的可靠性，影响着我们网站排名
如果对您有所帮助，可以给个免费的小👍吗
