HTML实现HTTP/2 Server Push避坑指南

HTTP/2 Server Push 已被主流浏览器（Chrome 96+、Firefox 90+、Edge 96+）彻底弃用，所有相关服务端配置（如 Nginx 的 http2_push、Link 响应头、Node.js 的 pushStream）不仅无效，还会产生额外网络开销；真正有效的资源预加载方案只有 ``，且必须严格置于 `` 中、准确指定 `as` 属性，否则将失去语义与优化效果——别再为早已失效的“黑科技”浪费调试时间，聚焦内联关键 CSS、精准 preload 首屏资源、启用 TLS 1.3 和 Brotli，才是提升首屏性能的务实之选。

HTTP/2 Server Push 在现代浏览器中已完全失效，Link 响应头、Nginx 的 http2_push 指令、Node.js 的 stream.pushStream() 等写法，Chrome 96+、Firefox 90+、Edge 96+ 都会静默忽略——不是配置错了，是协议支持被移除了。

为什么你在 Network 面板看不到 Push 资源

因为浏览器根本没接收它。即使服务器发出了 PUSH_PROMISE 帧（Wireshark 能抓到，chrome://net-internals/#http2 仍显示日志），客户端已跳过解析、不进缓存、不触发加载。你看到的“资源已推送”只是服务器单方面动作，和页面实际加载链路无关。

• Initiator: Push 在 Network 面板里永远不会出现
• 所有被“推送”的 CSS/JS 仍需 HTML 解析后发起独立 GET 请求
• 没有节省任何 RTT，也没有提前进入 HTTP 缓存

rel="preload" 是唯一可行的替代方案

它由浏览器自主调度，兼容所有主流版本，且语义清晰、可中断、可缓存。关键点不是“怎么写”，而是“怎么用对”：

• 必须放在 中，早于对应资源的 或