提问人：sradha 提问时间：10/18/2023 最后编辑：sradha 更新时间：10/18/2023 访问量：105
如何提高网站的LCP分数，其中h1是视口内绘制的最大内容元素
How to improve LCP score of website where h1 is the largest contentful element painted within the viewport
问：
LCP 即将到来 2.8 秒，需要降低。 在检查了 PageSpeed Insights 后，知道 h1 是 LCP。
<div class="election-heading">
<span><h1 style="min-height:33px;">उत्तर प्रदेश राज्यपालों की सूची</h1></span>
</div>
.election-heading {
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 10px;
}
任何建议都会有所帮助。
为了更清楚，附上了 SS
答：
-1赞
AL AMIN
10/18/2023
#1
.election-guru-heading {
color: #000;
padding: 5px 0 15px;
float: left;
font-weight: 600;
text-transform: uppercase;
}
评论
0赞
sradha
10/18/2023
我应该减小字体大小：24px吗？或删除
0赞
tacoshy
10/18/2023
font-size 不会增加 2.6 秒，只是读取该行所需的少量 ns
0赞
sradha
10/18/2023
代码已更新...
1赞
Jeremy Caney
10/19/2023
感谢您对 Stack Overflow 社区的贡献。这可能是一个正确的答案，但提供代码的额外解释会非常有用，以便开发人员可以理解您的推理。这对于不熟悉语法或难以理解概念的新开发人员特别有用。为了社区的利益，您能否编辑您的答案以包含更多详细信息？
1赞
Barry Pollard
10/18/2023
#2
Google Chrome 团队的优化 LCP 指南中有很多指导（完全披露 - 我写了一些本指南）
首先要做的是了解为什么元素需要一段时间来处理。这是您需要优化的页面上的内容吗？还是更多的是基础设施问题？
本指南的“了解您的 LCP”部分教您如何使用 PageSpeed Insights 中的其他指标来了解 LCP。
TTFB 是这 2.8 秒的很大一部分吗？如果是这样，这表明这不是页面代码本身，而是页面的加载方式。这可能是由于后端服务器速度较慢，或者用户离服务器较远（在这种情况下，您可能需要使用 CDN），或者用户通过多个重定向访问页面（例如，点击广告到达那里时）。
如果 TTFB 速度快而 FCP 速度慢，则页面需要一段时间才能呈现。为什么？是客户端 SPA 应用程序吗？
如果 TTFB 很快，FCP 很快，但 LCP 很慢，那么你可以开始看看为什么。H1 文本是由 JavaScript 注入的吗？还是通过一些水合作用效果重新绘制 SPA？
您解决问题的选项取决于它是哪些问题。
在提供更多信息时进行编辑
您的屏幕截图显示数据是针对整个源的，而不仅仅是该 URL。可能是该 URL 速度很快，而您的源（又名站点）上还有其他流行的 URL 速度慢并拖累了源编号。
但是，报告的 Lighthouse 部分确实显示了此特定页面的问题，TTFB 为 620 毫秒（请注意，这不包括任何重定向，因此在现实生活中可能会更长），然后在 H1 渲染前 1.6 秒。
我自己运行您在 PageSpeed Insights 中提供的 URL，我在移动设备上获得了不同的 LCP 元素。对我来说，它显示为延迟加载的图像（不要延迟加载您的 LCP 元素）。“发现您的真实用户正在经历的内容”部分顶部的 LCP 编号将是所有用户正在经历的内容的聚合。因此，如果许多人像我一样将视频元素作为 LCP 元素，那么这将相应地扭曲 LCP 结果。
但总的来说，该网站看起来非常非常繁忙。它下载 31 MB 的视频和另外 10 MB 的其他 JavaScript。在这样的页面上获得体面的性能将非常困难。我建议你看看像这样懒惰地加载大量资源。
评论
1赞
Barry Pollard
10/18/2023
答案已更新。
评论