Trusted by market leaders · Client results
维度：资源：元素类型 LCP (lcpet)
元素类型 (LCP) 维度 (lcpet) 将 Largest Contentful Paint 节点归类为四种架构类别之一：text、image、background-image 或 video。
虽然 Attribution Element 维度可以精确定位确切的 DOM 节点，但元素类型维度决定了您的高级工程策略。LCP 是四个时间间隔的总和：TTFB、加载延迟、加载时间和渲染延迟。元素类型能告诉您这些间隔中哪一个正在拉低您的分数，让您无需猜测即可选择正确的优化方案。
根据 LCP 元素类型优化 Core Web Vitals
在改善了独立于 LCP 元素类型的 TTFB 之后，您应该通过查看您的 LCP 元素类型，采取不同的方法来优化 LCP。
1. 文本
当 CoreDash 报告元素类型为文本时，静态网络资源带宽极少成为瓶颈。文本直接驻留在 HTML 文档中，这意味着在初始服务器响应 (TTFB) 之后，内容可立即使用。如果您的 LCP 在此处很慢，问题几乎完全出在渲染延迟上。
要修复此问题，请将注意力完全集中在关键渲染路径上。浏览器很可能因为 <head> 中繁重的 CSS 计算或同步 JavaScript 而被阻塞，无法绘制文本。此外，请检查您的字体加载策略；如果您没有使用 font-display: swap 或 optional，浏览器在等待字体文件下载时会人为地隐藏文本 (FOIT)。
2. 图像 (<img>)
这种类型会触发完整的资源管道：发现、下载和解码。与文本不同，图像 LCP 严重依赖于加载延迟和加载时间。在这里您是在与物理定律和网络延迟作斗争，因此您的目标是使资源变得更轻，并使其能更早被发现。
此处的优化需要严格的资源管理。确保初始 HTML 源代码（服务器端渲染）中存在 <img> 标签，以最大程度地减少加载延迟。添加 fetchpriority="high" 并严格删除任何 loading="lazy" 属性，因为这些会延迟浏览器的请求。最后，通过提供下一代格式 (AVIF/WebP) 并使用 srcset 来防止移动设备下载桌面大小的文件，从而解决加载时间问题。
3. 背景图像
这种分类标志着架构上的低效。因为图像是在 CSS 中定义的（例如，background-image: url(...)），所以浏览器必须在完全下载并解析您的样式表之后才能发现该 URL。这会产生巨大的加载延迟，因为预加载扫描器实际上对该资源是盲目的。
唯一稳健的工程修复方法是重构。将视觉资源从 CSS 移动到标准的 HTML <img> 标签，以立即向浏览器暴露 URL。如果您无法重构标记，则必须在文档头部使用 <link rel="preload"> 来强制提前发现，不过与使用原生图像元素相比，这通常会带来维护负担。
4. 视频
当 LCP 元素是视频时，浏览器会测量海报图像或第一帧（如果自动播放）的绘制时间。这与图像类型的行为相似，但由于视频资源的文件大小，通常会更重。
请严格将其视为图像优化任务。确保 HTML 中存在轻量级的 poster 属性，以便浏览器不必下载视频片段来渲染第一个像素。像对待标准 LCP 图像一样，尽可能激进地压缩海报图像。
工作流：基于 LCP 元素类型查找 LCP 问题
LCP 元素类型不是静态的，也并非对每个访问者都相同。它经常根据用户的设备而变化，揭示了响应式设计中的根本缺陷。
使用 CoreDash 的设备外形规格过滤器来比较移动设备和桌面设备之间的元素类型。您通常会发现桌面设备用户获得的是图像 LCP（例如，Hero Banner），而移动设备用户获得的是文本 LCP。这证实了您的移动端 CSS 布局将 Hero Banner 推到了首屏以下，或者将其大幅缩小，以至于一段文本成为了“最大”的元素。
如果您在这种情况下优化 hero 图像以改善移动端 LCP，那您就是在白费力气。浏览器甚至根本没有将该图像计算在内。您必须调整布局以将图像带回主视图，或者将注意力转移到优化移动用户的文本渲染（字体/CSS）上。
