In the past, Nginx did not support the Server Push feature of HTTP/2. Fortunately, Nginx 1.13.9 already supports this feature. For details, please visit the Nginx official blog .
Server Push This feature allows the server to actively push some resources to the client (browser), saving the time that the client needs to use these resources to send requests again.
On the basis of Nginx, the network-wide CDN has supported the HTTP/2 Server Push feature, becoming the first CDN manufacturer in China to launch the Server Push function. This is also another important feature update since Paiyun CDN supports TLS 1.3 on the entire network. In the future, we will, as always, spare no effort to maintain the update and iteration of new features to bring faster access experience to users across the network.
This article will focus on the following three aspects to introduce the Server Push feature:
- What is Server Push?
- How to use Server Push?
- How to verify whether Server Push works?
What is Server Push
Server Push is a new technology introduced in the HTTP/2 specification, that is, the server preemptively "pushes" some website resources to the client (browser) without being explicitly asked by the client. Improve page access performance.
For a more convenient understanding, the following will be a comparative analysis:
WEB browser access to WEB server follows the request-response pattern. That is, a web browser requests a resource, and a web server responds to a resource. Taking a conventional webpage as an example, after requesting an /index.html, the WEB server responds to a /index.html page to the WEB browser. At this time, the WEB browser will parse the /index.html page and find that it needs to go to Load resources such as JS, CSS, and pictures. At this time, the client will request these resources in turn. This invisibly affects the rendering time of the first screen, which is not conducive to the fast loading and rendering of the page.
After using the Server Push technology, when the WEB browser requests /index.html, the WEB server will directly send the resources that need to be pushed to the WEB browser, without requiring the WEB browser to make requests in turn, which reduces the number of WEB browsers. The time spent making the request.
How to use Server Push
Youpai Cloud CDN supports the Server Push feature in the following two ways:
1. Use the HTTP Link header
This approach is described in detail in the W3C Preload Working Draft. Examples are:
Link: </static/css/style.css>; rel=preload; as=style;
Among them, the as in the Link header is mandatory, which tells the browser the type of resource pushed. For example, as=style indicates that the pushed resource is a style sheet. In addition to the style sheet, you can also push other content types. For details, see Supported content types .
If you need to push multiple resources, you can set as follows:
Link: </static/css/styles.css>; rel=preload; as=style, </js/scripts.js>; rel=preload; as=script, </img/logo.png>; rel=preload; as=image
2. CDN 控制台自定义 Server Push 配置
Log in to the CDN console , go to: Service Management > Function Configuration > HTTPS > HTTP/2 , click the [Manage] button to start the configuration, for example:
The matching path is:
/index.html
The push resources are:
/static/123.css /static/456.js
The configuration in the CDN console is shown in the screenshot:
Among them, [Matching Path] is required, and [Push Resource] is optional.
For the above two methods, you need to pay attention to the following matters:
- If the origin site has implemented the service push through the Link header, the configuration on the CDN side only needs to configure the [Matching Path] option, and there is no need to configure the [Push Resource] option; the CDN for pushing resources through the Link header has been enabled by default.
- If a custom Server Push push resource configuration is performed on the CDN side, the priority will be higher than the Link header set by the origin site.
- Regardless of the implementation method, the total number of push resources (including the Link header and the CDN custom method) does not exceed 8.
How to verify if Server Push works
1. Test with Google Chrome browser
The following configuration is made in the CDN console:
The package is captured and viewed through Google Chrome developer tools, and the pushed resources are all Pushed, as shown in the screenshot:
Check the resource response header information of resource/index.html, and check the x-upyun-h2-pushed field:
age: 501691 cache-control: max-age=691200 content-encoding: br content-type: text/html date: Thu, 19 Apr 2018 05:32:26 GMT etag: W/"86ef9cae8d9f9e1205b25357e78a149b" expires: Sat, 21 Apr 2018 10:10:55 GMT last-modified: Fri, 13 Apr 2018 10:10:45 GMT server: marco/2.1 set-cookie: UPYUNPUSH=582825323-1696419771-1484613131-3932011035; Max-Age=7200 status: 200 vary: Accept-Encoding via: T.205.M, V.403-zj-fud-207, S.mix-sd-dst-035, T.40.M, V.mix-sd-dst-044, T.136.H, M.cun-sd-lyi1-136 x-content-type: text/html x-request-id: 04dc2c7db2c509af1efc7d7252f0c2ce; 319efa6d981c0cb8dfb2b389368284f4 x-source: U/200 x-upyun-h2-pushed: /image/meinv1.jpg; /image/meinv2.jpg; /image/meinv3.jpg; /image/meinv4.jpg
Among them, the content of the x-upyun-h2-pushed field is:
x-upyun-h2-pushed: /image/meinv1.jpg; /image/meinv2.jpg; /image/meinv3.jpg; /image/meinv4.jpg
It can also indicate that the configured push resource has been successfully pushed.
2. Test with nghttp tool
The test command is:
nghttp -ans https://server-push.upyun.club/index.html
The test results are as follows:
id responseEnd requestStart process code size request path 13 +112.01ms +69us 111.94ms 200 167 /index.html 8 +1.31s * +56.96ms 1.25s 200 314K /image/meinv4.jpg 6 +2.17s * +56.95ms 2.11s 200 628K /image/meinv3.jpg 4 +2.34s * +56.94ms 2.28s 200 717K /image/meinv2.jpg 2 +2.42s * +56.91ms 2.36s 200 726K /image/meinv1.jpg
As can be seen from the test results, the pushed resources are marked with an asterisk on the left side of the requestStart column.
Recommended reading:
One article to understand HTTP/2 features
From the application layer protocol negotiation mechanism, should you choose a CDN that supports HTTP/2
Reference documentation:
HTTP/2 Server Push Service | Cloudflare
A Comprehensive Guide To HTTP/2 Server Push
Introducing HTTP/2 Server Push with NGINX 1.13.9 | NGINX