Server push with Cloudflare

A few days ago I posted about server push and SRI and the fact that they’re currently not compatible.  In this post, I gave a brief synopsis of server push, which I’ll repeat…

HTTP/2 is pretty clever, for example allowing one TCP connection to be utilised by multiple concurrent downloads, which means there’s less delay waiting for both TCP connections to be setup and also for files to be downloaded.  Another is that the server can push files down the connection, before the browser asks for them.  So if you fetch a web page, the server can return the web page but also the stylesheet, so that when the browser requests the stylesheet, it can get it from the cache, even though the user has never been there before, because the server has already pushed the file.

I also promised to go into it in a bit more detail, so here goes!

The first thing you need is a server that supports HTTP/2 server push, which my cheapy shared hosting package does not – I really need to invest in better hosting soon.  Anyway, the easy way around this is to wrap Cloudflare around your site.  I’ve written about Cloudflare a number of times before, but they’re a great reverse proxy service, providing security and performance benefits, including caching and DDoS protection.

If you’ve got a WordPress site, this is then quite easy to setup.  Firstly you need to install the official Cloudflare plugin and walk through the steps, logging into your Cloudflare account and providing the global API key.  This is pretty straight forward, but if you’re interested in a walkthrough, it’s covered in my setting up Cloudflare and WordPress course on Skillshare and Udemy.

After installing, activating and setting up the plugin there is an additional step to enable the HTTP/2 server push functionality.  It means editing your wp-config.php file and adding the following setting…

define('CLOUDFLARE_HTTP2_SERVER_PUSH_ACTIVE', true);

You’ll probably need to do this via FTP, making the change in your preferred text editor.  It’s a shame that this additional step is required and it’s not just a setting within the plugin itself, but luckily it’s only one line to copy and paste.

What the plugin will do is check for enqueued scripts and stylesheets and automatically add them to a “Link” header.  The header is used for resource hinting, which tells the browser that it can prefetch certain files.  But Cloudflare (and some other services of a similar nature) will use this header to determine which files should be pushed by the server.

The header looks something like this…

link: </img/whysoslow-hero.jpg>; rel=preload; as=image, </lib/bootstrap.413.min.css>; rel=preload; as=style, </lib/jquery.331.min.js>; rel=preload; as=script, </lib/bootstrap.413.min.js>; rel=preload; as=script

As you can see, this is a list of filenames, with the “rel” set to preload (other options are available, but this is required for server pushing) and the “as” to determine what type of file it is, which helps with the caching.

If you don’t have a WordPress website, you can still achieve the same thing, just by manually setting this header.  There are  at least a copy of ways of doing this.

In PHP you can use the header function to specify the header….

<?php
  header('Link: </img/whysoslow-hero.jpg>; rel=preload; as=image, </lib/bootstrap.413.min.css>; rel=preload; as=style, </lib/jquery.331.min.js>; rel=preload; as=script, </lib/bootstrap.413.min.js>; rel=preload; as=script');
?>

Alternatively if you’re using an Apache server then you can use the Header directive to specify the header…

<IfModule mod_headers.c>
  Header set Link </img/whysoslow-hero.jpg>; rel=preload; as=image, </lib/bootstrap.413.min.css>; rel=preload; as=style, </lib/jquery.331.min.js>; rel=preload; as=script, </lib/bootstrap.413.min.js>; rel=preload; as=script
</IfModule>

Either way, manually setting the header is a good option, as long as you’ve wrapped a service like Cloudflare around your site, which will take this resource hint and use it to push the files.

As I mentioned above, if you’re interested in a walkthrough, this is all covered in my setting up Cloudflare and WordPress course on Skillshare and Udemy.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.