为 Nginx 启用 Early Hints，优化网页加载新速度

Nginx 一直致力于打造更快、更高效的 Web 体验。从 Nginx 1.29.0 主线版本开始，已经正式支持103 Early Hints。该功能允许浏览器在收到主请求的200 OK响应之前，提前加载关键资源，比如 CSS、JavaScript 或字体等，从而显著缩短页面加载时间。

接下来，我们将深入探讨如何为 Nginx 启用 Early Hints，它的重要价值以及带来的具体性能优势。

01. 什么是 103 Early Hints：抢跑的艺术

Early Hints 也叫「早期提示」，是一种用来优化网站性能的 HTTP 状态码（103）。当浏览器收到一个103 Early Hints响应时，就能在收到服务器的最终响应之前，提前预加载关键资源。这一机制能有效降低整体延迟，让用户更快地看到页面内容。

为了帮助你更好地理解，下面引用了 Google 的 Barry Pollard 和 Kenji Baheux 的描述：

「早期提示」是一种 HTTP 状态码 (103 Early Hints)，用于在最终响应之前发送初步 HTTP 响应。这样一来，当服务器忙于生成主资源时，就可以向浏览器发送有关关键子资源（例如网页的 CSS、关键 JavaScript）或网页可能会使用的来源的提示。浏览器可以在等待主资源时使用这些提示来预热连接并请求子资源。换句话说，「早期提示」可以帮助浏览器通过提前执行一些工作来利用此类「服务器思考时间」，从而加快网页加载速度。

02. Early Hints 的重要性

卓越的网站性能是保障优质用户体验和提升用户参与度的基石。借助 Early Hints，只需微小的配置改动，就能显著改善多项核心 Web 性能指标。

2.1 具体优势

1. 缩短 TTFB（首字节时间）：Early Hints 允许浏览器在等待最终服务器响应200 OK的同时，提前获取关键资源，降低用户感知的加载时间。
2. 改善核心 Web 指标（Core Web Vitals）：预加载资源可以确保关键页面元素更快渲染，FCP（首次内容绘制）和 LCP（最大内容绘制）等指标将获得显著提升。
3. Nginx 用户可轻松集成：为 Nginx 启用 Early Hints 非常简单，只需对配置进行微调。

03. 如何为 Nginx 启用 Early Hints

在 Nginx 中的工作模式是——代理来自后端服务器的 Early Hints。假设后端服务器能够预知自己将执行耗时较长的操作，并能够据此建议客户端预加载某些资源。只要经过正确配置，Nginx 就会解析来自后端的 Early Hints 并将其转发给客户端。

为此，Nginx 引入了一个新的 early_hints 指令，用来指定在何种条件下将后端的 Early Hints 发送给客户端。但默认情况下，代理 Early Hints 的功能是关闭的。

要为 HTTP/2 和 HTTP/3 客户端代理 Early Hints，请参考以下配置：

early_hints $http2$http3;
proxy_pass http://bar.example.com;

3.1 精准开启 Early Hints

理论上，目前所有 HTTP 版本都支持 Early Hints。但是，HTTP/1.1 客户端必须能够识别 HTTP 的103响应码，才能正确解析或跳过它。老旧的客户端如果不支持103响应，可能会触发 HTTP 协议解析错误。

根据 Chrome 开发指南的建议，可以通过分析sec-fetch-mode请求头。来识别浏览器是否支持 Early Hints。以下是遵循这一最佳实践的 Nginx 配置片段：

map $http_sec_fetch_mode $early_hints { 
        navigate $http2$http3; 
}
server  { 
        ... 
        location / { 
             early_hints $early_hints;
             proxy_pass http://example.com; 
        }
}

这个配置通过map指令，将sec_fetch_mode请求头的值映射到$early_hints变量。只有当浏览器使用navigate模式（即用户通过点击链接或输入 URL 访问页面）时，才会启用 Early Hints，这样可以避免老旧客户端可能出现的问题。

3.2 利用 Early Hints 预加载资源

启用「早期提示」功能后，Nginx 会向浏览器发送一个包含关键资源链接的103 Early Hints响应。浏览器会立即开始异步预加载这些资源，同时继续等待最终的200 OK响应。这种「异步过程」减少了不必要的等待时间，确保页面内容更快地呈现给访客。

数据佐证的性能表现

多项测试已经表明，Early Hints 能够显著降低 TTFB（首字节时间），并在以下核心 Web 指标上带来明显改善：

• 首次内容绘制（FCP）：更快地渲染出用户可见的内容。
• 最大内容绘制（LCP）：缩短页面最大元素完成加载所需的时间。

根据 Google 的测试，在一些情况下，甚至可以让 LCP 提升高达 1 秒。

这些改进不仅能提升网站性能，还能对用户体验和 SEO 表现带来非常积极的影响。更快的加载速度意味着更高的用户满意度和更好的搜索引擎排名。

如果你想深入了解 Early Hints 背后的技术原理及其对 Web 性能的深远影响，强烈推荐阅读 Google 工程师 Barry Pollard 撰写的这篇深度好文：developer.chrome.com/docs/web-platform/early-hints。