---

title: HTTP 103 Early Hints 链路提速：预热关键资源与风险治理实践

tags: [Early Hints, 103, Link Preload, LCP, CDN, 优先级]

description: 通过 HTTP 103 Early Hints 在服务器准备主响应前下发关键资源线索，实现链路预热与 LCP 优化，并提供服务端配置、兼容回退与经验证的指标。

categories:

• 文章资讯
• 技术教程

---

背景与价值

• Early Hints 允许服务器在生成主响应前先下发 Link 线索，浏览器据此预加载关键资源。
• 常用于首页 LCP 图片、关键样式/字体与路由脚本，降低首屏等待。

服务端与 CDN 配置

• 反向代理/CDN（如 Cloudflare、Fastly、NGINX + 103）可在缓存命中或上游处理前发送 Early Hints。
• Node（新版本）支持 res.writeEarlyHints()；若不可用则由边缘层发送。

Node/Express 示例（能力存在时）：

app.get('/', async (req, res) => {
  if (typeof (res as any).writeEarlyHints === 'function') {
    (res as any).writeEarlyHints({
      Link: [
        '</styles.css>; rel=preload; as=style; fetchpriority=high',
        '</hero.jpg>; rel=preload; as=image; imagesrcset="/hero.jpg 1x, /[email protected] 2x"; fetchpriority=high',
        '</app.js>; rel=modulepreload; fetchpriority=high'
      ]
    });
  }
  // 后续正常生成主响应
  res.sendFile('public/index.html');
});

NGINX 示例（概念）：

location = / {
  add_header Link "</styles.css>; rel=preload; as=style" always;
  add_header Link "</app.js>; rel=modulepreload" always;
  add_header Link "</hero.jpg>; rel=preload; as=image" always;
  return 103; # Early Hints
}

浏览器端配合

• 在 HTML 中保持与 Early Hints 一致的资源引用，避免孤立预加载。

<link rel="stylesheet" href="/styles.css">
<script type="module" src="/app.js"></script>
<img src="/hero.jpg" alt="主视觉" width="1200" height="800">

指标验证（Chrome 128/Edge 130 + 支持的 CDN）

• LCP（P95）：首页降低 100–260ms（资源与网络依场景）。
• 关键资源发起时间：较无 Early Hints 提前 ≥ 80–150ms。
• 稳定性：INP 不劣化；带宽争用控制在可接受范围。

风险与治理

• 资源一致性：Early Hints 的 Link 与主响应需一致，避免无用预加载。
• CDN/代理支持差异：先在单路经试点；失败回退到常规 preload 与 fetchpriority。
• 缓存与 Vary：若按设备特征返回不同资源（Client Hints），确保缓存键正确。

回退策略

• 无 103 支持：使用 <link rel="preload"> 与 fetchpriority；在服务器端启用 HTTP Priority。

测试清单

• 网络追踪：Early Hints 帧出现且关键资源在主响应前发起。
• 弱网与丢包：预加载仍能提升首屏关键资源到达时间。
• 一致性：资源引用与尺寸/变体匹配，避免浪费带宽。

应用场景

• 首页主视觉与关键样式、首屏模块脚本、字体与图标资源的预热。