Core Web Vitals 资源优先级指南

不要让浏览器猜测。强制它在正确的时间加载重要的资源！

Arjen Karel - linkedin

Last update: 2026-01-22

Core Web Vitals 资源优先级指南

浏览器默认的优先级引擎基于启发式算法运行（根据文件类型和文档位置进行不完美的猜测）。资源的排队顺序取决于它们被预加载扫描器或 DOM 解析器发现的时间。

当你考虑到网络带宽和 CPU 并非无限资源时，这就会成为一个问题。例如：低优先级跟踪脚本传输的每一个字节，在同时下载时，都会直接与 Largest Contentful Paint (LCP) 所需的字节竞争。

这并不是浏览器的错：在我们示例的 HTML 中，浏览器无法知道它优先加载了错误的资源，从而延迟了关键渲染。

你才是知道什么重要的人，你通过两种机制控制这个调度：优先级提升（增强关键信号）和优先级降低（将非关键资源安排到干扰更少的时间加载）。

浏览器启发式算法的局限性

浏览器根据“计算优先级”分数来分配优先级。该分数源自资源类型（CSS、Script、Image）及其在 HTML/DOM 中的位置。虽然对于简单文档通常有效，但当资源未被早期识别（通过预加载扫描器）或错误的资源被触发提前下载时，该系统就会失效。

预加载扫描器的局限性

为了加速发现，浏览器使用“预加载扫描器”——一个轻量级解析器，它在主 HTML 解析器之前快速扫描以查找资源 URL。该扫描器有其局限性（使其快速且有效）：它只解析 HTML。它无法查看 CSS 文件内部，不执行 JavaScript，也不进行渲染（因此无法“查看资源是否在视口中可见”）。
因此，任何在样式表中引用的资源（如背景图片或 Web 字体）、由脚本注入的资源或延迟加载的资源，都会被跳过或在主解析器下载和处理整个网页之前根本不会被发现。这就产生了“发现延迟”，浏览器实际上不知道关键资源的存在。

资源竞争

当浏览器发现资源时，它通常会尝试与其他待处理的请求同时下载它们。如果一个重要的 LCP 图片与中优先级脚本或不重要的图片（如页脚中的社交媒体图标）竞争，它们会分割可用带宽。这种竞争延长了两者的加载时间，将 LCP 指标推入“需要改进”区域。

手动优先级策略

要构建快速的渲染路径，你必须手动干预。目标是最大化 LCP 的带宽，最小化其他所有内容的带宽。

1. 通过预加载修复发现问题

你必须手动将隐藏的资源暴露给预加载扫描器。通过使用 rel="preload" 将关键资源移入 HTML <head>，你可以强制浏览器立即识别它们，从而消除发现延迟。

实现方式：

<!-- Expose the font to the scanner immediately -->
<link rel="preload" as="font" type="font/woff2" href="/fonts/inter-bold.woff2" crossorigin>

<!-- Expose the LCP background image immediately -->
<link rel="preload" as="image" href="/images/hero-banner.jpg" fetchpriority="high">

2. 覆盖 LCP 启发式规则

浏览器通常会将图片分配为“低”或“中”优先级，因为它们在初始获取期间不知道最终的布局尺寸。浏览器无法确定图片是否为 LCP，直到渲染树构建完成，而那时已经太晚了。

实现方式：

使用 fetchpriority="high" 强制 LCP 元素获得“高”优先级状态。这会绕过内部启发式算法，将图片放在下载队列的最前面。

<!-- Force immediate high-priority fetch -->
<img src="hero.jpg" alt="Hero Product" fetchpriority="high">

3. 降低不重要图片的优先级

释放带宽通常比提升优先级更有效。你必须明确延迟非必要资源，以清理关键资源的网络通道。

实现方式：

首屏以下： 使用 loading="lazy" 延迟下载，直到用户滚动到该位置。
首屏次要内容： 对轮播图幻灯片或初始渲染但不如 LCP 重要的次要视觉元素使用 fetchpriority="low"。
首屏内视觉上不重要的内容： 使用 loading="lazy" 绕过预加载扫描器并分配低带宽。适用于那些在首次渲染中不会引起注意但可能触发大量早期带宽请求的小图片，如旗帜或图标。

