背景与价值

• 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: [
        '; rel=preload; as=style; fetchpriority=high',
        '; rel=preload; as=image; imagesrcset="/hero.jpg 1x, /[email protected] 2x"; fetchpriority=high',
        '; rel=modulepreload; fetchpriority=high'
      ]
    });
  }
  // 后续正常生成主响应
  res.sendFile('public/index.html');
});

NGINX 示例（概念）：

location = / {
  add_header Link "; rel=preload; as=style" always;
  add_header Link "; rel=modulepreload" always;
  add_header Link "; rel=preload; as=image" always;
  return 103; # Early Hints
}

浏览器端配合

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

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

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

风险与治理

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

回退策略

• 无 103 支持：使用 与 fetchpriority；在服务器端启用 HTTP Priority。

测试清单

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

应用场景

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