Early Hints 怎么在 Nginx 上配置才生效？

Air-建梗提问于 2026-03-16 18:56:20 阅读 54

优化

我看到 Early Hints 能提前推送资源链接，加快页面加载，就在本地 Nginx 试了下，但浏览器 Network 面板里完全没看到 103 Early Hints 响应。

我加了 http2_push_preload on;，也返回了 Link 头，但还是不行。是不是还要开什么模块？我的 Nginx 版本是 1.24。

location / {
    add_header Link '</style.css>; rel=preload; as=style';
    add_header Link '</app.js>; rel=preload; as=script';
    http2_push_preload on;
}

网络优化

我来解答赞 6 收藏

反馈

2 条解答

Zz樱潼 Lv1

Nginx 1.24 不支持 103 Early Hints，这功能需要 1.25.0 以上版本。你那个 http2_push_preload 是 HTTP/2 Push 用的，跟 Early Hints 两码事。

升级到 Nginx 1.25+，配置改成这样：

server {

    early_hint /style.css rel=preload as=style;

    early_hint /app.js rel=preload as=script;

    

    location / {

        # 你的主资源处理

    }

}

另外提醒一句：浏览器支持也很有限，目前只有 Chrome/Edge 之类的 Chromium 浏览器支持，而且还得在 chrome://flags 里开 Early Hints Preload 才能看到效果。

2026-03-20 08:05

东方海利 Lv1

Nginx 1.24 不支持 103 Early Hints，Nginx 是从 1.25.1 版本才开始原生支持的。

你有两个选择：

一是升级 Nginx 到 1.25.1 以上（注意这是主线版，不是稳定版），然后这样配置：

server {

    listen 443 ssl http2;

    ssl_certificate /path/to/cert.pem;

    ssl_certificate_key /path/to/key.pem;



    # 启用 Early Hints

    early_hints on;



    location / {

        # 103 响应需要通过 error_page 来触发

        error_page 103 = /early_hints;

    }



    location = /early_hints {

        internal;

        add_header Link '</style.css>; rel=preload; as=style';

        add_header Link '</app.js>; rel=preload; as=script';

        return 103;

    }

}

二是如果你不想升级 Nginx，用 OpenResty + Lua 来实现，或者直接上 Cloudflare 之类的 CDN，它们天然支持 Early Hints。

本地开发测试的话，建议直接升级 Nginx 版本最省事。

2026-03-17 06:00