Fatesinger

现在编译安装Nginx 的时候都会默认变价http2 模块，而且开启也非常简单。HTTP/2 有一项重要的功能就是Server Push，在初期的时候Nginx 的HTTP/2并不支持Server Push，加上这个功能是需要开发者自己配置的功能，所以可能使用这个功能的普通玩家并不多。

Server Push 指的是，还没有收到浏览器的请求，服务器就把各种资源推送给浏览器。比如在请求页面的时候直接就把CSS JS等文件全部发送给浏览器，这样只需要一轮 HTTP 通信浏览器就得到了全部资源，性能上的提升可想而知。

编译配置HTTP/2 及其简单，只需要在参数中加上--with-http_v2_module 即可，要注意的是Nginx 是从1.13.9 版本才开始支持Server Push 的。

使用Server Push

Server Push 可以在服务器的配置中直接使用，但是显然及其不实用，我们可以利用HTTP 回应的头信息Link命令来实现Server Push。

Link: </styles.css>; rel=preload; as=style

如果是多个资源则如下

Link: </style.css>; as=style; rel=preload, </favicon.ico>; as=image; rel=preload

Nginx 配置改成下面这样

server {
    listen 443 ssl http2;

    # ...

    location = / {
        proxy_pass http://upstream;
        http2_push_preload on;
    }
}

如果服务器或者浏览器不支持 HTTP/2，那么浏览器就会按照 preload 来处理这个头信息，预加载指定的资源文件。

在WordPress 中使用

其实和WordPress 关闭并不大，主要就是加个HTTP 头。

<?php header("Link: </icons.svg>; rel=preload; as=image", false);?>

直接把你需要push 的文件写在这个头上就好了，注意push 的文件只能是本地文件。

注

• Preload 对CSS 文件效果不明显，因为CSS是在HTML资源中直接引用的，并且HTML资源可以快速传递。浏览器在HTML页面交付后立即启动CSS请求。
• Preload 对CSS 文件里引用的文件效果明显，如图片文件和字体文件。
• 所要推送的资源文件，如果浏览器已经有缓存，推送就是浪费带宽。即使推送的文件版本更新，浏览器也会优先使用本地缓存。

以上。

参考文章

Introducing HTTP/2 Server Push with NGINX 1.13.9