LCP性能优化：关键图片提取技术与SEO提升指南

上次更新时间: June 28, 2026

关键图像提取是指找到控制页面首次视觉印象的唯一图片。在许多产品页面、着陆页和博客文章中，该图片是英雄图（hero），主产品照片或大型折叠以上插图。如果能尽早识别它，您就可以预加载或优先处理正确的文件，而不是平均加速所有图像。

快速答案：如何提取关键图像？

使用关键图像提取来确定最有可能成为 Largest Contentful Paint element 的图片名称，然后赋予该文件特殊的加载处理。通常这意味着初始视口中最大的可见图像会获得 fetchpriority="high"、不进行 lazy loading、具有稳定的尺寸，有时还会添加 <link rel="preload">。

不要预加载所有大型文件。只有当浏览器否则无法及时发现（例如在 CSS、轮播图、客户端渲染组件或带有复杂源选择的响应式 <picture> 堆栈中）英雄图或产品图时才进行预加载。

更改后，验证结果。Google 的 Largest Contentful Paint documentation 将 LCP 定义为最大的可见内容元素周围的指标，而 PageSpeed Insights 会显示测量的是哪个元素。Chrome DevTools 也应该在瀑布流早期显示关键图像请求。

请按此顺序操作：

1. 在真实的移动视口下加载页面。
2. 找到折叠以上最大的图片或海报。
3. 检查 PageSpeed 或 Lighthouse 是否将其报告为 LCP。
4. 从该图片中移除 loading="lazy"。
5. 添加尺寸或宽高比。
6. 当它是 <img> 时，添加 fetchpriority="high"。
7. 仅在发现较晚时才预加载它。
8. 将折叠以下图像保持 lazy。
9. 在布局、CMS 或英雄文案更改后重新测试。

什么算作关键图像？

关键图像是访客等待直到页面感觉有用为止的图片。它通常，但不总是 LCP element。页面顶部的一个小 Logo 可能首先加载，但很少控制感知到的就绪状态。占据手机屏幕一半的英雄图通常会这样做。

结合使用渲染尺寸、视口位置和用途。导航菜单中的缩略图是可见的，但它不是主要内容。标题后面的背景图片可能是关键的，如果它是最大的可见元素。元数据中的社交卡片图片对分享很重要，但除非模板也显示它，否则不会为渲染页面进行获取。

Google 的 LCP 指南列出了 <img> 元素、SVG 内的图像元素、视频海报图片和 CSS 背景图片作为可能的候选。这意味着提取不能止步于搜索第一个 <img> 标签。您需要检查渲染后的页面。

对于相关工作，请将更广泛的 image optimization for SEO 清单放在附近。关键图像提取决定了优先级；而压缩、文件名、alt text 和结构化内容仍然决定了图片加载后是否有用。

哪个图像应该获得预加载或高优先级？

将高优先级赋予一张图片：当前页面可能 LCP 的图片。如果两个候选图接近，请选择在移动设备上最大的那个，因为 Core Web Vitals 在移动端通常更难通过。

当关键图像是常规 <img> 或 <picture> 元素中的 fallback <img> 时，使用 fetchpriority="high"。Google 的 fetch priority guidance 解释说，此提示可以在不改变标记发现路径的情况下更改浏览器的资源优先级。

当问题是发现时，使用 preload。MDN 的 rel="preload" reference 将 preload 描述为一种更早请求资源的机制。当图片 URL 出现在 CSS 中、在水合作用之后到达，或者位于浏览器无法足够快发现的标记后方时，这会很有帮助。

对于正常的响应式图像，标记结构可能如下所示：

<img
  src="/images/product-hero-960.webp"
  srcset="/images/product-hero-480.webp 480w, /images/product-hero-960.webp 960w, /images/product-hero-1440.webp 1440w"
  sizes="(max-width: 640px) 100vw, 960px"
  width="960"
  height="640"
  fetchpriority="high"
  alt="展示了开放式笔记本电脑隔层的黑色皮革背包"
>

如果图片是 CSS 背景，并且您暂时无法将其移动到 HTML 中，请预加载初始视口将使用的相同资源：

<link
  rel="preload"
  as="image"
  href="/images/home-hero-960.webp"
  imagesrcset="/images/home-hero-480.webp 480w, /images/home-hero-960.webp 960w"
  imagesizes="100vw"
>

image preloading guide 更详细地介绍了语法。这里的关键规则更窄：在提取之后预加载，而不是之前。

如何避免 lazy-loading 错误的图片？

Lazy loading 属于第一个视口以下的内容。将其应用于已提取的关键图像是一个错误，因为它告诉浏览器要等到布局和距离检查发生时再等待。Google 的 browser-level lazy loading guide 警告不要对立即可见的图片进行 lazy-loading。

