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

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

优化

我在用 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>

我来解答赞 2 收藏

反馈

1 条解答

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