HTTP/2 is awesome. When we enabled HTTP/2 on the settled.co.uk website, we noticed a 10% improvement in the page load times across the site. We didn’t change any code, or even make any web performance tweaks - we made the switch and noticed the results immediately.
Traditionally, HTTP/1.1 requests have a lot of overhead associated with them. If too many requests are made, it can negatively affect the performance of your web page due to the fact that HTTP/1.1 uses multiple TCP connections to issue parallel requests. Fortunately, HTTP/2 has been redeveloped with this in mind, allowing the browser to multiplex requests. This means that instead of limiting the number of parallel connections, multiple requests can be sent at one time.
Multiplexing allows multiple request and response messages to be in flight at the same time which means faster load times with no change to your front end code. A lot of the web performance hacks that we currently use are no longer needed!
If you’ve not had the chance to experiment with HTTP/2, getting started is easier than you think. In this article I am going to show you how you can create a simple website that uses HTTP/2 and Server Push.
Show me the code!
Let’s have a look at this basic web page example below.
We are also going to be using the awesome node-spdy module that provides you with support for HTTP/2 and Express. Finally, I’ve used the mz library, in order to get the most out of JS Promises and ES6.
Okay, it’s time to start coding! Start off by firing up your terminal and installing all of these packages with the following command in your terminal. I’ve chained them together for ease of use:
$ npm install express spdy mz --save
Next, let’s setup a file that will be the entrypoint for our app. I’ve added the following code and named the file “app.js”.
Let’s break the above code above down a little. The code starts off by referencing the express framework. Next, it creates a route that will respond with the home.html file and serves it as an HTTP response.
Around line 19, you’ll notice that I am creating a new server using the node-spdy module. HTTP/2 requires you to serve resources over HTTPS in order to improve security. To test this code locally, I created my own self signed certificates using OpenSSL - you can do this using a one line command in your terminal.
openssl req -x509 -sha256 -nodes -days 365 -newkey rsa:2048 -keyout server.key -out server.crt
On a production environment, you would use the correct SSL certificates, but for now this will work fine for testing locally. Next, fire up your browser and head over to http://localhost:8000/home. If you open up your developer tools, you should now be serving the website over HTTP/2!
Push it. Push it real good
Things are looking good so far. We’ve created an HTTP/2 server that is serving resources, but we aren’t “pushing” any resources to the user yet.
In order to start using Server Push, we need to update the code slightly.
The console will show the results of the scripts executing. That’s it - using the code above, we are now serving files over HTTP/2 using Server Push!
Using HTTP/2 and Server Push is a great way to provide your users with faster web pages. The great thing about the node-spdy module is that it will fallback to regular HTTPS for browsers that don’t support HTTP/2.
If you’d like to explore the code used in this example, it is all available on my Github repo. Regardless of whether you use a PC or a Mac this example will have you serving faster web pages to your users in no time!