Nginx 如何在 Nginx 中配置 HTTP/2 推送功能提前加载关键静态资源文件

Nginx中正确配置HTTP/2推送需满足四条件：启用http_v2_module模块、OpenSSL≥1.0.2、listen 443 ssl http2、Protocol显示h2；推送路径须为绝对路径且仅限静态文件响应；配合Link头声明preload语义；验证须见DevTools中Initiator为Push或nghttp输出PUSH_PROMISE。

要在 Nginx 中正确配置 HTTP/2 推送（Server Push）以提前加载关键静态资源，核心不是“开个开关就生效”，而是确保协议就绪、路径合规、顺序合理、验证到位。很多配置看似写对了却没推送，问题往往出在底层条件未满足或语义误用上。

确认 HTTP/2 基础环境已就绪

推送功能依赖真实运行的 HTTP/2 连接，不是仅靠配置就能触发：

1. 运行 nginx -V 2>&1 | grep with-http_v2_module，输出必须含 with-http_v2_module；若为空或报错，需重新编译安装并启用该模块
2. 执行 nginx -V 2>&1 | grep -i openssl，OpenSSL 版本必须 ≥ 1.0.2（推荐 ≥ 1.1.1）；1.0.1e 或更低版本即使 Nginx 版本达标也无效
3. 监听配置中必须带 http2 参数，且仅作用于 HTTPS 端口：listen 443 ssl http2;；HTTP/2 不支持明文 HTTP
4. 浏览器 Network 面板中，目标请求的 Protocol 列必须显示 h2；若仍为 http/1.1，说明 ALPN 协商失败，推送不会启动

使用 http2_push 精准推送关键资源

这是最直接的硬编码推送方式，适用于首页等固定路径场景，但有严格限制：

1. 路径必须是绝对路径，以 / 开头，如 http2_push /style.css;；/style.css?v=1 或 style.css 会被静默忽略
2. 只对 Nginx 自身返回的响应生效（如 root 或 alias 提供的静态文件）；若走 proxy_pass 或 fastcgi_pass，推送不触发
3. 按配置顺序推送：CSS 应排在图片之前，因为浏览器按接收顺序解析依赖；例如：

   http2_push /main.css;

   http2_push /logo.png;

   http2_push /banner.jpg;

4. 避免滥用：只推送 HTML 中明确引用的关键资源（如 <link rel="stylesheet">、内联 <script> 所需 JS），不推送 <img src> 中的非首屏图

配合 Link 响应头强化语义与优先级

单靠 http2_push 无法告诉浏览器“这个 CSS 很重要”，需用 Link 头补充语义：

1. 添加 add_header Link '</main.css>; rel=preload; as=style, </logo.png>; rel=preload; as=image';
2. as=style 让浏览器将 CSS 加入高优先级 preload 队列，立即解析；as=image 则归入图像队列，调度权重更低
3. 该头对动态内容（如 PHP/Python 后端）同样有效，只要上游服务返回对应 Link 头，再配合 http2_push_preload on; 可触发推送（注意：http2_push 与 http2_push_preload 不能共存于同一 location）

验证推送是否真正生效

不能只看配置有没有报错，要从传输层确认：

1. Chrome DevTools → Network → 刷新页面 → 查看 “Protocol” 列是否为 h2，“Initiator” 列是否标为 Push（而非 Other 或 Parser）
2. 启用 Waterfall 视图，观察 CSS 推送流的 Start Time 是否明显早于图片，确认顺序有效
3. 命令行验证：nghttp -v https://your-domain.com/demo.html，输出中出现 PUSH_PROMISE 行即表示推送已发出
4. 注意：若推送资源返回 404/500，Nginx 仍会发帧，但浏览器丢弃——建议用 try_files 预检资源是否存在