术语表

什么是最大内容绘制（LCP）？阈值和优化方法

最大内容绘制是视口里最大的图片或文本块渲染完成所用的时间。阈值、LCP 的四个组成部分，以及每个部分该用什么办法优化。

陈屿审核人林舟又称 LCP 最后更新 2026 年 11 月 4 日术语表

在 TapCub 里哪里看

性能报表

打开对应报表免费开始

一句话回答

最大内容绘制（LCP）是 Core Web Vitals 之一，衡量从页面开始加载到视口里最大的图片、视频封面或文本块渲染完成的时间。不超过 2.5 秒算良好。

公式： LCP = 首字节时间 + 资源加载延迟 + 资源加载耗时 + 元素渲染延迟

什么是最大内容绘制？

最大内容绘制（LCP）是页面主要内容出现的时刻：从开始导航到视口里最大的图片或文本块渲染完成的时间。它是三项 Core Web Vitals 之一。

评级	LCP
良好	不超过 2.5 秒
需改进	2.5–4 秒
较差	超过 4 秒

按真实访问的 P75（第 75 百分位）判断，也就是四次加载里要有三次达到良好。

LCP 的四个组成部分

每个 LCP 时间都能拆成四段，每段有各自的优化办法：

部分	包含什么	常见优化
首字节时间	服务端响应	缓存、CDN、更快的后端
资源加载延迟	浏览器开始下载 LCP 图片之前的时间	图片写进 HTML、预加载、`fetchpriority="high"`、不要懒加载
资源加载耗时	下载图片	更小的文件、新格式（AVIF、WebP）、合适尺寸的 `srcset`
元素渲染延迟	下载完到画出来的时间	减少阻塞渲染的 CSS 和 JavaScript

一个示例商品页

示例数据：移动端商品页的 P75 LCP 是 3.4 秒（需改进）。拆开看：首字节 0.9 秒，加载延迟 1.1 秒，下载 0.9 秒，渲染延迟 0.5 秒。主图是页面脚本运行后才用 JavaScript 插入的，而且开了懒加载。

把图片直接写进 HTML、去掉 loading="lazy"、加上 fetchpriority="high" 后，加载延迟降到 0.2 秒：0.9 + 0.2 + 0.9 + 0.5 = 2.5 秒，刚好达到良好。先改最大的那一段；继续压缩图片能省的时间要少得多。

常见错误

优化错了元素。 先确认移动端的 LCP 元素是哪个，它常常是标题，或者和桌面端不是同一张图。
只看一次实验室跑分。 要看按页面类型分的真实 P75。
轮播图用 JavaScript 加载首张图。

在 TapCub 里看最大内容绘制

TapCub 用站点脚本从真实访问里采集 Web Vitals（第一个页面隐藏时上报一次；用 data-vitals="false" 关闭）。在网站统计 › 监测 › 性能里，卡片可在 P75、中位数、P95 和平均值之间切换，分组可按页面、设备、浏览器、国家和操作系统拆分，「最慢页面」按 P75 最大内容绘制排序。详见性能文档。

相关阅读：页面加载多快算好、CLS、INP。

常见追问

大家看完定义后最常问的几个问题。

还有其他问题？

直接和 TapCub 团队聊聊——工作日通常几小时内回复。

在线咨询帮助中心

LCP 多少算好？

不超过 2.5 秒算良好，超过 4 秒算较差，中间算需改进。按真实访问的 P75 判断，分页面类型和设备看。

哪些元素会被算作 LCP 元素？

视口里最大的图片、SVG 里的图片、视频封面图、用 url() 加载的 CSS 背景图，或文本块。

LCP 图片要懒加载吗？

不要。懒加载会推迟的正是 LCP 在等的那张图。让它立即加载，并加上 fetchpriority="high"。

为什么实验室测 LCP 很快，真实数据却很慢？

实验室测试只用一种设备和网络，常常还有缓存。真实访客里有慢手机和慢网络，P75 反映的是他们。

在你自己的网站上看这个数字

加一行脚本就能开始，网站和 App 都能接，几分钟内就能看到第一批报表。

免费开始打开对应报表