Here is a Clear, Easy Guide on HTTP/2 Server Push. Nginx & WordPress is Commonly used Combination For HTTPS on Cloud to Dedicated Servers. We need to clarify some matters which are probably not clear. HTTP/2 Server Push Nginx has been more a buzzword than real guides and usage. It is CloudFlare who has support. Unless RFC is followed, other resources will not work :
1 2 3 | https://tools.ietf.org/html/rfc7540 https://http2.github.io/http2-spec/ https://w3c.github.io/preload/#server-push-http-2 |
Nginx community edition does not support HTTP/2 Server Push as server software. Nginx Plus paid does support HTTP/2 Server Push as server software. H2O server cum reverse proxy, Apache2 supports HTTP/2 Push. CloudFlare service does support HTTP/2 Server Push as reverse proxy service. In other words, if you are using Nginx community edition, then after following the guide you have pass through CloudFlare service to get HTTP/2 Server Push. We do not recommend that for production server. As we normally do not use CloudFlare, but standard DNS like Dyn DNS. You can test how it feels on dev server. We are first configuring Nginx & WordPress for HTTP/2 Server Push.
Needed Setup For Testing HTTP/2 Server Push With Nginx & WordPress
Normal Nginx WordPress setup with Let’s Encrypt or any SSL certificate. Please search our website using the search function in case you need something.
---
How to Test HTTP/2 Server Push With Nginx & WordPress
You can follow our guide and test with Google Chrome’s Console tool. If you pass through CloudFlare DNS, it will show the resources as “Push”. , Nginx community edition is going towards scrap. On Chrome browser, click options in this manner :
1 2 | View > Developer > Javascript Console > Network (right click on console's name option to get option menu) |
Click to tick these options on the context menu you got by right click :
1 | Method, Status, Protocol, Scheme, Initiator |
Now test some website which has like :
1 2 | https://blog.cloudflare.com/ https://www.shimmercat.com/ |
Under Initiator column of Chrome’s Javascript Console you’ll see that there are “Push”, like this entry :
1 | screen.css?v=7f0b850bacGET200h2httpsPush / (index):16 |
You’ll see that only blue coloured bar is present. If you click on it, you’ll get a menu with context box where clearly written “Receiving Push”. Check their header with cURL (or cURL for Windows) :
1 2 | curl -I -s https://blog.cloudflare.com/ | grep link link: </assets/css/screen.css?v=7f0b850bac>; rel=preload; as=style,<//cdn.bizible.com/scripts/bizible.js>; rel=preload; as=script,<https://code.jquery.com/jquery-1.11.3.min.js>; rel=preload; as=script,<//fast.eager.io/CGVfxD1y6q.js>; rel=preload; as=script,</assets/js/jquery.fitvids.js?v=7f0b850bac>; rel=preload; as=script |
This is a screenshot illustrating push on console :
How to Setup Nginx For HTTP/2 Server Push
It does not matter whether you are using free Nginx or paid Nginx. This is mandatory step. Upon cURL, you have to receive this stuffs which you want to push :
1 2 | link: </wp-includes/js/jquery/jquery.js>; rel=preload; as=script link: </wp-includes/js/jquery/jquery-migrate.min.js>; rel=preload; as=script |
You can join multiple if you want like example header of cURL. Edit the “virtual hosts” file under /etc/nginx/sites-available directory (in case of Ubuntu, Debian), which is normally named as default and normally add the directive under server block in the way you add various headers. This is a set of example :
1 2 3 | add_header link "</wp-includes/js/jquery/jquery.js>; rel=preload; as=script"; add_header link "</wp-content/themes/example/style.css>; rel=preload; as=style"; add_header link "</wp-content/uploads/this/image.jpg>; rel=preload; as=image"; |
After adding, run nginx -t and restart nguni with sudo service nginx restart command. Clear caches of your website and perform cURL to check header.
How to Setup WordPress For HTTP/2 Server Push
Obviously, you may need to test within WordPress instead of always testing with editing Nginx config. Both together (Nginx and WordPress) not needed. If your web server support push, then you can use PHP to add header or WordPress Plugin to add header response like “Add Headers” plugin (on WordPress repo). If you use PHP then this will be the syntax :
1 | <?php header('link: </wp-content/themes/example/style.css>; rel=preload; as=style'); ?> |
WordPress does have function to add header :
1 2 3 4 | add_action( 'send_headers', 'add_header_push' ); function add_header_push() { header( 'link: </wp-includes/js/jquery/jquery.js>; rel=preload; as=script' ); } |
