CoreDash 维度： LCP 优先级

通过审计最大内容元素的具体加载策略来修复 LCP 加载延迟。

免费试用

Trusted by market leaders · Client results

维度：资源：LCP 优先级

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

这是您针对 Load Delay 的主要审计工具。它能揭示您的 LCP 资产是在竞争带宽，还是由于不正确的 HTML 属性而被人为延迟。

coredash metric table urls

优先级层级

浏览器会为每个资源分配下载优先级。此维度将 LCP 元素映射到五种特定的加载状态之一，按破坏性最强（Lazy Loaded）到最理想（文本/高优先级）排序。

背景信息：当用户通过“后退”或“刷新”按钮返回页面时，大多数浏览器会将其带回到之前的垂直滚动位置。如果该位置处于初始视口下方（below the fold），则您优化过的 Hero 图像将不再是 LCP。相反，浏览器会测量当前视口中的最大元素。这会在您的数据集中产生一组不可避免的“未预加载 (Not Preloaded)”事件。这完全没有问题！

1. 延迟加载 (Lazy Loaded)

如果超过 10% 的 LCP 元素出现在此类别中，说明您发现了一个问题。延迟加载的图像入队时间要晚得多（由缓慢的 DOM 解析器处理，而非快速的预加载扫描器）。loading="lazy" 属性指示浏览器等待下载，直到计算出布局且元素靠近视口。

修复方法： 您必须移除此 loading 属性。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. 高 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 图像添加 loading="lazy" 的组件并将其剥离。这在全局对所有媒体应用延迟加载的 CMS 模板中很常见。
迁移到 Fetchpriority： 将流量从 未预加载 (Not Preloaded) 和 已预加载 (Preloaded) 转移到 高 fetchpriority。用 fetchpriority="high" 替换 <link rel="preload"> 可以清理您的 <head> 并将优先级逻辑直接耦合到组件。
审计背景图像： 如果 未预加载 (Not Preloaded) 中的流量很高且您的 LCP 是背景图像，说明浏览器发现它太晚了（仅在解析 CSS 之后）。您必须将其重构为带有 fetchpriority="high" 的 HTML <img> 标签，或强制使用 Preload 标头。

工程师经验法则

此维度的分布目标非常严格：

<10% 延迟加载 (Lazy Loaded)
> 90% 高 fetchpriority（针对图像 LCP）
100% 非图像（针对文本 LCP）

任何落入“未预加载 (Not Preloaded)”的流量都代表一种未优化的状态，在这种状态下，您将资源优先级的控制权交给了浏览器的默认启发式算法。