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.

Nginx

add_header Link '<style.css>; rel=preload; as=style';

PHP

header("Link: <style.css>; rel=preload; as=style", false);

Where 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

CloudFlare

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

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.

This article is my 2nd oldest. It is 292 words long