HTTP/2 Server Push在NGINX服务器的实战应用

2023-09-07 20:56:54

NGINX从1.13.9版本开始支持HTTP/2服务端推送，很多用 NGINX 的用户已经迫不及待地想要使用这个特性，但是实现时往往还是觉得无从下手。HTTP/2 服务端推送能够在 web 页面加载时，提前将一些 CSS 或 JavaScript 等资源一同推送给用户，这样就可以在用户开始使用之前将这些资源加载好，从而减少了加载时间，提升页面加载速度。

本篇博文就将为大家详细介绍如何在 NGINX 服务器中启用 HTTP/2 服务端推送功能，并通过实战案例演示其具体用法和实现。话不多说，让我们开始吧！

一、启用HTTP/2服务端推送

要启用HTTP/2服务端推送，您需要做的是：

确保您的NGINX版本是1.13.9或更高。
在NGINX配置文件中添加以下指令：

http {
    server {
        listen 443 ssl http2;
        server_name example.com;
        ssl_certificate /path/to/certificate.pem;
        ssl_certificate_key /path/to/private.key;

        # 启用HTTP/2服务端推送
        http2_push_preload on;
    }
}

重新加载NGINX配置文件。

二、实战案例

现在，我们来看一个具体的实战案例。假设我们有一个网站，其中有一个页面包含以下资源：

main.css
main.js
image.png

在启用HTTP/2服务端推送后，当客户端请求这个页面时，NGINX服务器将自动推送main.css和main.js这两个资源。这样，当客户端开始加载页面时，这些资源已经加载好了，从而减少了加载时间。

要实现这个效果，您需要在NGINX配置文件中添加以下指令：

http {
    server {
        listen 443 ssl http2;
        server_name example.com;
        ssl_certificate /path/to/certificate.pem;
        ssl_certificate_key /path/to/private.key;

        # 启用HTTP/2服务端推送
        http2_push_preload on;

        # 指定要推送的资源
        http2_push /main.css;
        http2_push /main.js;
    }
}