什么是 LCP，为什么重要？
LCP 是Largest Contentful Paint 的缩写。LCP是衡量页面速度的指标；它告诉您加载网页的主要内容需要多长时间（基本上是当页面变得对用户可读时。）LCP 是用户体验不可或缺的一部分。当用户可以立即在其他地方获得更好的体验时，他们通常不想闲逛并等待网站加载。 如果你的 LCP 很差，你可能会遇到更高的跳出率，你的整体排名可能会受到影响。糟糕的 LCP 甚至会导致较低的转化率。 由于 Google 的 Core Web Vitals 更新，LCP 正在成为您在 SERP 上排名的一个更重要的因素。为了保持有机排名并维持这些访问者，保持在 LCP 的顶部是非常重要的。
LCP 仅适用于首屏的主要内容。这包括无需用户向下滚动即可显示的任何图像、视频或文本块。在注意任何问题区域时，请记住这一点。
定义好的或差的 LCP
根据 Google 的指南，您页面的主要内容应在用户访问的前 2.5 秒内加载，以获得良好的 LCP。下图更详细地显示了这一点：
如果您的用户必须等待五秒钟或更长时间才能加载主要内容（即您的 LCP 很差并且需要改进），他们很可能会放弃并寻找其他地方。
Google 的指南进一步规定，您的 LCP 需要至少在 75% 的时间内排名为“良好”。如果你能做到这一点，你的表现就会飙升。
我们稍后会查看您的特定 LCP。现在，让我们关注导致 LCP 不佳的一般原因以及如何解决这些问题。
什么原因导致 LCP 不佳？
从技术上讲，可能导致 LCP 不佳的原因列表是无法全部解释清楚的。
它可以是占用大量空间的任何东西导致：可以减慢页面速度的内置媒体播放器、未优化图像的幻灯片、社交媒体按钮，甚至是登录等小部件。
但让我们更具体一点。
如上图所示，导致 LCP 不佳的因素通常属于四大类：
1. 服务器响应时间慢
服务器响应时间缓慢会对您的所有加载速度指标产生负面影响，因此是导致 LCP 不佳的明确原因。
服务器响应时间缓慢通常是由于您的后端基础设施问题、未优化的数据库查询或需要很长时间才能解决的 API 响应造成的——所有这些都发生在您站点的后台。
改善这一点的第一步就是确保您在良好的服务器上托管您的网站。
2. 渲染阻塞 JavaScript 和 CSS
尽管自定义您的网站是让它脱颖而出的好方法，但不幸的是，添加 JavaScript 和 CSS 来美化您的网站主题及其内容也会影响您网站的加载时间。
有时，为了您的 LCP，坚持使用不那么“重”的站点设计并减少您拥有的插件数量，尤其是首屏插件的数量是一个更好的主意。
3. 客户端渲染
客户端渲染（也就是使用 JavaScript 在浏览器中直接渲染网页）是一种非常流行的 Web 开发方法。
但是，浏览器在呈现主要内容之前会反复收集和加载 JavaScript，并且更多时间等待用户。
如果您还依赖客户端渲染，那么在处理 LCP 时可能需要考虑一下。
4. 缓慢的资源加载时间
页面上的大量资源或具有视觉冲击力的内容必然需要花费大量时间来加载——这就是生活中的事实。
如果您有大量未优化的高质量图像、GIF 和文本框要在首屏呈现，您的 LCP 将会受到影响。
继续阅读以了解有关优化这些内容以改进 LCP 的更多信息。
如何修复糟糕的 LCP
有一些针对较差 LCP 的修复程序 - 其中一些比其他更容易。我们将在这里带您了解一些更简单的方法。
1. 优化你的 CSS
CSS 文件是阻止渲染的资源。在服务器渲染整个页面之前，必须加载和处理资源。
您可以通过手动删除未使用的代码、最小化正在使用的 CSS 文件或使用媒体查询优化 CSS 背景图像来优化 CSS 文件。
2. 优化你的图片
在优化图像时，您可以采取几个步骤。主要有以下几种：
- 压缩您的图像
- 考虑将您的图像转换为更有效的格式
- 使用视频代替 GIF（加载时间更短）
- 确保您的图像具有正确的尺寸
而且总是值得思考：我真的需要这张图片吗？它是否向我的页面添加了任何内容？如果没有，可能值得摆脱它。
3. 优化你的网页字体
字体通常是大文件。因此，在加载字体文件之前，不常见字体的文本内容不会显示在页面上。
用户需要更长的时间才能在网页上看到重要信息！那是不行的。
为了避免这种情况，您需要优化您的 WebFonts。通过减小 WebFont 的大小、使用字体显示或更新页面样式以使用自定义字体，页面加载速度应该会加快。
4. 优化你的 JavaScript
您的 JavaScript 已经运行了一段时间，可能值得检查一下，因为它可能会降低您的页面加载速度。
您可以做一些事情来优化您的 JavaScript（给定最新的 LCP 指标）包括：
- 删除未使用的代码
- 检查您的代码是否是最新的并与现代浏览器兼容
- 安装现代 JavaScript 并通过代码拆分减少有效负载
测量您的 LCP
那么，您如何知道您的 LCP 是什么？
检查 LCP 性能的一个好地方是使用 Google 提供的工具：Google Search Console、Google Page Insights 和 Lighthouse。
您会在 Google Search Console 的左侧导航栏中找到 Core Web Vitals 标签。进入此选项卡将显示您的 URL 概览。从那里，很容易看到可能存在的问题以及您可以进行哪些调整来解决这些问题。
如果您没有为您的网站设置 Google Search Console，请不要担心。您还可以通过 Lighthouse 和 PageSpeed Insights 工具访问此信息。
这是 Amazon 桌面站点的 Page Insights 概述。它向我们展示了所有 Core Web Vitals：
如您所见，Largest Contentful Paint 的表现相当不错，但总有改进的余地。前往“机会”部分，探索所有建议并抓住所有这些机会以获得更好的排名。
及时完成这些建议以并经常检查以确保您的 LCP 和其他站点指标持续的改进。
总结
现在您知道如何使您的 LCP 性能保持最新以及在哪里可以发现改进点。如果您定期完成站点审核中的每条建议，那么您的 LCP 和核心 Web 生命指标就会得到改进。，随着时间推移，您一定会提升您的网络速度性能。