LCP 详解：如何针对 SEO 进行优化

LCP 是一项关键的用户体验指标，也是谷歌的排名因素。 用户打开您的页面时，并不关心页面的总加载时间。他们关心的是自己什么时候能看到主要内容，开始阅读或操作。LCP 衡量的正是这一刻：最大的内容元素变得可见的时刻。LCP 做对了，页面就让人觉得快。做错了，页面就让人觉得慢，哪怕其他指标都不错。

优化 LCP 需要三管齐下：改善服务器响应时间（TTFB）、消除阻塞渲染的资源、优化图片。每一条针对的是不同的 LCP 瓶颈，三者结合能带来显著的提升。

什么是 LCP，以及它如何测量

最大内容绘制（LCP）是页面上最大的可见内容元素的渲染时间。 它可能是一张大图、一段视频、一个标题或一段文本块。LCP 从用户导航到您的页面开始计时，直到该元素变得可见为止。谷歌的 LCP 文档提供了详尽的技术信息和优化策略。

LCP 不是一个非通过即失败的二元指标，而是一个连续的分数。谷歌认定，LCP 在 2.5 秒以内为“良好”，在 2.5 至 4 秒之间需要改进，超过 4 秒则为糟糕。用户会觉得 LCP 在 2 秒以内的页面非常快。LCP 在 3 至 4 秒的页面明显偏慢。LCP 超过 5 秒的页面常常被直接放弃。

LCP 会在页面加载过程中随着更大的内容元素出现而变化。如果一张超大图片在第 3 秒才加载出来，LCP 就会从 1 秒跳到 3 秒。这一点很重要：您不能只优化最初的绘制时间，还必须确保所有大型内容元素都能快速加载。

理解首字节时间（TTFB）

首字节时间（TTFB）是从导航开始到服务器返回 HTML 文档第一个字节所花的时间。 TTFB 决定了 LCP 的下限。如果 TTFB 是 2 秒，LCP 就不可能好于 2 秒，因为浏览器连 HTML 都还没收到。降低 TTFB 是降低 LCP 的前提。

良好的 TTFB 在 600 毫秒以内。 TTFB 在 600 至 1800 毫秒之间需要改进，超过 1800 毫秒则为糟糕。如果您的 TTFB 很慢，请先集中精力优化服务器。再多的前端优化也弥补不了一台慢服务器。

TTFB 变慢的常见原因：后端代码低效、数据库查询过重或服务器过载。托管服务慢同样会拉高 TTFB。共享主机往往极慢，升级到 VPS 或云主机可以获得更好的性能。使用 CDN，从靠近用户的服务器分发内容，也能降低 TTFB。

PageSpeed Insights 会在“服务器响应时间”一节显示您的 TTFB。如果 TTFB 构成瓶颈，它会被标为优先处理项。

识别最大的内容元素

LCP 取决于页面上最大的内容元素是什么。在一篇博客文章里，最大的元素可能是一张大幅主视觉图片。在产品页上，可能是一张产品照片。在新闻网站上，可能是一个文章标题。识别出 LCP 元素，是优化它的第一步。

使用 Chrome DevTools 来识别 LCP 元素。打开 DevTools，切到 Performance 面板，开始录制并重新加载页面。在录制结果中找到“Largest Contentful Paint”标记，把鼠标悬停在上面，就能看到是哪个元素触发了 LCP。知道是哪个元素之后，再去优化它。

LCP 元素通常是一张图片。图片体积大，而且在 HTML 解析之后才加载。对大多数网站来说，优化图片加载对 LCP 的影响最大。首屏以下的图片可以懒加载，从而加快首屏内容的 LCP。

预加载关键资源

预加载是告诉浏览器提前开始下载某个资源，早于渲染真正需要它的时刻。 在 HTML 头部使用 `` 标签，预加载您的 LCP 图片或其他关键资源。这等于告诉浏览器“立刻开始下载这个资源”。

例如：`` 会让浏览器立即开始下载主视觉图片，而不必等待 CSS 被解析。视资源大小而定，这可以把 LCP 缩短 100 至 500 毫秒。

预加载要谨慎使用。预加载太多资源会浪费带宽。只预加载最关键的资源（主视觉图片、关键字体、必要的 CSS）。谷歌的核心网页指标优化指南讲解了预加载的最佳做法。

面向 LCP 的图片优化

如果您的 LCP 元素是一张图片，就要优化它的文件体积和加载策略。有三种做法：

压缩图片。 使用 TinyPNG、ImageOptim 或 Squoosh 这类工具，在不损失画质的前提下压缩。JPEG 压缩可以把文件体积缩小 10 至 40 倍。在 4G 网络下，图片每多 100KB 就会给 LCP 增加 100 至 200 毫秒。压缩的投入产出比很高。

使用现代格式。 WebP 比 JPEG 小 25% 至 35%，AVIF 更小。使用 HTML 的 `` 元素，为现代浏览器提供 WebP，为旧浏览器提供 JPEG 以保持向后兼容。仅仅是选对格式，就能把 LCP 改善 200 至 400 毫秒。

指定图片尺寸。 写明 width 和 height 属性可以防止布局偏移，让浏览器在图片加载前就预留出空间。这不会直接改善 LCP，但会改善累积布局偏移（CLS），那是核心网页指标的另一项指标。

阻塞渲染的 CSS 和 JavaScript

阻塞渲染的 CSS 会让浏览器在 CSS 下载并解析完成之前无法渲染页面。 体积大的 CSS 文件会拖慢渲染。把关键 CSS 内联、其余部分延后加载，就能把阻塞渲染的 CSS 降到最低。

关键 CSS 是首屏内容所需要的 CSS。把这部分 CSS 内联到 `