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