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

Question

上下文:

我最近为一个客户(我 18 岁)完成了我的第一个元素，最近我一直在努力改善网络活力以提升他们的搜索引擎优化。

我遇到的最大问题是我的 Largest Contentful Paint 太高了，这意味着我的所有 URL 在 Search Console 上都被标记为“差”。我在这上面花了几个小时现在阅读无数文章，其中 90% 的行话都在我脑海中闪过。

目前的研究/尝试:

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

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

我是否(很可能)真的很愚蠢并遗漏了一些明显的东西，或者我真的需要在这里争取每一毫秒吗？

非常感谢任何帮助，谢谢 :)

Answer 1

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

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

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

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

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

或者，如果您想避免处理“关键 CSS”，那么我会执行以下操作，

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

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

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

如果它们出现故障，那么您的 LCP 也会出现故障。

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

从这里开始，因为这些解决了浏览器无法更快地呈现页面的原因。然后复试看看。提示:你会想弄清楚如何延迟加载视频和图像。但我不会从那里开始。