如何降低我在 PageSpeed Insights 上的 LCP 分数？
How can I lower my LCP score on PageSpeed Insights?
上下文：
我最近为一个客户完成了我的第一个项目（我今年 18 岁）并且最近我一直在努力改善网络活力以提升他们的搜索引擎优化。
我遇到的最大问题是我的 Largest Contentful Paint 太高了，这意味着我所有的 URL 在 Search Console 上都被标记为 'Poor' . 我现在已经在这上面花了几个小时，并且阅读了无数文章，其中 90% 的行话都在我脑海中闪过。
Research/Attempts 到目前为止:
我已经压缩了主页上的所有图像，缩短了视频的大小、调整了大小并压缩了视频，我几乎将所有文件都移动到了由 CDN 链接的缩小版本，我推迟了大部分 CSS ，我为所有图像添加了延迟加载，我确保文本对于我的字体仍然可见，我优化了我的虚拟主机，缩小了我的大部分 CSS/JS...
但我所做的一切似乎都没有真正提高 LCP 分数。即使删除视频（最大的元素）也几乎没有影响我的分数...
我（很可能）真的很愚蠢并且遗漏了一些明显的东西，还是我真的需要在这里争分夺秒？
非常感谢任何帮助，谢谢 :)
改善 LCP 很难，所以您并不愚蠢，而且并不总是很明显。你是对的，大多数关于该主题的博客文章只是重新格式化你在 PageSpeed Insights 上获得的内容。我构建了一个基于 PageSpeed Insights 的应用程序，但希望能更清楚地说明该做什么。我鼓励您尝试一下，如果您有具体问题，请通过网站上的聊天应用程序与我联系。如果您对如何改进应用程序有任何反馈，我很乐意知道。
https://waterfaller.dev/?url=https://princestheatre.co.uk
您可以查看桌面和移动结果。我会查看导致您网站速度变慢的主要文件。
但为了让您入门，这些报告中不会显示。
您的 LCP 失败的原因是您在标签内既有阻止呈现的样式表，也有样式块。因此，一开始我会将所有样式标签放入或将它们全部放入一个样式表文件中。然后你可以处理“critical CSS”，这可能很难。
或者，如果您想避免处理“关键 CSS”，那么我会执行以下操作，
- 将所有样式放入 1-3 个样式表文件中（例如，您是否需要 bootstrap 图标和很棒的字体？）
- 预加载那些样式表
https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload
这些样式表“阻止”浏览器开始呈现页面。所以目标是尽快加载所有需要的 CSS 。您知道如果第一次内容绘制或开始渲染时间减少，这会起作用。
如果它们出现故障，那么您的 LCP 也会出现故障。
然后我会弄清楚如何预加载您的字体。由于您是自行托管字体的，因此这很容易。为了方便起见，我只预加载了 woff2 字体。
从这里开始，因为这些解决了浏览器无法更快地呈现页面的原因。然后复试看看。提示：你会想弄清楚如何延迟加载视频和图像。但我不会从那里开始。
The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block visible within the viewport, relative to when the page first started loading.
LCP 正常，在 PSI 桌面版中显示为绿色，解决 移动版 尝试渲染 基于文本的内容（无滑块或任何需要 JS 的花哨的东西，只是文本）在您网站的顶部，您会看到 LCP for mobile 的改进结果。
由于这是您的第一个项目，我建议了解 LCP 是什么，不是什么。能看懂就够了。
Google 的定义：Largest Contentful Paint (LCP) 指标报告相对于页面首次开始加载时视口内可见的最大图像或文本块的渲染时间。
换句话说，您可以选择将自己的设计方式变成select最大内容的绘画，从而极大地影响分数。
一个好的技巧是通过 运行 灯塔查看页面上的 LCP 目标并查看 LCP。
That's how it looks in Lighthouse.
了解什么是 LCP 后，您可以选择将设计稍微修改为 select 默认情况下速度很快的 LCP（文本，小图像）。 LCP 的一个危险是，当您开始在视口的最末端显示 picture/big 文本块时，它就变成了 LCP。在这种情况下，引入 space 将其从视口中拉出是完全没问题的（示例）。
上下文：
我最近为一个客户完成了我的第一个项目（我今年 18 岁）并且最近我一直在努力改善网络活力以提升他们的搜索引擎优化。
我遇到的最大问题是我的 Largest Contentful Paint 太高了，这意味着我所有的 URL 在 Search Console 上都被标记为 'Poor' . 我现在已经在这上面花了几个小时，并且阅读了无数文章，其中 90% 的行话都在我脑海中闪过。
Research/Attempts 到目前为止:
我已经压缩了主页上的所有图像，缩短了视频的大小、调整了大小并压缩了视频，我几乎将所有文件都移动到了由 CDN 链接的缩小版本，我推迟了大部分 CSS ，我为所有图像添加了延迟加载，我确保文本对于我的字体仍然可见，我优化了我的虚拟主机，缩小了我的大部分 CSS/JS...
但我所做的一切似乎都没有真正提高 LCP 分数。即使删除视频（最大的元素）也几乎没有影响我的分数...
我（很可能）真的很愚蠢并且遗漏了一些明显的东西，还是我真的需要在这里争分夺秒？
非常感谢任何帮助，谢谢 :)
改善 LCP 很难，所以您并不愚蠢，而且并不总是很明显。你是对的，大多数关于该主题的博客文章只是重新格式化你在 PageSpeed Insights 上获得的内容。我构建了一个基于 PageSpeed Insights 的应用程序，但希望能更清楚地说明该做什么。我鼓励您尝试一下，如果您有具体问题，请通过网站上的聊天应用程序与我联系。如果您对如何改进应用程序有任何反馈，我很乐意知道。
https://waterfaller.dev/?url=https://princestheatre.co.uk
您可以查看桌面和移动结果。我会查看导致您网站速度变慢的主要文件。
但为了让您入门，这些报告中不会显示。
您的 LCP 失败的原因是您在标签内既有阻止呈现的样式表，也有样式块。因此，一开始我会将所有样式标签放入或将它们全部放入一个样式表文件中。然后你可以处理“critical CSS”，这可能很难。
或者，如果您想避免处理“关键 CSS”，那么我会执行以下操作，
- 将所有样式放入 1-3 个样式表文件中（例如，您是否需要 bootstrap 图标和很棒的字体？）
- 预加载那些样式表
https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload
这些样式表“阻止”浏览器开始呈现页面。所以目标是尽快加载所有需要的 CSS 。您知道如果第一次内容绘制或开始渲染时间减少，这会起作用。
如果它们出现故障，那么您的 LCP 也会出现故障。
然后我会弄清楚如何预加载您的字体。由于您是自行托管字体的，因此这很容易。为了方便起见，我只预加载了 woff2 字体。
从这里开始，因为这些解决了浏览器无法更快地呈现页面的原因。然后复试看看。提示：你会想弄清楚如何延迟加载视频和图像。但我不会从那里开始。
The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block visible within the viewport, relative to when the page first started loading.
LCP 正常，在 PSI 桌面版中显示为绿色，解决 移动版 尝试渲染 基于文本的内容（无滑块或任何需要 JS 的花哨的东西，只是文本）在您网站的顶部，您会看到 LCP for mobile 的改进结果。
由于这是您的第一个项目，我建议了解 LCP 是什么，不是什么。能看懂就够了。
Google 的定义：Largest Contentful Paint (LCP) 指标报告相对于页面首次开始加载时视口内可见的最大图像或文本块的渲染时间。
换句话说，您可以选择将自己的设计方式变成select最大内容的绘画，从而极大地影响分数。
一个好的技巧是通过 运行 灯塔查看页面上的 LCP 目标并查看 LCP。 That's how it looks in Lighthouse.
了解什么是 LCP 后，您可以选择将设计稍微修改为 select 默认情况下速度很快的 LCP（文本，小图像）。 LCP 的一个危险是，当您开始在视口的最末端显示 picture/big 文本块时，它就变成了 LCP。在这种情况下，引入 space 将其从视口中拉出是完全没问题的（示例）。