Nginx 的 http2_push 指令确实能主动推送资源，但现代浏览器已基本停用该机制；Chrome 96+、Firefox 97+ 默认禁用 Server Push，实际生效概率极低，当前更可靠、标准的做法是用 Link 响应头实现 preload 预加载。
直接说结论：Nginx 的 http2_push 指令确实能主动推送资源，但现代浏览器已基本停用该机制。Chrome 96+、Firefox 97+ 默认禁用 Server Push，实际生效概率极低。当前更可靠、更标准的做法是用 Link 响应头实现预加载（preload），由浏览器自主控制——它不依赖 HTTP/2 Push 协议，兼容性好、语义明确、可控性强。
明确前提：环境与协议必须达标
若仍想尝试 http2_push，需确保以下三点同时满足：
- Nginx 版本 ≥ 1.13.9（推荐 1.24.x 或更高）
- 启用 HTTPS + HTTP/2：监听配置中必须含
listen 443 ssl http2 - 资源路径为绝对路径（如
/css/main.css），且文件真实存在、可被 GET 访问
基础配置：在 location 中显式声明推送
http2_push 不自动分析 HTML，必须手动写明每个要推的资源。推荐放在匹配 HTML 页面的 location 块中，例如：
location = /index.html {
http2_push /css/main.css;
http2_push /js/app.js;
http2_push /fonts/icon.woff2;
}
注意顺序：CSS 应排在 JS 和图片之前，浏览器按接收顺序解析依赖，先到的样式能更快触发渲染。
更推荐的方式：用 Link 响应头做 preload
这是目前最稳妥的“提前加载”方案。Nginx 不执行推送，而是透传后端生成的 Link 头，或自己用 add_header 添加：
location /index.html {
add_header Link '</css/main.css>; rel=preload; as=style, </js/app.js>; rel=preload; as=script';
}
关键细节：
- 路径必须以
/开头（绝对路径） -
as属性必须准确（style、script、font、image），否则浏览器可能忽略 - Nginx 默认透传
Link头，无需额外配置；若用 PHP/Node.js 输出，也只需在响应前加header('Link: ...')
验证是否真正生效
打开 Chrome DevTools → Network 标签页 → 刷新页面：
- 查看目标资源（如
main.css）的 Initiator 列：显示preload或link，说明Link头起作用 - 在 Headers → Response Headers 中搜索
link:，确认头存在且格式正确 - 不会看到 “Push” 类型请求——因为 Nginx 实际没推，浏览器只是按 preload 提前发起加载
