LCP

LCP（Largest Contentful Paint，最大内容绘制）是衡量加载性能的指标，记录视口内面积最大的那块内容画到屏幕上的时间，计时从用户发起页面导航开始^[1]。它是 Google 核心网页指标的一项，站长用它判断页面打开得快不快；这项数值偏高，用户会觉得站点反应迟钝^[2]。LCP 不决定页面能不能被抓取，它属于页面体验的排序参考之一，也会影响用户的停留与转化^[2]。

计量的对象

LCP 统计的元素只有几类：<img> 元素、<svg> 里的 <image> 元素、<video> 的海报帧、用 url() 载入背景图的元素，以及装着文字的块级元素^[1]。页面里最大的那块可见内容画到屏幕上，LCP 就记下这个时刻。

最大的含义是视口内的可见面积最大。元素超出视口的部分不计入，被裁剪的部分也不计入^[2]。同一张横幅在手机上占的面积比桌面小，所以移动端与桌面端要分开看。

同一个页面里，元素的大小会变化。后到的图片把标题挤走时，LCP 会改记为后来居上的那个元素。

计时起点比很多人以为的要早。它包含上一页的卸载时间、连接建立时间、重定向时间，以及首字节延迟^[2]。服务器慢、域名解析慢、跳转链长，都会把 LCP 推高。

及格线与评级

Google 把 LCP 分成三档，取值按第 75 百分位计算，移动端与桌面端分开统计^[2]：

评级	第 75 百分位取值
良好	2.5 秒以内
需要改进	超过 2.5 秒，不超过 4 秒
差	超过 4 秒

按第 75 百分位取值，意思是至少 75% 的访问要在 2.5 秒内完成，站点才算通过这一项^[2]。平均值好看没有用，慢的那部分用户决定评级。

超出及格线的影响

不通过会出现在 Search Console 报告里。Search Console 按网址分组，把「需要改进」和「差」的页面列出来，站长顺着报告就能定位到具体页面^[2]。

用户体验上的损失更直接。内容迟迟不出现，用户会以为页面坏了，转身离开。LCP 属于页面体验相关的排序参考，它不单独决定名次，却会在其他条件接近时起作用^[2]。

常见成因

LCP 可以拆成四段用时：首字节延迟、资源加载延迟、资源加载用时、元素渲染延迟^[2]。四段里哪一段最长，对应的改法就不同。

• 首字节延迟高，说明服务器或网络出口慢，要查后端响应与缓存；
• 资源加载延迟高，多是图片由脚本或样式间接载入，浏览器发现得太晚；
• 资源加载用时长，多是图片体积过大；
• 元素渲染延迟高，常是样式或脚本阻塞了渲染，占住主线程。

图片是页面体积的大头。HTTP Archive 的年度报告长期记录网页资源构成，可用它对照自家站点的图片占比^[4]。

改善办法

改动按投入与收益排序：

1. 首屏的大图不要加 loading="lazy"，推迟加载会把 LCP 直接拖长；
2. 给 LCP 图片加 fetchpriority="high"，让浏览器把它排在前面^[2]；
3. 用 <link rel="preload"> 提前拉取资源，让浏览器难以自行发现的内容早一点开始下载；
4. 压缩图片，改用 WebP 或 AVIF；
5. 内联首屏关键样式，把其余样式与脚本改成不阻塞渲染。

<!-- 首屏大图：不延迟加载，并提高抓取优先级 -->
<img src="/hero.webp" width="1200" height="600" fetchpriority="high" alt="示例横幅">

改动带来的代价

每项优化都有代价。预加载会占用带宽，提示的资源一多，反而挤掉真正重要的文件。图片压缩到一定程度会看出模糊，换格式要改构建流程与备用图。提高某张图的抓取优先级，等于压低同页面其他资源的优先级，动手前要确认哪一张确实是 LCP 元素。

与抓取和收录的关系

抓取是否顺畅取决于服务器能否稳定响应，与 LCP 高低没有直接关系。百度把搜索分成抓取、建立索引、展现三步^[3]，页面在线且返回正常，抓取就能进行。LCP 影响的是用户看到内容的速度，以及页面体验这一路的排序参考，两件事要分开处理。

附录

参见

• INP
• CLS
• 首屏加载
• 图片优化
• 资源优先级

参考资料

官方（境外）

1. 《LargestContentfulPaint》，MDN Web Docs，2025-12 更新。
2. 《Largest Contentful Paint (LCP)》，web.dev，2025-09-04 更新。

官方（国内）

3. 《百度搜索的工作原理》，百度搜索资源平台，2023-12-21 更新。

第三方

4. 《Web Almanac》，HTTP Archive，2025。

外部链接

无。