如何配置 Nginx http2_push 资源推送：让浏览器提前加载关键静态文件-Nginx-PHP中文网

nginx 的 http2_push 指令确实能主动推送资源，但现代浏览器已基本停用该机制；chrome 96+、firefox 97+ 默认禁用 server push，实际生效概率极低，当前更可靠、标准的做法是用 link 响应头实现 preload 预加载。

如何配置 nginx http2_push 资源推送：让浏览器提前加载关键静态文件

直接说结论：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 和图片之前，浏览器按接收顺序解析依赖，先到的样式能更快触发渲染。

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

更推荐的方式：用 Link 响应头做 preload

这是目前最稳妥的“提前加载”方案。Nginx 不执行推送，而是透传后端生成的 Link 头，或自己用 add_header 添加：

location /index.html {
    add_header Link '/main.css>; rel=preload; as=style, /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 提前发起加载