Featured Nginx Nginx HTTP/2 Server Push Finally Supported

Nginx 1.13.9 mainline web server release marks the official support for HTTP/2 Server Push - a feature of HTTP/2 which was left out of Nginx HTTP/2 until now. The official Nginx 1.13.9 release has been pushed back by a week due to the HTTP/2 Server Push gzip bug I reported. The HTTP/2 Push gzip bug has been fixed in Nginx master branch so below initial Nginx 1.13.9 HTTP/2 Push tests are using the Nginx master branch code which Centmin Mod 123.09beta01's Nginx upgrade routine supports natively when you specify the Nginx version at upgrade time as = master.

For most Centmin Mod users, waiting for official Nginx 1.13.9 release is probably best. You can follow Nginx mainline branch roadmap and Nginx release page or Centmin Mod Nginx & PHP-FPM News forums for Nginx release threads.

When news of HTTP/2 first came out, I was very excited to play with HTTP/2 Server Push as I had already experienced and seen the benefits when testing h2o HTTP/2 web server. So thank you Nginx for finally adding HTTP/2 Server Push support!

According to HTTP/2 Frequently Asked Questions

To read more indepth info on what HTTP/2 Server Push is and how it works, you'd want to read the guide at A Comprehensive Guide To HTTP/2 Server Push.

Want to freshen up on HTTP/2 knowledge ? Check out Youtube video.

Nginx HTTP/2 Push Directive Documentation

Nginx HTTP/2 Push directives have also just landed in official Nginx documentation.

• http2_max_concurrent_pushes
• http2_push
• http2_push_preload

Centmin Mod Nginx HTTP/2 Server Push

Ever since Centmin Mod Nginx 1.9.3 update, HTTP/2 has been supported by Centmin Mod Nginx - first via a HTTP/2 alpha patch in Nginx 1.9.3 posted by Nginx's Valentin V. Bartenev back in August 2015 and then officially when Nginx 1.9.5 anounced HTTP/2 support in September 2015. So let's check out HTTP/2 Server Push support in Centmin Mod built Nginx 1.13.9 web server.

Centmin Mod 123.09beta01 LEMP stack installer allows end users to upgrade and compile their Nginx server versions via a shell based centmin.sh menu option 4. You just run centmin.sh menu option 4 and when asked which version of Nginx you want to upgrade or downgrade to, just type the version in i.e. 1.13.9 when it's officially released or type the word = master to pull and compile from Nginx master branch and then watch Centmin Mod compile and install that version for you

You'll want to always use latest Nginx mainline version listed at nginx: download

Code (Text):

--------------------------------------------------------
     Centmin Mod Menu 123.09beta01 centminmod.com
--------------------------------------------------------
1).  Centmin Install
2).  Add Nginx vhost domain
3).  NSD setup domain name DNS
4).  Nginx Upgrade / Downgrade
5).  PHP Upgrade / Downgrade
6).  XCache Re-install
7).  APC Cache Re-install
8).  XCache Install
9).  APC Cache Install
10). Memcached Server Re-install
11). MariaDB MySQL Upgrade & Management
12). Zend OpCache Install/Re-install
13). Install/Reinstall Redis PHP Extension
14). SELinux disable
15). Install/Reinstall ImagicK PHP Extension
16). Change SSHD Port Number
17). Multi-thread compression: pigz,pbzip2,lbzip2...
18). Suhosin PHP Extension install
19). Install FFMPEG and FFMPEG PHP Extension
20). NSD Install/Re-Install
21). Update - Nginx + PHP-FPM + Siege
22). Add Wordpress Nginx vhost + Cache Plugin
23). Update Centmin Mod Code Base
24). Exit
--------------------------------------------------------
Enter option [ 1 - 24 ] 4
--------------------------------------------------------

Code (Text):

**********************************************************************
* Nginx Update script - Included in Centmin Extras
* Version: 123.09beta01.b013 - Date: 31/01/2018 - Copyright 2011-2018 CentminMod.com
**********************************************************************

This software comes with no warranty of any kind. You are free to use
it for both personal and commercial use as licensed under the GPL.


Nginx Upgrade - Would you like to continue? [y/n] y

Install which version of Nginx? (version i.e. type 1.13.8): 1.13.9

Once Centmin Mod finishes building Nginx 1.13.9, the end resulting configured Nginx would be something like below when you check Nginx version output. Centmin Mod Nginx supports various compilers from GCC 4, 5.3, 6.3, 7.2, 8.x and Clang 3.4, 4, 5 and 6. Below is with GCC 8.0.1 compiler and OpenSSL 1.1.1-pre1 alpha which I am currently testing for TLS 1.3 support (2 birds and 1 stone and all that ).

Nginx Cache Aware HTTP/2 Server Push

To test Nginx 1.13.9 HTTP/2 Server Push, I implemented the suggestion by Smashing Magazine to implement a form of web browser cache aware HTTP/2 Server Push by using conditional preload link resource hint headers which only get served if a preset cookie is not present (pushcheck=visited) and using nginx mapping of $cookie_pushcheck to add the preload link header via add_header directives. Basically, only serve preload link resource hint headers for HTTP/2 Server Push if a preset cookie doesn't exist - which implies a first time visitor who doesn't have pushed assets within their web browser cache. Repeat visitor and page reloads, will skipp adding the preload link headers in favour of serving the previously pushed assets via the visitor's web browser cache.

Apache’s mod_http2 uses the H2PushDiarySize and H2O HTTP/2 server has http2-casper directive for similar cache aware HTTP/2 Server push implementations. I am not aware of any Nginx native implementation, so this is one workaround I came up with.

