HTTP/2 Server Push 在 WordPress 中的应用

HTTP/2

现在编译安装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

Bigfa

computer loser

Comments : 2

  1. 表示还没看懂

  2. 谢谢分享, 这个刚好需要。

发表留言

人生在世,错别字在所难免,无需纠正。

Smilies powered by wp-alu

Post Comment