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

IT技术 reactjs gatsby pagespeed lighthouse pagespeed-insights
2021-05-16 17:37:37

我不知道为什么我的 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

3个回答

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

什么项目是最大的Contentful涂料是不一样重要,当它发生。什么项目仅用于确定可能会减慢页面速度的内容。

它是确定何时充分绘制“首屏”内容以使最终用户将页面视为“完整”的主要指标(这是感知的完整性,仍然可以在页面下方/背景中加载内容) .

拆分段落、将其包装在 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 时间。

那么为什么你的 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 秒?

这是我的猜测:

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

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

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

最近有一些 Gatsby 用户抱怨 Lighthouse 分数大幅下降和下降,大家都同意:由于 LCP(最大内容绘制)响应时间较长,Lighthouse 的分数下降了很多。

这是新 Lighthouse 版本 (v6) 中更改的结果,该版本实际上将 LCP 作为新概念和度量引入。如您所见,更改日志可能写入但取决于用户,并且在站点上,更改到达的日期不同(我猜这取决于 Google 的服务器以及此更改通过它们复制的时间)。

根据文档:

最大内容绘制 (LCP)是对感知加载体验的衡量。它标记页面加载期间主要(或“最大”)内容已加载并且对用户可见的时间点。LCP 是 First Contentful Paint (FCP) 的重要补充,它只捕捉加载体验的最开始。LCP 向开发人员提供了一个信号,说明用户实际能够以多快的速度查看页面内容。LCP 分数低于 2.5 秒被认为是“好”。

正如你所说,这个指标与 FCP 密切相关,它是它的补充:提高 FCP 肯定会提高 LCP 分数。根据变更日志:

FCP 的重量从 23% 减少到 15%。仅在绘制第一个像素 (FCP) 时进行测量并不能为我们提供完整的图片。将其与测量用户何时能够看到他们最可能关心的内容 (LCP) 相结合,可以更好地反映加载体验。

你可以关注这个Gatsby GitHub 线程来检查用户在其他情况下如何绕过这个问题。

在你的情况下,我建议:

  • 删除您的<p>并再次检查分数以查看更改(只是为了确定)。
  • 将您的<p>内部包裹起来<div>
  • 将您的文件分成<p>2 或 3 个小块,使它们可用于 LCP 和 FCP。

如果以上都不起作用,我会尝试在<p>'s height 上,看看它是否提高了分数。

我猜 Gatsby(还有 Google)正在努力调整这个新功能并解决这个糟糕的分数问题。