reactjs - 灯塔中最大的内容涂料 (LCP) 是 p 标签。 (使用 Gatsby )

Question

我不知道为什么我的 LCP 会是一个 p 标签，我也不知道我会做些什么来减小它的大小。有时它会达到 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

Answer 1

人们似乎完全误解了最大内容绘制指标的目的。它旨在向您显示上述折叠内容的大部分何时准备就绪。
什么 item is the Largest Contentful Paint 不如 重要当它发生。 什么 item 仅在确定可能会减慢您的页面速度时有用。
它是确定“首屏”内容何时被充分绘制以使最终用户将页面视为“完整”的主要指标(这是感知的完整性，仍然可以在页面下方/后台加载内容) .
分割段落、将其包装在 div 中、使其更高等的建议。毫无目的 ，他们只是将 LCP 转移到其他东西上(可能)让你的分数看起来更好，但实际上并没有解决问题。
您要做的是优化页面上的初始内容。
为此，您只想提供“首屏”HTML 以及首屏内容所需的 CSS 和 JS。
然后你为其他一切服务。
这篇文章很好地介绍了关键的 JS 和 CSS https://www.smashingmagazine.com/2015/08/understanding-critical-css/
然而，简而言之，内联关键 CSS 和 JS 意味着 在页面上呈现初始内容所需的 CSS 和 JS 应该内联在 HTML 中.现在我猜测像 Gatsby 这样的东西你会内联呈现折叠内容上方、折叠 CSS 等上方的关键 JS，但原理是相同的。
关键是上面的折叠内容都应该在 HTML 中提供(非矢量图像除外)，这样就没有等待 CSS 文件、JS 文件等的往返时间。
所以为了清楚起见，而不是:-

请求 HTML，(到服务器往返 200 毫秒)

加载和解析 HTML，找到呈现初始页面内容所需的 CSS 和 JS 链接

请求 CSS 和 JS。 (200 毫秒往返服务器)

CSS 和 JS 加载

足以渲染页面。

相反，您有

请求 HTML，(到服务器往返 200 毫秒)

已加载 HTML，所有必需的 CSS 和 JS 内联在 HTML

足以渲染页面

这可能看起来不多，但 200 毫秒可以对感知速度产生巨大影响。
这也是一个简化的示例，通常一个页面需要 20 个或更多请求来呈现上述折叠内容。由于一次有 8 个请求的限制(通常)，这意味着最多可能有 3 个 200 毫秒的往返等待服务器响应。
查看您的站点，您将误读“关键请求链”，因为初始页面中没有提供 HTML，因为它都是通过 JS 呈现的。 这可能就是您认为没有问题的原因。
如果您执行上述操作，假设您的图像已优化，您将获得较低的 FCP 和 LCP 时间。