即使从一开始就加载了最大的内容，最大的内容绘制时间也确实很慢答案

【问题标题】：Largest Contentful Paint timing really slow even though the largest content is loaded from the beginning即使从一开始就加载了最大的内容，最大的内容绘制时间也确实很慢
【发布时间】：2021-03-23 06:40:46
【问题描述】：

我正在使用带有样式组件的 react ssr，谷歌速度测试显示最大内容加载速度非常慢。

第一次绘制时间大约需要 1.1 秒，我网站的最大内容是图像英雄，它说大约需要 12 秒。但是，绘制时间线几乎从一开始就显示图像。

下图来自开发工具性能标签。

如您所见，图像一直存在。当我运行性能测试时，图像有时会变为空白，但图像会在第一次绘制之前显示。

从性能结果看有没有异常？

【问题讨论】：

这里缺少一些信息来给出完整的答案but see if this answer I gave 涵盖了一些关于为什么 PSI 显示的时间比性能时间线更长的信息。此外，您还取消了一些隐私时间表，因此无法查看那里是否有任何更改。 LCP 显示在我所看到的大约 3.4 秒以上，正如我在链接答案中所解释的那样，由于网络节流和 CPU 减速，Lighthouse 大约需要 12 秒。
另外，First Paint 与 Largest Contentful Paint 不同，我只提一下，当您在问题的不同位置引用并引用第一次内容绘制时间（1.1 秒）而不是最大 Contentful Paint时间（3.4 秒），只是想检查一下你知道区别（如果不乐意解释的话！）
我知道第一次内容绘制时间与最大内容绘制时间不同。我只提到是因为英雄图像从 1.1 秒开始显示，但直到 12 秒才算最大内容
好吧，只是你所说的“图像在第一次绘制之前显示”（这是不可能的）之类的东西让我想检查一下。在这种情况下，恐怕我们需要一个具有相同行为的 URL 或小提琴来提供帮助，因为性能时间线没有显示任何有用的信息。我唯一的猜测是，由于某种原因，图像被绘制了两次（也许它是行为不端的滑块的一部分）。如果您想分享 URL 或小提琴，我可以提供帮助，否则 this question and answer 将帮助您查看可能有帮助的油漆闪烁。
您必须按照我链接的答案中的说明观看页面上闪烁的油漆，查看图像是否绘制了两次，然后看看为什么会这样，不幸的是，这是我能提供的最好的与提供的信息。如果您使用延迟加载、JavaScript 在页面上构建任何内容、延迟脚本等，LCP 之前的 DCL 也很常见。所以很遗憾，我担心这对我们没有帮助。

标签： reactjs performance google-pagespeed react-ssr

【解决方案1】：

您有一些正在运行的 JS 似乎阻塞了主线程，因此 FPS 下降。分析主线程的大黄色部分，找出慢的罪魁祸首。

【讨论】：

你好，所以你是说当 javascript 运行最大的内容时，绘制不会被计算在内？
取决于你的页面内容，但一般 JS 会阻止浏览器绘画。这就是为什么你应该评估你看到的大黄色块以找到一个缓慢的部分。
我希望我可以，但所有的主线程部分都不是可读的代码。