灯塔上最大的内容油漆（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

Answer 1

人们似乎完全误解了最大内容绘制指标的目的。它旨在向您显示上面的大部分折叠内容何时准备就绪。

什么项目是最大的内容性绘画并不像它发生时那么重要。哪些项目仅在确定哪些因素可能会减慢页面速度时有用。

它是确定“首屏”内容何时被充分绘制以使最终用户将页面视为“完整”的主要指标（这是感知的完整性，仍然可以在页面下方/后台加载内容） 。

分割段落、将其包装在 div 中、使其更高等的建议没有任何意义，它们只是将 LCP 转移到其他内容上（可能）使您的分数看起来更好，但实际上并没有解决问题。

您要做的是优化页面上的初始内容。

为此，您只想提供“首屏”HTML 以及首屏内容所需的 CSS 和 JS。

然后你服务其他一切。

这篇文章很好地介绍了关键的 JS 和 CSS https://www.smashingmagazine.com/2015/08/understanding-ritic-css/

然而，简而言之，内联关键 CSS 和 JS 意味着在页面上呈现初始内容所需的 CSS 和 JS 应该内联在 HTML 中。现在我猜测像 Gatsby 这样的东西你会内联关键的 JS 来渲染折叠上方的内容，折叠上方的 CSS 等，但原理是相同的。

关键是上面的折叠内容应该全部在 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 时间。