如何修复 Search Console 中的 LCP 问题?2026 年完整指南
LCP(最大内容绘制)必须在 2.5 秒内加载完成。修复方法包括:使用现代图片格式(WebP/AVIF)、预加载 LCP 元素、消除阻塞渲染的资源,以及改善服务器响应时间。
每周三。28,400+ 读者。纯干货。
✓ 请查收邮箱 — 点击确认链接以完成订阅。
✓ 订阅成功!
✓ 您已在订阅列表中。
Table of contents
Open Table of contents
什么是 LCP?
最大内容绘制(LCP)衡量页面上最大可见元素——通常是主视图图片、视频缩略图或大段文本块——在视口中完全渲染所需的时间。这是一个用户感知的加载速度指标:不是页面开始加载的时刻,而是主要内容变得可见的时刻。
Google 的评分标准:
- 良好: 低于 2.5 秒
- 需要改进: 2.5–4 秒
- 较差: 超过 4 秒
只有在点击或滚动后才出现的元素不计入 LCP 测量范围。LCP 专门衡量访客到达页面后立即看到的内容。
相关阅读:如何修复 Search Console 中的 CLS 问题,请阅读这里
2026 年的 Core Web Vitals 是什么?
Core Web Vitals 是 Google 针对页面体验的标准化指标集合。自 2024 年 3 月起,三项指标为:
- LCP(最大内容绘制) — 加载性能;目标低于 2.5 秒
- INP(下次绘制的交互时间) — 响应性;目标低于 200 毫秒
- CLS(累计布局偏移) — 视觉稳定性;目标低于 0.1
重要更新: FID(首次输入延迟)已于 2024 年 3 月从 Core Web Vitals 中退出,由 INP 取而代之。INP 更为严格——它衡量整个页面会话中最差的交互延迟,而非仅第一次交互。如果您有较旧的文章或文档引用了 FID,那些信息现已过时。
您可以在我的 Core Web Vitals 指南中了解更多关于整体网站速度优化的内容。
为什么 LCP 对排名至关重要
Google 将 Core Web Vitals 作为排名信号。LCP 表现差不仅损害用户体验,还会让您在搜索结果中失去排名位置。
更直观地说:主视图图片加载缓慢意味着用户会看到几秒钟的空白或半加载页面。这会推高跳出率,尤其是在移动端。如果您的 LCP 元素是产品图片或特色文章图片,每多花一秒出现,就意味着用户在多纠结一秒是否留下。
在 Search Console 中找到问题 URL
- 登录 Google Search Console
- 在左侧边栏的体验下,点击 Core Web Vitals
- 您将看到移动端和桌面端的独立报告——请逐一检查
- 点击任意一个的打开报告
- 报告会显示状态为「较差」「需要改进」或「良好」的 URL 分组
- 点击 「LCP 问题:超过 4 秒」 行,查看示例 URL
这些都是真实用户的测量数据(来自 Chrome 用户体验报告的现场数据),反映的是实际访客条件,而非仅仅是实验室测试结果。
在 PageSpeed Insights 中检查 LCP 分数
确定了需要排查的特定 URL 后,前往 PageSpeed Insights 并输入该 URL。它会同时显示现场数据(如有)和受控测试的实验室数据。
重点查看:
- Core Web Vitals 下的 LCP 值
- 下方的机会和诊断部分——这些列出了具体问题和预估可节省的时间
请将移动端和桌面端分开测试。移动端通常因网络较慢和 CPU 性能较弱而得分更低,且在 Google 排名中权重更高。
如何确定哪个元素是您的 LCP
在需要检查的页面上打开 Chrome DevTools:
- 在页面任意位置右键点击 → 检查
- 进入性能标签
- 点击录制(圆圈图标),重新加载页面,然后停止录制
- 在 Timings 行中查找 LCP 标记
- 点击它查看哪个元素被识别为 LCP 元素
大多数情况下,LCP 元素是主视图图片、大型 <h1> 或视频海报帧。准确知道是哪个元素,就能明确优化工作的重点。
修复 LCP 问题的有效方法
1. 使用现代图片格式
对于图片密集型 LCP,最快的单项提升是从 JPEG/PNG 切换到 WebP 或 AVIF。两者在同等视觉质量下均能提供显著更好的压缩效果。
对于 WordPress 网站,Imagify、ShortPixel 或 Cloudflare’s Image Resizing 等插件可自动处理转换,并根据浏览器支持情况提供正确格式。对于静态网站,大多数构建工具(Next.js、Astro 等)都内置了图片优化功能,可在构建时完成转换和缩放。
注意:JPEG XR 和 JPEG 2000(旧版指南中有所提及)实际上已经过时。WebP 已获得浏览器的普遍支持;AVIF 自 2024 年起也获得广泛支持。
2. 预加载 LCP 元素
如果您的 LCP 元素是图片,请在 <head> 中添加 <link rel="preload"> 标签,让浏览器立即获取它,而不是在 HTML 解析过程中才发现它:
<link rel="preload" as="image" href="/images/hero.webp" fetchpriority="high">fetchpriority="high" 属性(现已获得浏览器广泛支持)告知浏览器将此资源的优先级置于页面上其他图片之上。
3. 消除阻塞渲染的资源
阻塞渲染的 CSS 和 JavaScript 会延迟浏览器开始绘制页面的时间。常见修复方法:
- 将非关键 CSS 改为异步加载,或将关键 CSS 内联
- 为非立即需要的 JavaScript 文件添加
defer或async - 对网络字体使用
font-display: swap,使文本在自定义字体加载期间使用备用字体渲染
PageSpeed Insights 等工具会在机会部分标出具体的阻塞资源。
4. 改善服务器响应时间(TTFB)
如果服务器响应时间过长,后续所有内容都会被延迟。目标是将首字节时间(TTFB)控制在 800 毫秒以内。
改善 TTFB 的方法:
- 使用 CDN 从更接近用户的边缘节点提供页面
- 启用服务端缓存(页面缓存、对象缓存)
- 对于动态网站,优化数据库查询或迁移到更快的托管方案
- 对于静态网站,确保资源部署在 CDN 上——文件传输应几乎即时完成
5. 懒加载折叠线以下的图片(但 LCP 元素除外)
对折叠线以下的图片使用 loading="lazy" 来推迟加载。但关键是——不要对 LCP 元素本身应用懒加载。这会进一步延迟它,直接拉低您的 LCP 分数。这是 WordPress 网站上常见的错误——全局懒加载插件被不加区分地应用到所有图片上。
6. 使用响应式图片
根据请求设备提供合适尺寸的图片。移动端用户不需要宽达 2400 像素的图片。使用 srcset 和 sizes 属性让浏览器自行选择合适的版本:
<img
src="hero-800.webp"
srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
alt="Hero image"
fetchpriority="high"
>7. 在 Search Console 中验证修复效果
完成修改后,回到 PageSpeed Insights 重新测试 URL,确认实验室数据中的 LCP 有所改善。然后在 Search Console 中打开 Core Web Vitals 报告,对受影响的 URL 分组点击验证修复。这会向 Google 发出您已进行改进的信号。
请注意:现场数据(真实用户测量值)在 Search Console 中需要数周时间才能更新,因为它反映的是实际访问的滚动窗口。不要期待报告立即发生变化。
LCP 修复常见问答——2026
修复 LCP 能保证排名提升吗?
不能直接保证。Core Web Vitals 是排名因素之一,但只是众多因素中的一个。修复差劲的 LCP 分数可以消除一个可能正在拖累您的信号,这或许带来排名改善——尤其是在竞争激烈的细分市场中,竞争页面之间其他信号差别不大时。把它理解为提升下限,而不是保证特定排名跃升的杠杆。
Google 用 INP 取代了 FID 吗?
是的。2024 年 3 月,Google 正式以 Interaction to Next Paint(INP)取代 First Input Delay(FID),作为 Core Web Vitals 中的响应性指标。INP 衡量整个页面会话(而非仅第一次交互)中最差的交互延迟,使其成为更严格、更真实的页面使用响应性衡量标准。
我在 PageSpeed Insights 中的分数不错,但 Search Console 仍显示「较差」。为什么?
PageSpeed Insights 实验室数据是受控的合成测试。Search Console 现场数据来自真实 Chrome 用户在现实条件下(不同设备、网络速度、地理位置)访问您网站时的测量结果。一个页面在实验室测试中可能表现良好,但对于使用慢速移动连接的真实访客来说却表现很差。应专注于通过解决根本原因来改善现场数据——通常是图片大小、阻塞渲染的资源或服务器响应缓慢——而不仅仅追求实验室分数。
2026 年可以用哪些工具诊断 LCP?
主要工具:PageSpeed Insights(pagespeed.web.dev)——综合实验室和现场数据;Chrome DevTools 性能面板——元素级诊断;WebPageTest——瀑布分析和胶片条视图;Search Console 的 Core Web Vitals 报告——全站现场数据。Lighthouse(内置于 Chrome DevTools)也会显示 LCP 诊断信息。
相关阅读:
简短版本
如果您阅读本文是因为文中描述的工作流正在消耗您整整一周的时间,那正是我构建 AI 智能体所解决的那类循环问题。每次开放两个构建名额。
2026 年 5 月更新
Google 在 2026 年的核心叙事是 AI Overviews 无处不在:2023 年的 SGE 实验于 2024 年 5 月升级为默认功能,目前据估计出现在约 60% 的美国信息类查询中。对于 SEO 和广告从业者而言:
- 含 AI Overviews 的查询的自然流量 CTR 平均下降 15–30%,这是 Ahrefs、Authoritas 等机构发布的研究(2024–25 年数据)所显示的结果。
- Google Ads 将多项 PMax 功能更名为 AI-powered Search;广告系列管理界面现在默认提供 AI 出价建议。
- Search Console 于 2025 年底新增了「AI Overview 展示次数」筛选器——如果本站某篇文章引用了 GSC 报告内容,相关内容需要更新。
- Google 广告收入在 2024 年突破 约 2650 亿美元;Search 仍占 Alphabet 总营收的约 57%。
2026 年「Google 如何赚钱」的答案:仍以 Search 广告为主导,但 YouTube 广告、Cloud 以及订阅服务(YouTube Premium + Google One)现在都已成为重要收入来源。
每周三。28,400+ 读者。纯干货。
✓ 请查收邮箱 — 点击确认链接以完成订阅。
✓ 订阅成功!
✓ 您已在订阅列表中。
将AI实战手册发送到您的邮箱
每周三。28,400+ 读者。纯干货。
请查收邮箱。
我们已向您发送确认邮件 — 点击其中的链接以完成订阅。如果一分钟内没收到,请检查垃圾邮件。
订阅成功。
欢迎 — 下一期很快就会送达您的邮箱。
您已在订阅列表中 — 每周三留意查收。