LCP
Largest Contentful Paint
最大内容绘制 · 用户感知到「页面加载完了」的那一刻
- 定义
- LCP（Largest Contentful Paint）是增长领域的专业术语。LCP 测量视口内最大可见元素（通常是首屏大图或主标题）完成渲染的时间点，是 Google Core Web Vitals 三大指标之一。
最后更新：2026-03-31
什么是LCP？
LCP 测量视口内最大可见元素（通常是首屏大图或主标题）完成渲染的时间点，是 Google Core Web Vitals 三大指标之一。当 LCP 超过 2.5 秒，用户会明显感觉「这页面好慢」，Google 也会在排名上扣分。
- 良好阈值 ≤ 2.5s，差 > 4.0s，直接影响 SEO 排名
- 2026 年 Firefox 和 Safari 也已支持 LCP 指标采集，不再是 Chrome 独占
- 最大元素通常是 hero image、视频封面或大段文本块——优化它就是优化用户第一印象
LCP详解
LCP 是 Google 于 2020 年推出的 Core Web Vitals 加载性能指标，标记视口内最大内容元素完成渲染的时刻。它比传统的 Load 或 DOMContentLoaded 更贴近用户真实感知：用户不关心所有资源是否加载完，只关心「我能看到主要内容了吗」。常见瓶颈包括未优化的大图、阻塞渲染的 CSS/JS、服务器响应慢（TTFB 高）。优化路径通常是：压缩关键资源、预加载 LCP 元素、使用 CDN 降低 TTFB、延迟非关键脚本。需注意 LCP 元素可能随页面加载动态变化，最终以最大的那个为准。
公式提示
LCP = 最大可见元素完成渲染的时间点（相对于页面开始加载）；≤ 2.5s 为良好。
LCP的应用场景
正式定义
页面视口内最大可见内容元素完成渲染所需的时间，是 Google Core Web Vitals 的加载性能指标。
应用场景
- 诊断首屏加载慢的性能瓶颈
- 作为 SEO 技术审计的核心检查项
- 监控线上真实用户体验（RUM）
常见误区
- LCP 不等于页面完全加载时间，它只关注最大可见元素
- LCP 差不一定是图片的问题，服务器响应慢（TTFB）往往是更大的瓶颈
实际案例
📌 电商首页 hero 图优化
某电商首页 LCP 元素是一张 2MB 的 hero banner，LCP 达 4.8s。通过转 WebP、设置 fetchpriority="high" 并预加载，LCP 降至 1.9s，跳出率下降 12%。
📌 博客文章页字体阻塞
技术博客的 LCP 元素是文章标题文本，但自定义字体阻塞了渲染。添加 font-display: swap 后 LCP 从 3.2s 降至 1.4s。
LCP的参考来源
关于LCP的常见问题
- LCP 多少秒算合格
- Google 标准是 2.5 秒以内为「良好」，2.5-4.0 秒「需改进」，超过 4.0 秒为「差」。这是基于第 75 百分位的真实用户数据。
- 怎么查看自己网站的 LCP
- Chrome DevTools 的 Performance 面板、Lighthouse、PageSpeed Insights 或 Google Search Console 的 Core Web Vitals 报告都能查看。
- LCP 和首屏加载时间有什么区别
- 首屏加载是笼统概念，LCP 精确测量视口内最大元素的渲染完成时间，更贴近用户「看到主要内容」的真实感知。