Core/Dash 维度： LCP 优先级

通过审计最大内容元素的具体加载策略，修复 LCP Load Delay。

免费试用

Trusted by market leaders

维度：资源：LCP 优先级

LCP 优先级维度根据浏览器发现 LCP 资源并确定其优先级的具体方式对性能数据进行细分。虽然“元素类型”（Element Type）维度告诉你元素是什么（文本 vs 图像），但此维度告诉你浏览器为何延迟加载它。

这是你针对 Load Delay 的主要审计工具。它揭示了你的 LCP 资源是在争夺带宽，还是被人为地被错误的 HTML 属性延迟了。

coredash metric table urls

优先级层级

浏览器会为每个资源分配下载优先级。此维度将 LCP 元素映射到五种特定的加载状态之一，按从最具破坏性（Lazy Loaded）到最优（Text/High Priority）进行排名。

背景：当用户通过“后退”或“重新加载”按钮返回页面时，大多数浏览器会将他们带回之前的垂直位置。如果该位置在首屏下方，你优化过的 Hero Image 就不再是 LCP。相反，浏览器会测量当前视口中最大的元素。这会在你的数据集中产生一组不可避免的 "Not Preloaded" 事件。这完全没问题！

1. Lazy Loaded

如果超过 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. Not Preloaded

这代表了浏览器的默认行为。浏览器在初始解析期间在 HTML 中发现了图像，但没有收到任何信号将其优先级置于其他图像之上。

这对页面速度的影响取决于网页的复杂性。LCP 图像进入资源争用队列。如果你的页面有许多脚本、字体、其他非懒加载图像或样式需要下载，浏览器可能会延迟下载此图像，从而增加 Load Delay。

3. Preloaded

这表明资源是通过文档头部的 <link rel="preload"> 标签发现的。这种预加载链接基本上意味着早期发现，即使图像引用深埋在 DOM 中或隐藏在 CSS 文件（背景图像）中。

预加载是强制早期下载的最有效方式，但预加载需要维护一个单独的链接标签，该标签必须与图像 URL 完全匹配。如果它们不一致，你会重复下载资源。

4. High fetchpriority

这是现代工程标准。通过 fetchpriority="high" 属性指示浏览器将此特定图像视为关键资源。

策略： 这是基于图像的 LCP 的目标状态。它直接在元素上发出重要性信号，将其在下载队列中的优先级提升至其他资源之上，且无需手动维护预加载标签的开销。

5. Not an Image

状态： 文本节点 / SVG

LCP 元素是一块文本（h1, p）或原始 SVG。这是理想的架构状态，因为文本产生的 Load Delay 为零（它已存在于 HTML 文档中）。

优化： 如果你的 LCP 属于此类但仍然很慢，瓶颈完全在于 Render Delay。你必须优化关键渲染路径（CSS/JS 阻塞）或字体加载策略（font-display: swap），因为没有图像文件需要下载。

工作流：优化 Load Delay

使用此维度来验证你的前端资源策略。

消除懒加载： 按 Lazy Loaded 过滤。如果此值大于 0%，找出给 Hero Image 添加 loading="lazy" 的组件并将其移除。这在对所有媒体全局应用懒加载的 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" 的流量都代表一种未优化状态，即你将资源优先级的控制权交给了浏览器的默认启发式算法。