如何优化使用谷歌Lighthouse分析出的Load Delay问题？

Question

上下文：公司对上线的app进行打分，我们这个项目的分很低需要进行整改，我用lighthous对分最低的几个页面分析

发现lcp时间特别长，说明有图片加载太久了，进一步分析发现

这个图片的Load Delay时间非常长

但是页面刷新完到整个页面渲染出来到可交互远没有八九秒这么久，我埋点出来的时间也很正常，想知道这个时间lighthouse插件是怎么计算出来的，有没有什么好的优化方案，求助求助

Answer 1

这个数据一般是从你的页面开始加载开始算，到这个图片被加载为止，得到的时间。

影响它的因素有很多：

1. 你 HTML 的大小
2. 首屏渲染开始的时间
3. JS 加载的时间和执行结果

建议：

1. 一般来说，我们的核心内容很少会是一个图片，所以可以先考虑给它 loading="lazy"
2. 不看 LCP，你这个页面毛病也不少，FCP 2.5，TBT 1.6S，CLS 0.26（26% 的内容都在抖动），建议先整体优化一下