reactjs - 灯塔上最大的满意油漆 (LCP) 是 ap 标签。（使用盖茨比）

Question

我不知道为什么我的 LCP 会是 ap 标签，我也不知道我会做些什么来减小它的大小。有时它会达到 2.6 秒并给出黄色评级（而不是绿色）。

这是 p 标签。所有这些类都是引导类。

<p className="text-center mb-md-5 mt-0 mb-5">{aboutText}</p>

这是变量aboutText

const aboutText = `Suddenly  Magazine highlights the uniqueness of Saskatchewan,  and its sudden rise in popularity and growth mentioned in publications such as USA Today and the New York Times.

Advertorials and Articles focus on its rare & particular tourism, its passionate sports, its character, and the prosperous opportunity for businesses and artists influenced by a Saskatchewan setting.

It is centred in Saskatoon, but contributors range from Lac La Ronge in the North, to provincial boundaries east and west, to the Outlaw Caves near the US border.`

---

域名是https://suddenlysask.com

标签： reactjsgatsbypagespeedlighthousepagespeed-insights

Answer 1

那么为什么你的 LCP 是一个p标签呢？

它只在移动 ap 标签上，这里看看移动大小。

可以清楚地看到p标签在这里占据了最多的位置。

您可以尝试在移动设备上将图像放大，以便灯塔将图像计为 LCP。

另一种解决方案是将您的p标签拆分为 2 个较小的p标签

另一种解决方案可能是（不推荐使用女巫）将您的p标签稍微从视口中剪掉，因为...

为最大内容绘制报告的元素大小通常是用户在视口中可见的大小。如果元素延伸到视口之外，或者任何元素被剪裁或具有不可见的溢出，则这些部分不计入元素的大小。

我猜你的坏结果来自这里的这条线：

<link data-react-helmet="true" rel="preload" href="https://fonts.googleapis.com/css?family=Montserrat|Helvetica+Neue|Helvetica|Arial&amp;display=swap">

为什么最多需要 2.6 秒？

这是我的猜测：

加载谷歌字体可能需要一些时间，并且不能保证它总是在同一时间加载，所以当字体加载时，它会交换你的字体，这意味着p标签交换。这意味着p带有新字体的标签被视为新的 LCP。

出于测试目的，您可以尝试删除link并查看它是否会影响您在 LCP 的速度得分

最后，我会将段落分成 2 个较小的段落，以便图像是 LCP。我认为这是最简单的解决方案。