Curl header check for test HTTP/2 Server Pushed domain.

Code (Text):

curl -I https://http2.centminmod.com/
HTTP/2 200
date: Thu, 15 Feb 2018 17:49:07 GMT
content-type: text/html; charset=utf-8
content-length: 6103
last-modified: Sun, 11 Feb 2018 01:14:19 GMT
vary: Accept-Encoding
etag: "5a7f98eb-17d7"
server: nginx centminmod
x-powered-by: centminmod
set-cookie: pushcheckp=puremin
set-cookie: pushcheckt=grid
link: </purecss/pure-min.css>; rel=preload; as=style
link: </purecss/grids-responsive-min.css>; rel=preload; as=style
accept-ranges: bytes

I setup two CSS files to be HTTP/2 Server Pushed via preload link resource hint headers

Code (Text):

link: </purecss/pure-min.css>; rel=preload; as=style
link: </purecss/grids-responsive-min.css>; rel=preload; as=style

The two additional cookies added to check if visitor is a first time visitor or repeat (for browser cache skipping)

Code (Text):

set-cookie: pushcheckp=puremin
set-cookie: pushcheckt=grid

On the Nginx nginx.conf end the relevant nginx mapped cookies to determine whether or not Nginx should serve a preload link resource hint header to visitors based on presence or absence of preset cookies

Code (Text):

map $cookie_pushcheckp $push_cookiepuremin {
   default "</purecss/pure-min.css>; rel=preload; as=style";
   "~*puremin" '';
}

map $cookie_pushcheckt $push_cookiegrid {
   default  "</purecss/grids-responsive-min.css>; rel=preload; as=style";
   "~*grid" '';
}

Nginx vhost end with HTTP/2 Push enabled via http2_push_preload directive and additional preset cookies.

Code (Text):

location /  {
   http2_push_preload on;
   add_header Set-Cookie "pushcheckp=puremin";
   add_header Set-Cookie "pushcheckt=grid";
   add_header Link $push_cookiepuremin;
   add_header Link $push_cookiegrid;
}

nghttp stats output * next to pushed CSS files indicates HTTP/2 Server Push

Code (Text):

nghttp -nas https://http2.domain.com/

***** Statistics *****

Request timing:
  responseEnd: the  time  when  last  byte of  response  was  received
              relative to connectEnd
 requestStart: the time  just before  first byte  of request  was sent
              relative  to connectEnd.   If  '*' is  shown, this  was
              pushed by server.
     process: responseEnd - requestStart
        code: HTTP status code
        size: number  of  bytes  received as  response  body  without
              inflation.
         URI: request URI

see http://www.w3.org/TR/resource-timing/#processing-model

sorted by 'complete'

id  responseEnd requestStart  process code size request path
 13     +1.27ms       +141us   1.13ms  200   1K /
  2     +1.63ms *     +411us   1.22ms  200   4K /purecss/pure-min.css
  4     +2.08ms *     +449us   1.64ms  200   1K /purecss/grids-responsive-min.css

---

Looks like Nginx HTTP/2 Server Push supports multiple preload hints headers within same add_header directive which makes it easier to use one cookie for detection according to Nginx blog at Introducing HTTP/2 Server Push with NGINX 1.13.9 | NGINX

So change above to

Code (Text):

map $cookie_pushcheck $push_cookie {
   default "</purecss/pure-min.css>; rel=preload; as=style, </purecss/grids-responsive-min.css>; rel=preload; as=style";
   "~*pushed" '';
}

Nginx vhost end with HTTP/2 Push enabled via http2_push_preload directive and additional preset cookies.

Code (Text):

location /  {
   http2_push_preload on;
   add_header Set-Cookie "pushcheck=pushed";
   add_header Link $push_cookie;
}

 

Nginx Cache Aware HTTP/2 Server Push

Testing my above outlined cache aware Nginx 1.13.9 HTTP/2 Server Push using custom cookie detection. First load has pushed initiator column CSS files where Nginx detects no custom cookies. Second reload is when Nginx detects custom cookies and assumes repeat visit, so skip HTTP/2 Push.



There are probably other ways of implementing browser cache aware HTTP/2 Server Pushes. Maybe using a single cookie that is a fingerprint hash of pushed static file assets ? So if you have other ideas please share

Following tests where done in Chrome Canary web browser on Windows 10

First time visitor without preset cookie detected will be served HTTP/2 Pushed CSS files



Inspecting the 2 CSS files HTTP/2 Pushed timings



Then reloading the page will detect that this is a repeat visitor as the presence of the preset cookies are detected so skip server HTTP/2 Pushed CSS files and serve from visitor's web browser cache instead.



Inspecting timings for CSS files served from web browser (disk cache)

 

Webpagetest.org HTTP/2 Server Push Tests

Next up moving Nginx HTTP/2 Server Push testing to Webpagetest.org. For noobs WebPerf - PageSpeed - How to use webpagetest.org for page load speed testing

Using Chrome Cable 5Mbps profile with California location server

First view mean profile



Waterfall and index page's response header



Not sure why when using Webpagetest and you check first and repeat view for run parameters, the repeat view returns error for Test Data Missing ?

 

Official blog Introducing HTTP/2 Server Push with NGINX 1.13.9 | NGINX. Yes final Nginx 1.13.9 version has been officially released. Centmin Mod users can discuss Nginx 1.13.9 here.

Nginx 1.13.9 final release + GCC 8.0.1 Feb 18th build release + OpenSSL 1.1.1-pre1 alpha release for TLS v1.3 + Cloudflare zlib performance patch + ngx_pagespeed 1.13.35.2-stable + Cloudflare HTTP/2 HPACK Full Encoding patch