1、安装Web Vitals浏览器插件
2、打开设置
3、勾选打印日志
4、 打开浏览器控制台即可查看需要优化的点
5、LCP耗时的构成部分
"LCP sub-part": "Time to First Byte"
- "Time (ms)": 39
- 这个部分时间表示服务器的首个字节到达所花费的时间。这是指从浏览器发出请求到服务器响应的时间。较短的时间对于优化 LCP 持续时间很重要，因为它反映了服务器响应的速度。
"LCP sub-part": "Resource load delay"
- "Time (ms)": 3247
- 这部分时间表示资源加载延迟的时间。即资源开始加载直到加载完成之间的时间。这可能受到网络速度或者服务器性能等因素的影响。
"LCP sub-part": "Resource load time"
- "Time (ms)": 27
- 这指的是实际资源加载所需要的时间。这部分时间表示了实际下载资源所花费的时间。
"LCP sub-part": "Element render delay"
- "Time (ms)": 19
- 这部分时间表示元素渲染延迟的时间。即资源下载完成后到元素实际呈现完成之间的时间。