HTTP/2 Server Push

VPS

HTTP/2 Server Push

现在编译安装 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 文件里引用的文件效果明显,如图片文件和字体文件。
  • 所要推送的资源文件,如果浏览器已经有缓存,推送就是浪费带宽。即使推送的文件版本更新,浏览器也会优先使用本地缓存。

© 声明:本站原创文章采用BY-NC-SA创作共用协议,转载时请标明本文地址;非原创(转载)文章版权归原作者所有。

RECENT POSTS

Stay Hungry. Stay Foolish.

数据库查询次数:11次,页面生成时间:0.029秒。