LCP（最大内容绘制）

衡量网页视口内最大内容元素渲染完成时间的 Core Web Vitals 指标

LCP（最大内容绘制）

概述

LCP（Largest Contentful Paint，最大内容绘制）是衡量网页加载时，视口（viewport）内最大的内容元素渲染到屏幕上所需时间的用户体验指标。它是 Google Core Web Vitals（CWV）三大核心指标之一，代表“页面多快向用户展示有意义的内容”这一体感加载速度（Perceived Load Speed）。LCP 于 2020 年 5 月正式纳入 Core Web Vitals，并从 2021 年 6 月起作为 Google 搜索的页面体验（Page Experience）信号被纳入考量，从而成为前端性能优化的核心指标。

主要内容

测量标准与阈值

LCP 将用户体验划分为三个区间进行评估。

良好（Good）：2.5 秒及以下
需要改进（Needs Improvement）：超过 2.5 秒至 4.0 秒及以下
较差（Poor）：超过 4.0 秒

重要之处在于，评估并非基于单次访问的测量值，而是以真实用户数据的第 75 百分位（p75） 为基准。也就是说，全部访问中有 75% 必须在 2.5 秒内完成 LCP，才能获得“良好”评级。这样的设计是为了防止少数慢速环境用户拉偏平均值。

被视为 LCP 元素的对象

LCP 候选对象是视口内视觉上最大的元素，包含以下类型。

<img> 元素（包括第一代和第二代图像格式）
<image> 元素（SVG 内部）
<video> 元素的海报图像
通过 CSS background-image 加载的元素（基于 URL）
块级文本节点（受 Web 字体加载影响的文本）

相反，<canvas>、<svg> 本身、占位图像等会被排除在候选之外，或被有条件地处理。

构成 LCP 的四阶段时间线

LCP 并不是由单一原因造成的指标，而是可分解为四个阶段之和。理解这一结构是优化的起点。

1. TTFB（Time to First Byte）：服务器发送首字节所需的时间

2. 资源加载延迟（Resource Load Delay）：TTFB 之后到 LCP 资源请求开始之间的空档

3. 资源加载时间（Resource Load Duration）：实际下载资源所需的时间

4. 元素渲染延迟（Element Render Delay）：下载完成后到绘制到屏幕所需的时间

例如，如果错误地对 LCP 图像应用了 loading="lazy"，第 2 阶段会急剧增加；如果阻塞渲染的 CSS 体积很大，第 4 阶段会急剧增加。

主要恶化因素

服务器响应缓慢及 CDN 配置不足
阻塞渲染的 CSS/JavaScript
依赖客户端渲染（CSR）导致内容插入较晚
对 LCP 图像滥用 lazy-loading
Web 字体加载延迟（FOIT/FOUT）
未压缩的大体积图像、不必要的高分辨率
第三方脚本（广告、标签管理器）占用主线程

测量工具

Chrome DevTools（Performance、Lighthouse 面板）
PageSpeed Insights：同时提供真实用户（CrUX）和实验室数据
WebPageTest、CrUX Dashboard / BigQuery
web-vitals JavaScript 库（Google 官方）
PerformanceObserver API：通过 largest-contentful-paint 条目类型收集

优化策略

对 LCP 图像应用 <link rel="preload"> 和 fetchpriority="high"
将图像格式转换为 AVIF/WebP，并通过 srcset 提供响应式图像
改善 TTFB：服务器缓存、CDN 边缘部署、启用 HTTP/2·3
内联关键 CSS，并延迟加载未使用的 JS
字体 preload + font-display: swap 组合
引入 SSR/SSG 或流式渲染

LCP（最大内容绘制）