Cache Aware HTTP/2 Server Push On Apache2, WordPress

We discussed about HTTP/2 Server Push. Apache2 is superior web server software compared to Nginx and it supports HTTP/2 Server Push. Here are few examples of HTTP/2 Server Push on Apache2 running WordPress (we are not talking about simple Link Preload) which can make your webpage to load faster over HTTP/2. Properly implementing HTTP/2 Server Push not exactly easy work. At the end, we will learn to create Cache Aware HTTP/2 Server Push On Apache2 for WordPress.

 

Many websites talk about Link Preload not real HTTP/2 Server Push. HTTP/2 Server Push also contains the keyword Link Preload but HTTP/2 Server Push can be separated from HTTP/2 Server Push, the later is too serious server side matter. Even they included rel=preconnect inside some of those articles with lot of wrongs/imperfectness in code for Apache2. Our and many small, medium websites are far well optimised, although we have least resources and always at developmental mode. They do publish odd things around page speed optimisation too. There are lot of resources including from Apache2 related peoples small websites. But those websites are “mainstream” and popular. The wrong thing runs.

We are talking about this RFC :

Also look at the content under the subheader “Server Push (HTTP/2)” :

 

Basic Idea About Cache Aware HTTP/2 Server Push On Apache2, WordPress

 

First thing is that, you need to have Apache2 installed in our way. That repo has importance over hundreds of distro specific packages.

HTTP/2 Server Push is nothing but like we inline CSS, Js – we are pushing it over HTTP/2. Which resource you want to Push depends on waterfall analysis (on webpagetest.org) of your webpage. Usually some resource(s) which is/are at the bottom of the waterfall can be pulled up with HTTP/2 Server Push. It is definitely bandwidth costly for a client with 256 kbps modem. The directive for HTTP/2 Server Push contains the Link Preload as there is HTTP/1.1 as other users so that it becomes plain “preload” on HTTP/1.1. It is not possible to think anything more at this moment as RFC spec. But HTTP/2 Server Push is far superior than plain Link Preload – we can specify not to push based on cache, specify cache, ask not to fallback to plain preload etc. So there are differences with inline CSS. Most Page Speed tools can not understand all the directives at present. There is a matter of “perception” of experience. Inlining CSS is best so far as not even 50% devices using HTTP/2.

WordPress has little to do directly with HTTP/2 Server Push, rather there are common files at frontend which are suitable candidate to HTTP/2 Server Push. That mixture of inline, HTTP/2 Push is maximum optimisation on June 2017. Oddly, in most cases, you’ll find HTTP/2 Server Push to be useless (there are too many devices, too many complicated matters to consider).

 

Examples Of Cache Aware HTTP/2 Server Push On Apache2, WordPress

 

We are talking in the context of mainly httpd.conf/apache2.conf or .htaccess. To enable most simple example push to load will be, with example of CSS and Js :

The above on HTTP/1.1 will be simple old preload. We can make it only for HTTP/2 :

The most perfect solution at present would be to set a cookie, when the example.js file is pushed and also directive is to check that cookie for the next time, so that the push is only when the cookie is not present :

Logically I want to push only on HTML files of W3TC. You need to work with the filesMatch directive as it can interfere with W3 Total Cache or permalink. Of course you can split it to make easy and add on .htaccess :

The above is near perfect. If has cache will not push, but will push when cache is clear. It also prevents any chance of injection, poisoning cache etc.

If you cURL, you will get it, as example :

Test on Google Chrome’s Developer > Javascript Console > Network. When cache is present, that means you are reloading the page, or like browsing now, it will not push. Clear your cache, you’ll see the file is pushed.

This Article Has Been Shared 6981 Times!

Facebook Twitter Google+ Pinterest