现在编译安装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 文件里引用的文件效果明显,如图片文件和字体文件。
- 所要推送的资源文件,如果浏览器已经有缓存,推送就是浪费带宽。即使推送的文件版本更新,浏览器也会优先使用本地缓存。
以上。
表示还没看懂
谢谢分享, 这个刚好需要。