B^B .. Oh

一群爱搞事情的小弱鸡

HTTP/2 Server Push 在 博客中的应用(WordPress)

《HTTP/2 Server Push 在 博客中的应用(Wordpress)》

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

本站使用的是BBnginx(基于Verynginx)

注:目前Verynginx已经内置支持HTTP/2及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处理。

as可以支持的类型:请参考 https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content#What_types_of_content_can_be_preloaded

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

 

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注