<!-- LCP Image: Highest Priority -->
<img src="slide-1.jpg" fetchpriority="high">

<!-- Secondary Carousel Image: Immediate fetch, low bandwidth usage -->
<img src="slide-2.jpg" fetchpriority="low">

<!-- Translation flags: while in the viewport hide them from the preload scanner -->
<img src="dutch-flag.jpg" loading="lazy" fetchpriority="low">

<!-- Off-screen Image: Deferred fetch -->
<img src="footer-promo.jpg" loading="lazy">

4. 控制脚本执行

JavaScript 会阻塞 DOM 解析器。如果你使用标准 <script> 标签，浏览器会暂停 HTML 解析以下载和执行文件。

实现方式：

defer： 用于应用逻辑。它以低优先级并行下载，仅在 HTML 完全解析后执行，保持依赖顺序。
async： 用于独立的第三方脚本（如分析工具）。它并行下载并在完成后立即执行，不考虑顺序。
注入： 绕过预加载扫描器，因此不会与早期带宽竞争。注入的脚本被视为 async。
调度 + 注入： 在稍后的时间注入脚本，例如在 load 事件触发后。

<!-- Application Logic: Non-blocking, preserves execution order -->
<script src="app.js" defer></script>

<!-- Third-party Consent: Non-blocking, independent execution -->
<script src="consent.js" async></script>

<script>
  /* Inject example analytics */
  const script = document.createElement('script');
  script.src = 'analytics.js';
  script.async = true; 
  document.head.appendChild(script);

  /* Inject + schedule example for chat */
  window.addEventListener('load', () => {
    const chatScript = document.createElement('script');
    chatScript.src = 'chat-widget.js';
    document.head.appendChild(chatScript);
  });
</script>

5. 解除 CSS 渲染阻塞

CSS 在设计上是渲染阻塞的：浏览器在没有 CSS 的情况下不知道页面的外观。因此它会先下载和解析样式表。

优化策略：

避免 @import： 它会创建顺序依赖链，严重损害性能。
优化包大小： 避免小于 3kB 的 CSS 文件（开销过大）和大于 20kB 的文件（阻塞过久）。理想目标约 15kB。
异步加载： 异步加载屏幕外样式以解除关键路径阻塞。
Critical CSS 权衡： 虽然内联 Critical CSS 可以改善首次页面浏览，但它绕过了浏览器缓存，可能延迟后续页面浏览。

实现方式：

完全消除 @import。使用 <link> 标签进行并行加载。对于非关键 CSS（如打印样式），使用 media 属性解除主线程阻塞。

<!-- Critical CSS: Blocks rendering (Correct) -->
<link rel="stylesheet" href="main.css">

<!-- Print CSS: Non-blocking until print event occurs -->
<link rel="stylesheet" href="print.css" media="print">

<!-- Async Pattern: Loads with low priority, applies on load -->
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">

6. 稳定字体渲染

字体是沉重的阻塞资源。有效的优先级管理需要严格限制下载内容并控制渲染方式。

优化策略：

严格的预加载限制： 仅预加载 1-2 个最重要的字体文件（通常是 LCP 文本）。预加载 5 个以上的字体会堵塞带宽。
减小负载： 使用可变字体（一个文件包含所有字重）和子集化（移除未使用的字符）来最小化文件大小。
渲染策略：
- 使用 swap 实现快速渲染（避免 FOIT/不可见文本）。
- 使用 optional 防止 CLS（避免慢速网络上的布局偏移）。

实现方式：

<!-- Preload ONLY the critical subset (e.g. Header + Body) -->
<link rel="preload" href="/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin>

<style>
  @font-face {
    font-family: 'Inter Variable';
    src: url('/fonts/inter-var.woff2') format('woff2-variations');
    /* Choose based on stability requirements: */
    font-display: optional; /* No layout shift, but font might stay fallback */
    /* font-display: swap;     Fastest text visibility, but risks layout shift */
  }
</style>