灯塔上最大的 contentful paint (LCP) 是一个 p 标签。 （使用盖茨比）
Largest contententful paint (LCP) on lighthouse is a p tag. (Using gatsby)
我不知道为什么我的 LCP 会是一个 p 标签，我也不知道我该怎么做才能减小它的大小。有时它会达到 2.6 秒并给出黄色评级（而不是绿色）。
这是p标签。所有这些 类 都是 bootstrap 类.
<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.`
最近有一些 Gatsby 用户抱怨 Lighthouse 分数大幅下降和下降，每个人都同意：由于 LCP（Largest Contentful Paint）响应时间长，Lighthouse 的分数下降了很多。
这是 new Lighthouse version (v6) 更改的结果，实际上，将 LCP 作为新概念和指标引入。如您所见，更改日志是在 5 月编写的，但取决于用户，并且在站点上，更改到达的日期不同（我猜这取决于 Google 的服务器和此更改复制的时间他们）。
根据文档：
Largest Contentful Paint (LCP) is a measurement of perceived loading
experience. It marks the point during page load when the primary–or
"largest"–content has loaded and is visible to the user. LCP is an
important complement to First Contentful Paint (FCP) which only
captures the very beginning of the loading experience. LCP provides a
signal to developers about how quickly a user is actually able to see
the content of a page. An LCP score below 2.5 seconds is considered
'Good.'
正如你所说，这个指标与FCP密切相关，是它的补充：提高FCP肯定会提高LCP分数。根据变更日志：
FCP's weight has been reduced from 23% to 15%. Measuring only when the
first pixel is painted (FCP) didn't give us a complete picture.
Combining it with measuring when users are able to see what they most
likely care about (LCP) better reflects the loading experience.
您可以按照此Gatsby GitHub thread查看用户在其他情况下如何绕过此问题。
对于你的情况，我建议：
- 删除你的
<p> 并再次检查分数以查看更改（只是为了确定）。
- 将您的
<p> 包裹在 <div> 中。
- 将您的
<p> 分成 2 或 3 个小块，使它们可用于 LCP 和 FCP。
如果 none 上面的工作，我会尝试玩 <p> 的高度，看看它是否提高了分数。
我猜 Gatsby（还有 Google）正在努力调整这个新功能并修复这个坏分数问题。
那为什么你的 LCP 是 p 标签？
它只在手机上有一个p标签，这里看看手机尺寸。
很明显，p标签在这里占据了最多的位置。
您可以尝试在移动设备上将图片放大，这样 lighthouse 会将图片计为 LCP。
另一个解决方案是将您的 p 标签分成 2 个较小的 p 标签
另一个解决方案可能是（ 不推荐）将您的 p 标签稍微切出视口，因为...
The size of the element reported for Largest Contentful Paint is
typically the size that's visible to the user within the viewport. If the
element extends outside of the viewport, or if any of the element is
clipped or has non-visible overflow, those portions do not count
toward the element's size.
我猜你的坏结果来自这里的这一行：
<link data-react-helmet="true" rel="preload" href="https://fonts.googleapis.com/css?family=Montserrat|Helvetica+Neue|Helvetica|Arial&display=swap">
Why does it take up to 2.6 sec?
这是我的猜测：
加载 google 字体可能需要时间，并且不能保证它始终完全相同地加载，因此当加载字体时它会交换您的字体，这意味着 p标签交换。这意味着带有新字体的 p 标签被视为新的 LCP。
出于测试目的，您可以尝试删除 link 并查看它是否会影响您在 LCP 的速度得分
最后，我会将段落分成 2 个较小的段落，这样图像就是 LCP。我认为这是最简单的解决方案。
人们似乎完全误解了 Largest Contentful Paint 指标的用途。它旨在向您显示大部分首屏内容已准备就绪。
什么 项是最大的内容绘画并不像何时 重要。 What 项目仅在确定可能导致您的页面变慢的原因时有用。
这是确定 'above the fold' 内容何时被充分绘制以致最终用户会将页面视为“完整”的主要指标（这是感知的完整性，页面下方仍然可以加载内容/ 在后台）。
拆分段落的建议，将其包裹在 div 中，使其更高等等。毫无用处，他们只是将 LCP 转移到某些东西上否则（可能）让你的分数看起来更好但实际上并没有解决问题。
您要做的是优化页面上的初始内容。
为此，您只想提供 'above the fold' HTML 以及首屏内容所需的 CSS 和 JS。
然后你为其他一切服务。
这篇文章很好地介绍了关键的JS和CSShttps://www.smashingmagazine.com/2015/08/understanding-critical-css/
但是简而言之内联关键CSS和JS意味着渲染页面初始内容所需的CSS和JS应该内联HTML。现在我猜测像 Gatsby 这样的东西你会内联关键的 JS 来渲染首屏内容，首屏 CSS 等，但原理是一样的。
关键是上面的内容应该在 HTML 内全部提供（非矢量图像除外），这样就没有 round-trip 时间等待 CSS文件、JS文件等
所以为了清楚起见而不是：-
- HTML 已请求，（到服务器的往返时间为 200 毫秒）
- HTML 加载并解析，指向 CSS 的链接和 JS 发现需要呈现初始页面内容
- CSS 和 JS 请求。 （到服务器的往返时间为 200 毫秒）
- CSS 并加载 JS
- 足以呈现页面。
你有
- HTML 已请求，（到服务器的往返时间为 200 毫秒）
- HTML 已加载，所有必需 CSS 和 JS 内联 HTML
- 足以呈现页面
这可能看起来不是很多，但是 200 毫秒可以对感知速度产生巨大的影响。
这也是一个简化的示例，通常一个页面需要 20 个或更多请求才能呈现首屏内容。由于一次（通常）8 个请求的限制，这意味着最多可能有 3 round-trip 秒的 200 毫秒等待服务器响应。
查看您的网站，您会得到“关键请求链”的错误读数，因为初始页面中没有 HTML 服务，因为它都是通过 JS 呈现的。 这可能就是您认为没有问题的原因。
如果您执行上述操作，假设您的图像已优化，您将获得较低的 FCP 和 LCP 时间。
我不知道为什么我的 LCP 会是一个 p 标签，我也不知道我该怎么做才能减小它的大小。有时它会达到 2.6 秒并给出黄色评级（而不是绿色）。
这是p标签。所有这些 类 都是 bootstrap 类.
<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.`
最近有一些 Gatsby 用户抱怨 Lighthouse 分数大幅下降和下降，每个人都同意：由于 LCP（Largest Contentful Paint）响应时间长，Lighthouse 的分数下降了很多。
这是 new Lighthouse version (v6) 更改的结果，实际上，将 LCP 作为新概念和指标引入。如您所见，更改日志是在 5 月编写的，但取决于用户，并且在站点上，更改到达的日期不同（我猜这取决于 Google 的服务器和此更改复制的时间他们）。
根据文档：
Largest Contentful Paint (LCP) is a measurement of perceived loading experience. It marks the point during page load when the primary–or "largest"–content has loaded and is visible to the user. LCP is an important complement to First Contentful Paint (FCP) which only captures the very beginning of the loading experience. LCP provides a signal to developers about how quickly a user is actually able to see the content of a page. An LCP score below 2.5 seconds is considered 'Good.'
正如你所说，这个指标与FCP密切相关，是它的补充：提高FCP肯定会提高LCP分数。根据变更日志：
FCP's weight has been reduced from 23% to 15%. Measuring only when the first pixel is painted (FCP) didn't give us a complete picture. Combining it with measuring when users are able to see what they most likely care about (LCP) better reflects the loading experience.
您可以按照此Gatsby GitHub thread查看用户在其他情况下如何绕过此问题。
对于你的情况，我建议：
- 删除你的
<p>并再次检查分数以查看更改（只是为了确定）。 - 将您的
<p>包裹在<div>中。 - 将您的
<p>分成 2 或 3 个小块，使它们可用于 LCP 和 FCP。
如果 none 上面的工作，我会尝试玩 <p> 的高度，看看它是否提高了分数。
我猜 Gatsby（还有 Google）正在努力调整这个新功能并修复这个坏分数问题。
那为什么你的 LCP 是 p 标签？
它只在手机上有一个p标签，这里看看手机尺寸。
很明显，p标签在这里占据了最多的位置。
您可以尝试在移动设备上将图片放大，这样 lighthouse 会将图片计为 LCP。
另一个解决方案是将您的 p 标签分成 2 个较小的 p 标签
另一个解决方案可能是（ 不推荐）将您的 p 标签稍微切出视口，因为...
The size of the element reported for Largest Contentful Paint is typically the size that's visible to the user within the viewport. If the element extends outside of the viewport, or if any of the element is clipped or has non-visible overflow, those portions do not count toward the element's size.
我猜你的坏结果来自这里的这一行：
<link data-react-helmet="true" rel="preload" href="https://fonts.googleapis.com/css?family=Montserrat|Helvetica+Neue|Helvetica|Arial&display=swap">
Why does it take up to 2.6 sec?
这是我的猜测：
加载 google 字体可能需要时间，并且不能保证它始终完全相同地加载，因此当加载字体时它会交换您的字体，这意味着 p标签交换。这意味着带有新字体的 p 标签被视为新的 LCP。
出于测试目的，您可以尝试删除 link 并查看它是否会影响您在 LCP 的速度得分
最后，我会将段落分成 2 个较小的段落，这样图像就是 LCP。我认为这是最简单的解决方案。
人们似乎完全误解了 Largest Contentful Paint 指标的用途。它旨在向您显示大部分首屏内容已准备就绪。
什么 项是最大的内容绘画并不像何时 重要。 What 项目仅在确定可能导致您的页面变慢的原因时有用。
这是确定 'above the fold' 内容何时被充分绘制以致最终用户会将页面视为“完整”的主要指标（这是感知的完整性，页面下方仍然可以加载内容/ 在后台）。
拆分段落的建议，将其包裹在 div 中，使其更高等等。毫无用处，他们只是将 LCP 转移到某些东西上否则（可能）让你的分数看起来更好但实际上并没有解决问题。
您要做的是优化页面上的初始内容。
为此，您只想提供 'above the fold' HTML 以及首屏内容所需的 CSS 和 JS。
然后你为其他一切服务。
这篇文章很好地介绍了关键的JS和CSShttps://www.smashingmagazine.com/2015/08/understanding-critical-css/
但是简而言之内联关键CSS和JS意味着渲染页面初始内容所需的CSS和JS应该内联HTML。现在我猜测像 Gatsby 这样的东西你会内联关键的 JS 来渲染首屏内容，首屏 CSS 等，但原理是一样的。
关键是上面的内容应该在 HTML 内全部提供（非矢量图像除外），这样就没有 round-trip 时间等待 CSS文件、JS文件等
所以为了清楚起见而不是：-
- HTML 已请求，（到服务器的往返时间为 200 毫秒）
- HTML 加载并解析，指向 CSS 的链接和 JS 发现需要呈现初始页面内容
- CSS 和 JS 请求。 （到服务器的往返时间为 200 毫秒）
- CSS 并加载 JS
- 足以呈现页面。
你有
- HTML 已请求，（到服务器的往返时间为 200 毫秒）
- HTML 已加载，所有必需 CSS 和 JS 内联 HTML
- 足以呈现页面
这可能看起来不是很多，但是 200 毫秒可以对感知速度产生巨大的影响。
这也是一个简化的示例，通常一个页面需要 20 个或更多请求才能呈现首屏内容。由于一次（通常）8 个请求的限制，这意味着最多可能有 3 round-trip 秒的 200 毫秒等待服务器响应。
查看您的网站，您会得到“关键请求链”的错误读数，因为初始页面中没有 HTML 服务，因为它都是通过 JS 呈现的。 这可能就是您认为没有问题的原因。
如果您执行上述操作，假设您的图像已优化，您将获得较低的 FCP 和 LCP 时间。