使用Web Vitals针对性的优化前端LCP指标

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
• 这部分时间表示元素渲染延迟的时间。即资源下载完成后到元素实际呈现完成之间的时间。