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

Question

背景：

我最近完成了第一个客户项目（我今年18岁），最近一直在尝试提高网站核心指标以提升SEO排名。

我遇到的最大问题是我的页面最大内容渲染时间（LCP）太高，这意味着所有URL都被标记为“差”在搜索控制台中。 我已经花费数小时时间并阅读了无数篇文章，但其中90％以上的行话超出了我的理解范围。

目前为止的研究/尝试：

我压缩了主页上的所有图像，缩短了视频长度、调整了大小并进行了压缩，将几乎所有文件都移动到由CDN链接的minified版本中，延迟了大部分CSS的加载，为所有图像添加了懒加载功能，确保字体文本可见，优化了我的Web托管，缩小了我的大部分CSS / JS ...

但是，我所做的一切似乎都没有实质性地改善LCP得分。即使删除视频（最大元素），我的得分也几乎没有变化......

我是否（很可能）只是非常愚蠢并错过了明显的东西，还是我真的需要为每个毫秒而战？

我非常感谢任何帮助，谢谢：）

- Daniel

Answer 1

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

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

你可以查看桌面和移动设备的结果。我会查看导致网站变慢的顶部文件。

但是，要让你开始工作，这些报告中不会显示出来。

LCP失败的原因是您同时拥有阻止呈现的样式表和位于标签内的样式块。因此，首先我会将所有样式标签放入 中或将它们全部放入一个样式表文件中。然后，您可以处理“关键CSS”，这可能很困难。

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

1. 将所有样式放入1-3个样式表文件中（例如，您是否需要Bootstrap图标和Font Awesome？） 2. 预加载这些样式表。

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

这些样式表会“阻塞”浏览器开始渲染页面。因此，目标是尽快加载所有所需的CSS。如果首次内容绘制或开始渲染时间减少，则说明这个目标已经实现。

如果它们减少了，那么您的LCP也将减少。

然后，我会找出如何预加载您的字体。由于您正在自行托管字体，这很容易。为了使其更容易，我只会预加载woff2字体。

从这里开始，因为这些解决了浏览器无法更快地呈现页面的问题。然后重新测试并查看。提示：您将希望找出如何延迟加载视频和图像。但我不会从那里开始。

- Tim Bednar

Answer 2

最大内容渲染时间（LCP）度量报告了在视口内可见的最大图像或文本块的渲染时间，相对于页面首次开始加载的时间。

LCP在桌面端的PSI中是正常的，并且是绿色的，在移动端上解决问题，请尝试仅为网站顶部的基于文本的内容（无滑块或任何需要JS的花哨内容，只有文本）进行渲染，您将看到移动设备上LCP结果的改进。

- James Mascarenhas

Answer 3

作为您的第一个项目，我建议您了解一下LCP的含义和不含义。理解它非常重要。

谷歌的定义：最大内容绘制（LCP）指标报告了在视口内可见的最大图像或文本块的渲染时间相对于页面开始加载的时间。

换句话说，您可以选择设计方式来选择最大的内容绘制，并因此极大地影响分数。

一个好的技巧是通过运行Lighthouse并查看LCP来查看页面上的LCP目标。 这就是在Lighthouse中的样子。 知道了什么是LCP之后，您可以选择稍微修改设计以选择默认情况下会快速显示的LCP（文本、小图像）。 LCP的一个危险是当您开始在视口的最末端显示一张图片/大块文本时，它变成了LCP。 在这种情况下，引入空格以将其从视口中拉出来是完全可以的（示例）。

- Francois-Pierre Marcil