HTTP/2 push support on WordPress Hosting

With Nginx recently adding support for HTTP/2 server push, we’re excited to announce this has now been added to our WordPress Hosting platform.

What is HTTP2

HTTP/2 is a newer protocol designed to speed up access to websites – it is built on work by Google and their SPDY protocol. HTTP/2 is now in common use across many sites including our WordPress Hosting platform which have SSL enabled. Why SSL enabled only? While HTTP/2 in theory doesn’t require SSL, in practice, browsers such as Chrome and Firefox simply won’t try to use HTTP/2 without SSL being enabled.

For sites that have lots of resources, HTTP/2 can deliver a useful shot in the arm to website loading times. Elements such as stylesheets, javascript and images load much quicker by transferring multiple requests in parallel at once. Under the traditional HTTP protocol, items are loaded sequentially and one slow loading resource can block the next from loading. This can impact the overall website loading time for the user.

These performance gains can be enjoyed without any configuration. All you need to do is activate SSL on your WordPress site and HTTP/2 kicks in automatically. Your site will start enjoying these performance improvements immediately.

It’s just another reason to move to SSL. You can find even more reasons to move to SSL on our blog from the past year.

As well as improved resource loading, HTTP/2 provides several unique features for more technical users. HTTP/2 server push is one of them.

What is server push

Server push allows you to push one or more additional resources at the same time as a requested resource. For example, when requesting /index.php and you know you’re going to need style.css you can push the style.css at the same time. In practice this works by sending a HTTP header with your initial request with a link which says ‘hey here is something else you need’. For example we can see here:

% nghttp -ans                                                                        ~

id  responseEnd requestStart  process code size request path
 13    +75.89ms       +221us  75.66ms  200   62 /test.php
  2   +306.03ms *   +25.97ms 280.07ms  200 452K /surprise.png

While we have requested one explicit resource (test.php) it has returned us both test.php and the surprise.png.

How do you push something using HTTP/2

To push something from a WordPress theme you need to be running on a HTTP/2 enabled web server that’s been configured and running SSL. For our WordPress Hosting, this means you need to have enabled an SSL certificate and we take care of the rest. From there its just a case of adding an appropriate header. In your functions.php file something like the following would work:

function your_headers()
	header("Link: </surprise.png>; as=image; rel=preload;");

So what items might you consider pushing? Resources like CSS or critical javascript files might be items you want to push. As this is content being forced upon the browser though, it’s important to weigh up if the resource is something the browser critically needs to render the page. Moreover, server push is not always the most efficient way to send resources; a good general guide to HTTP/2 server push can be found on Smashing Magazine.

When used correctly, HTTP/2 server push can provide another performance boost on our WordPress Hosting and we are really excited to see how people start to use it. If you’re using server push get in touch with us and let us know your experiences!