如何降低我在 PageSpeed Insights 上的 LCP 分数？

Question

语境：

我最近为一位客户（我 18 岁）完成了我的第一个项目，最近我一直在努力改进网络重要因素以提高他们的 SEO。

我遇到的最大问题是我的最大内容绘制太高，这意味着我的所有 URL 在 Search Console 上都被标记为“差”。 我现在已经在这上面花费了几个小时并阅读了无数文章，其中 90% 的术语都在我的脑海中。

迄今为止的研究/尝试：

我压缩了主页上的所有图像，缩短、调整大小和压缩视频，我将几乎所有文件移动到由 CDN 链接的缩小版本，我推迟了大部分 CSS，我为所有添加了延迟加载图像，我确保文本对我的字体保持可见，我优化了我的网络托管，缩小了我的大部分 CSS/JS...

但我所做的一切似乎都没有真正提高 LCP 分数。 即使删除视频（最大的元素）也几乎没有触及我的分数......

这是指向 Pagespeed Insights 页面的链接：

https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fprincestheatre.co.uk%2F&tab=mobile

网站是princestheatre.co.uk 。

我（很可能）只是真的很愚蠢并遗漏了一些明显的东西，还是我真的需要在这里争取每一毫秒？

我真的很感激任何帮助，谢谢:)

Answer 1

改进 LCP 很难，所以你并不愚蠢，而且并不总是很明显。 您是正确的，大多数关于该主题的博客文章只是重新格式化了您在 PageSpeed Insights 上获得的内容。 我构建了一个基于 PageSpeed Insights 的应用程序，但希望能更清楚地说明要做什么。 我鼓励您尝试一下，如果您有具体问题，请通过网站上的聊天应用程序与我联系。 如果您对如何改进应用程序有任何反馈，我很想知道。

https://waterfaller.dev/?url=https://princestheatre.co.uk

您可以查看桌面和移动结果。 我会查看导致网站速度减慢的主要文件。

但是为了让您开始，这些报告中不会显示。

您的 LCP 失败的原因是您在标签中既有阻止渲染的样式表，也有样式块。 因此，一开始我会将所有样式标记放入 或将它们全部放入一个样式表文件中。 然后你可以处理“关键 CSS”，这可能很困难。

或者，如果您想避免使用“关键 CSS”，那么我将执行以下操作，

1. 将所有样式放入 1-3 个样式表文件中（例如，您是否需要引导图标和字体都很棒？）
2. 预加载这些样式表

https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload

这些样式表“阻止”浏览器开始呈现页面。 所以目标是尽可能快地加载所有需要的 CSS。 您知道如果第一次内容绘制或开始渲染时间下降，这将起作用。

如果它们下降，那么您的 LCP 就会下降。

然后我会弄清楚如何预加载你的字体。 由于您是自托管字体，因此这很容易。 为了方便起见，我将预加载 woff2 字体。

从这里开始解释为什么浏览器不能更快地呈现页面。 然后重新测试看看。 提示：您需要弄清楚如何延迟加载视频和图像。 但我不会从那里开始。

Answer 2

最大内容绘制 (LCP) 指标报告视口内可见的最大图像或文本块的渲染时间，相对于页面首次开始加载的时间。

LCP 没问题，在桌面的 PSI 中为绿色，要解决移动设备尝试仅渲染基于文本的内容（没有滑块或任何需要 JS 的任何花哨的东西，只需要文本）为您的网站的顶部，您将看到 LCP 中的改进结果为手机。

Answer 3

由于这是您的第一个项目，我建议了解 LCP 是什么，不是什么。 理解它是资本。

Google 的定义：Largest Contentful Paint (LCP) 指标报告相对于页面首次开始加载时在视口内可见的最大图像或文本块的渲染时间。

换句话说，您可以选择设计自己的方式来选择内容最多的油漆，从而极大地影响分数。

一个很好的技巧是通过运行灯塔并查看 LCP 来查看页面上的 LCP 目标是什么。 这就是它在 Lighthouse 中的样子。

在您知道 LCP 是什么之后，您可以选择稍微修改设计以选择默认情况下速度很快的 LCP（文本、小图像）。 LCP 的危险之一是当您开始在视口的最末端显示图片/大文本块时，它就变成了 LCP。 在这种情况下，引入一个空间将其拉出视口是非常好的（示例）。