Trusted by market leaders · Client results
维度：资源：LCP 优先级
LCP 优先级维度根据浏览器如何发现和优先处理 LCP 资源来细分性能数据。虽然“元素类型”维度告诉你该元素是什么（文本与图像），但该维度能告诉你浏览器为什么延迟加载它。
这是审计加载延迟的主要工具。它揭示了你的 LCP 资产是在争夺带宽，还是被不正确的 HTML 属性人为延迟。
优先级层级
浏览器会为每个资源分配一个下载优先级。该维度将 LCP 元素映射到五种特定加载状态之一，按照从最具破坏性（懒加载）到最优（文本/高优先级）的顺序排列。
背景：当用户通过“后退”或“重新加载”按钮返回你的页面时，大多数浏览器会将他们返回到之前的垂直位置。如果该位置在首屏以下，那么你优化后的英雄图像（Hero Image）就不再是 LCP。相反，浏览器会测量当前视口中最大的元素。这在你的数据集中会创建一组不可避免的“未预加载”事件。这完全没有问题！
1. 懒加载
如果有超过 10% 的 LCP 元素出现在这个类别中，你就发现问题了。懒加载图像的排队时间要晚得多（由缓慢的 DOM 解析器而非快速的预加载扫描器负责）。loading="lazy" 属性会指示浏览器等待下载，直到布局计算完成且元素接近视口。
修复方法：你必须移除此加载属性。LCP 元素绝不应该被懒加载。
<!-- 错误 --> <img src="hero.jpg" loading="lazy" alt="Hero Image" /> <!-- 正确 --> <img src="hero.jpg" fetchpriority="high" alt="Hero Image" />
2. 未预加载
这代表了默认的浏览器行为。浏览器在初始解析 HTML 期间发现了图像，但没有接收到将其优先于其他图像的任何信号。
对页面速度的影响取决于你网页的复杂性。LCP 图像会进入资源竞争队列。如果你的页面有很多脚本、字体、其他非懒加载图像或样式需要下载，浏览器可能会延迟下载此图像，从而增加加载延迟。
3. 已预加载
这表明资源是通过文档头部的 <link rel="preload"> 标签被发现的。这种预加载链接本质上意味着尽早发现，即使图像引用深埋在 DOM 中或隐藏在 CSS 文件中（背景图像）。
预加载是强制及早下载的最有效方法，但预加载需要维护一个单独的 link 标签，该标签必须与图像 URL 完全匹配。如果它们出现偏差，你将重复下载该资产。
4. 高获取优先级
这是现代工程标准。浏览器通过 fetchpriority="high" 属性被指示将此特定图像视为关键资源。
策略：这是基于图像的 LCP 的目标状态。它直接在元素上发出重要性信号，将其提升到下载队列中其他资产之上，而无需手动维护预加载标签的开销。
5. 非图像
状态：文本节点 / SVG
LCP 元素是一个文本块（h1、p）或原始 SVG。这是理想的架构状态，因为文本不会产生任何加载延迟（它已经存在于 HTML 文档中）。
优化：如果你的 LCP 属于此类别但仍然很慢，那么瓶颈完全在于渲染延迟。你必须优化你的关键渲染路径（CSS/JS 阻塞）或你的字体加载策略（font-display: swap），因为没有图像文件需要下载。
工作流：优化加载延迟
使用此维度来验证你的前端资源策略。
- 消除懒加载：按懒加载进行过滤。如果该值大于 0%，请找到将
loading="lazy"添加到英雄图像的组件并将其移除。这在将懒加载全局应用于所有媒体的 CMS 模板中很常见。 - 迁移至 Fetchpriority：将流量从未预加载和已预加载转移至高获取优先级。使用
fetchpriority="high"替换<link rel="preload">可以清理你的<head>，并将优先级逻辑直接耦合到组件。 - 审计背景图像：如果在未预加载中有大量数据，且你的 LCP 是背景图像，那么浏览器发现它的时间太晚了（只有在解析 CSS 之后）。你必须将其重构为带有
fetchpriority="high"的 HTML<img>标签，或强制使用Preload标头。
工程经验法则
你对该维度的分布目标非常严格：
- <10% 懒加载
- > 90% 高获取优先级（针对图像 LCP）
- 100% 非图像（针对文本 LCP）
任何落入“未预加载”类别的流量都代表一种未优化的状态，在这种状态下，你将资源优先级的控制权交给了浏览器的默认启发式算法。
