《最大内容涂料（LCP）：完整的技术指南和优化标准》

Largest Contentful Paint (LCP) 是 Google 的三个核心 Web Vitals 指标之一，旨在衡量感知的页面加载速度。LCP 跟踪从用户开始加载网页到初始可见视口中最大的图像、视频海报框架或文本块完全绘制在屏幕上所花费的时间。

由于用户根据主要内容变得可见和可读的速度来判断网页速度，因此 LCP 被广泛认为是最重要的加载性能指标。因此，Google 将 LCP 纳入其有机搜索的官方页面体验排名信号中。

答案优先摘要

最大内容绘制 (LCP) 是一项核心 Web 重要指标，通过计时视口中最大可见文本块或图像元素完成渲染的时间来测量感知的页面加载速度。真实用户现场数据 (CrUX) 中至少 75% 的页面访问的通过 LCP 分数为 2.5 秒或更短。LCP 延迟由四个不同的子部分组成：第一个字节的时间 (TTFB)、资源加载延迟、资源加载持续时间和元素渲染延迟。优化 LCP 需要预加载英雄资源、部署边缘缓存、将图像压缩为 WebP/AVIF 格式以及消除渲染阻塞的 CSS 和 JavaScript。

LCP 分数评定量表和核心网络生命阈值

为了向用户提供快速且引人入胜的体验，网页必须满足 Google 为最大内容绘制制定的 Core Web Vitals 阈值：

LCP 渲染时间	绩效评级	用户影响和 Google 搜索排名信号
$\le 2.5\text{ 秒}$	好（绿色）	快速感知加载；完全满足 Google 的 Core Web Vitals 评估。
$> 2.5\text {s} $ 和 $\le 4.0\text {s} $	需要改进（琥珀色）	明显的加载延迟；移动转化率和搜索排名可能会下降。
$> 4.0\text{ 秒}$	差（红色）	严重的视觉加载延迟；高用户跳出率和搜索排名损失。

要获得核心 Web Vitals 评估的及格分数，网站必须在至少 75% 的页面访问中获得良好类别的 LCP 分数（$\le 2.5\text{秒}$），并在现实世界的现场数据中跨桌面和移动设备群组进行评估。

哪些 DOM 元素适合进行 LCP 评估？

根据官方 W3C Largest Contentful Paint 规范，浏览器监视位于初始视口内的特定可见 DOM 元素：

标准 <img> 元素（包括响应式 <picture> 标签内渲染的图像）。
<image> 元素嵌入在 <svg> 向量容器中。
视频海报图像（<video> 元素上的 poster 属性）。
具有通过 url() 函数加载的 CSS 背景图像的元素。
包含文本节点或内联文本元素子元素的块级 HTML 容器（例如 <h1> 到 <h6> 标题、<p> 段落或 <div> 块）。

解构 LCP：四个子部分

为了有效诊断和优化缓慢的 Largest Contentful Paint 分数，性能工程师将 LCP 延迟分解为四个不同的子部分：

第一个字节的时间 (TTFB)：从用户请求页面到浏览器从服务器收到 HTML 文档响应的第一个字节所经过的时间。目标：$< 800\text {ms} $（LCP 预算的 $40%$）。
资源加载延迟：HTML 文档完成接收响应字节与浏览器发现并开始获取 LCP 资源（例如英雄图像）之间的延迟。目标：$< 200\text {ms} $（LCP 预算的 $10%$）。
资源加载持续时间：浏览器通过网络下载 LCP 图像或字体资源所需的持续时间。目标：$< 800\text {ms} $（LCP 预算的 $40%$）。
元素渲染延迟：LCP 资源完成下载与浏览器完成布局计算并将元素绘制到屏幕之间的时间。目标：$< 200\text {ms} $（LCP 预算的 $10%$）。

从数学上讲，总 LCP 延迟是这四个子部分的总和：

$$\text {LCP} = \text {TTFB} + \text{资源加载延迟} + \text{资源加载持续时间} + \text{元素渲染延迟}$$

优化 LCP 的成熟技术

消除资源加载延迟：将 <link rel="preload" as="image" href="..."> 或 fetchpriority="high" 添加到您的英雄图像标签中，以便浏览器在 HTML 解析期间立即启动图像下载。
优化服务器响应 (TTFB)：通过 CDN 部署边缘缓存，优化数据库查询性能，并利用 HTTP/2 或 HTTP/3 服务器推送复用。
压缩和现代化图像：使用现代 WebP 或 AVIF 格式提供英雄图像，并根据移动和桌面屏幕尺寸定制响应式 srcset 尺寸。
减少渲染阻塞资源：将关键 CSS 内联到 <head> 标记中，并使用 defer 或 async 脚本属性推迟非关键 JavaScript。
优化 Web 字体加载：在 CSS @font-face 规则中使用 font-display: swap 或 font-display: optional 规则，以确保当 Web 字体通过网络完成下载时，文本块立即保持可见。

LCP 与 First Contentful Paint (FCP) 与速度指数

虽然 LCP、FCP 和速度指数都衡量加载性能，但它们捕获页面加载进度的不同方面：

首次内容绘制 (FCP)：测量第一个 DOM 元素（例如背景颜色、微调器或标题文本）在屏幕上完成渲染的时间。
最大内容绘制 (LCP)：测量主要视觉内容元素（英雄横幅或主要段落块）完成渲染的时间。
速度指数：测量视觉进度记录期间视觉内容随时间填充视口的速度。

在 Google 的 Lighthouse 评分算法中，LCP 在加载指标中被赋予最高权重（目前占总性能得分的 25%），因为它与真实用户对页面加载完成的感知最接近。

使用 SimpleOps 进行连续 LCP 监控

SimpleOps 通过在单个统一监控仪表板中捕获综合 Lighthouse 实验室审核和 Chrome UX 报告 (CrUX) 字段数据集指标，自动执行最大内容绘制跟踪。只要您网站的 75% LCP 超出您的 2.5 秒性能预算，SimpleOps 就会立即发出主动警报，从而使您的团队能够保护转化和搜索排名。