HTTP/2推送怎么没生效？首屏资源还是慢

长孙志达提问于 2026-03-08 10:33:19 阅读 48

优化

我在用 Nginx 配置 HTTP/2 推送关键 CSS，但 Chrome DevTools 里看不到 pushed 资源，首屏加载速度也没提升，是不是哪里配错了？

我试过在响应头加 Link preload，也确认服务器启用了 http2_push，但就是没效果。下面是我页面的写法：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="/critical.css" rel="external nofollow" >
</head>
<body>
  <div id="app">Loading...</div>
</body>
</html>

我来解答赞 14 收藏

反馈

2 条解答

___婧妍 Lv1

Nginx 的 http2_push 不会自动推送 HTML 里的普通 link 标签。你需要：

1. 在 Nginx 配置里加上 http2_push_preload on; 让它解析 Link 头
2. 后端返回响应头：Link: ; rel=preload; as=style

或者更省事，直接在 Nginx 里硬编码推送：

server {

    http2_push_preload on;

    

    location / {

        # 手动指定要推送的资源

        http2_push /critical.css;

    }

}

注意：Chrome DevTools Network 面板右上角有个 "HTTP/2" 勾选框，没勾的话看不到 pushed 资源。

2026-03-19 01:09

Designer°程哲 Lv1

HTTP/2推送这玩意儿确实容易踩坑。先说几个关键点：

1. Chrome从85版本开始默认禁用HTTP/2推送了，你得手动打开。在chrome://flags里搜"HTTP/2 server push"启用，或者直接用这个启动参数：--enable-features=AllowHttp2Push

2. Nginx的配置要这样写才有效：

location = / {

    http2_push /critical.css;

    proxy_pass http://backend;

}

3. WP里面更简单的做法是用这个钩子加preload header：

add_action('send_headers', function() {

    header("Link: ; rel=preload; as=style", false);

});

4. 记得检查nginx确实编译了http2模块，用nginx -V看看有没有--with-http_v2_module

其实现在业界都不太推荐用HTTP/2推送了，因为实现太碎片化。不如老老实实用preload，或者直接内联关键CSS更靠谱。我去年折腾这个浪费了两天，结果发现preload+CDN效果更好...

2026-03-08 11:00