Setting up HTTP/2 server push
What is HTTP/2?
HTTP/2 is the latest revision in the HTTP standard. It offers a lot of improvements to page load speed.
What is HTTP/2 server push?
HTTP/2 push is one of the new speed improvements from the HTTP/2 revision. It allows servers to push all the resources needed to render a site to a browser in one request.
There are two major ways to set up HTTP/2 push for the time being. One can either use a browser that supports it nativly or you can make use of a proxy. Since none of the moust popular browser supports HTTP/2 server push, using a proxy might be the simplest alternative.
Adding a Link header
All of the options explored here requres you to add a Link header to the HTTP-response proxy/web-server to know what to push to the client.
add_header Link '<style.css>; rel=preload; as=style';
header("Link: <style.css>; rel=preload; as=style", false);
style.css refers to the filename of the file that you are going to push and
style to the type of file being added. To find the appropriate as value for the file you are pushing, check out the list here.
Using a proxy
Using CloudFlare is the simplest way to enable HTTP/2 server push on your side. Just add the Link header and make sure your visitors is using the site over TLS (https).
nghttp2 includes a HTTP/2 self-hosted proxy. For setting up the nghttp2 proxy, i reccomend following this guide.
HTTP/2 server push in webserver
H2O in one of few webservers with working HTTP/2 server push implementation. Take a look at the website of the project for instructions on how to set up.
Test your implementation
To test your HTTP/2 server push implementation, head over to http2-push.io.