仔细审计全局图片组件。许多框架将 lazy loading 设置为默认值，因为大多数图片都位于折叠以下。这个默认设置破坏了英雄图被包裹在与画廊缩略图相同的组件中的页面。

检查这些地方：

1. CMS 富文本图像渲染器。
2. 产品画廊组件。
3. 博客封面图组件。
4. 首页英雄背景工具。
5. 直到 JavaScript 运行才会隐藏所有幻灯片的滑块。
6. 将 data-src 替换为 src 的占位符组件。
7. 第三方个性化模块。
8. 延迟英雄图标记的 A/B 测试包装器。

修复通常很简单。向组件添加一个 priority、aboveFold 或 isLcp 选项，并要求模板所有者明确选择它。折叠以下主体图片仍然应该使用原生的 lazy loading，特别是包含截图和图表的长指南。

对于移动设备为主的页面，请结合 mobile image optimization guide 使用。即使英雄图优先级设置正确，如果手机为 390 px 的槽位下载了 2400 px 的桌面裁剪，性能仍然很差。

如何从实际页面提取图像？

从浏览器开始，而不是从资源库开始。资源库告诉您什么存在；而浏览器告诉您用户接收到什么。

使用此手动工作流程：

1. 在 390 px 宽的页面上打开并禁用缓存重新加载。
2. 注意滚动前最大的可见图片。
3. 检查该元素并记录其最终 URL。
4. 确认它是 <img>、<picture>、视频海报还是 CSS 背景。
5. 确认渲染宽度和高度。
6. 将下载的文件宽度与渲染槽位进行比较。
7. 查找 loading="lazy" 或 JavaScript 延迟的 src 分配。
8. 检查 DevTools Network 获取请求开始时间和优先级。
9. 运行 PageSpeed Insights 并记录 LCP element。
10. 如果英雄图在断点处发生变化，则重复操作桌面端。

对于模板审计，在编辑代码之前制作一个小型提取表：

我将本文中的图表作为 WebP 文件生成，并将每个文件保持在 40 KB 以下。这并非照片的通用目标，但它是一个有用的提醒：提取的图像在获得优先级之前应该进行尺寸调整。如果文件仍然很大，请在使用前使用 image compression deep dive 和 batch resize guide。

如何在工具中验证关键图像？

验证有两个任务。首先，证明选定的图片确实是 LCP element 或一个严重的 LCP 候选图。其次，证明浏览器足够早地发现它。

使用 PageSpeed Insights 进行字段和实验室环境的上下文检查。诊断面板通常会命名 LCP element，而截图有助于确认报告的元素是否与页面的视觉英雄图匹配。当您需要本地跟踪时，请使用 Lighthouse 或 DevTools Performance。

使用 DevTools Network 检查请求行为：

1. 按图片请求进行筛选。
2. 禁用缓存重新加载。
3. 确认关键图像在瀑布流顶部附近开始。
4. 检查优先级是否为 High 或早期升级。
5. 确认折叠以下图片没有同时竞争。
6. 检查状态码、内容类型、传输大小和缓存头。

使用渲染后的 HTML 检查标记错误：

1. 关键图像在初始标记中具有 src 或可发现的 srcset。
2. 它没有 loading="lazy"。
3. 它具有 width 和 height，或稳定的 CSS 宽高比。
4. 其 alt text 描述了图片作为内容的可见主体。
5. CDN URL 返回可抓取的 200 响应。

对于搜索，Google 的 image SEO best practices 也强调描述性的文件名、alt text 和有用的周围文本。关键图像提取提高了加载优先级，但该图片仍然需要搜索上下文。

什么会破坏关键图像提取？

最常见的失败是把每个页面都当作拥有相同的英雄图来处理。博客索引页、产品页面和定价页可能有不同的 LCP 候选图。提取步骤必须在模板级别和断点级别进行。

注意这些陷阱：

1. 预加载 Open Graph 图片。 社交卡片图片可能从未渲染到页面上。
2. lazy-loading 第一个产品照片。 产品画廊通常会继承缩略图默认值。
3. 优先处理每个轮播图幻灯片。 在加载时，只有第一个可见的幻灯片可能是关键的。
4. 忽略移动端裁剪。 桌面和移动端可能会选择不同的 LCP 图片。
5. 使用 CSS 背景作为有意义的内容。 它们更难设置优先级且可访问性较低。
6. 忘记尺寸。 优先级不能防止布局偏移。
7. 发布一个过大的源文件。 一个高优先级的 3 MB 图片仍然很慢。
8. 仅在本地 Wi-Fi 上测试。 缓慢的 4G 会暴露发现延迟。

如果问题主要在于文件权重，请从 complete image optimization checklist 开始。如果问题是格式选择，则比较 AVIF vs WebP 再更改交付规则。

总结：关键图像提取清单

关键图像提取是一个页面速度的