---
title: HTTP 103 Early Hints：预加载提示与首包优化
keywords:
- 103 Early Hints
- Link preload
- HTTP/2
- HTTP/3
- 首包优化
description: 利用 103 Early Hints 在服务器开始生成主响应前下发关键资源预加载提示，降低首包等待并改善首屏体验，含服务端与验证示例。
categories:
- 文章资讯
- 技术教程
---
概述
Early Hints（HTTP 103）允许服务器在主响应准备过程中提前发送 Link 头中的关键资源预加载提示（如样式与 LCP 图片）。浏览器可并行获取资源，从而缩短关键路径。
用法/示例
响应头示例
HTTP/1.1 103 Early Hints
Link: </styles.css>; rel=preload; as=style
Link: </hero.jpg>; rel=preload; as=image; imagesrcset="/[email protected] 2x"
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Node.js（示意）
res.writeHead(103, {
Link: '</styles.css>; rel=preload; as=style, </hero.jpg>; rel=preload; as=image'
})
// 继续生成主响应...
res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' })
res.end('<!doctype html>...')
工程建议
- 仅为关键路径资源发送 Early Hints，避免过度预取造成拥塞。
- 与
preload、fetchpriority协同，确保 LCP 候选资源提前获取。 - 使用 DevTools 网络面板观察 Early Hints 事件与资源并发情况，结合真实网络环境测量收益。
参考与验证
- RFC 8297：Early Hints — https://datatracker.ietf.org/doc/html/rfc8297
- web.dev：Early Hints — https://web.dev/articles/early-hints
- Chrome Docs：Early Hints — https://developer.chrome.com/docs/web-platform/early-hints/
发表评论 取消回复