Intro

As part of my talk at ng-conf earlier this year I talked about the benefits of using Http2 over Http/1.

Seeing Torgeir’s tweet reminded me that I should write a follow up article about it.

Baseline

Starting with John Papa’s Tour of Heroes repo and decided to use it as a baseline. As you can see from the screenshot it takes about 1.09s to load.

Live Server Version

Http/1.1

Now that we have a baseline we can move on to serving the exact same content up via a node + express server.

var express = require('express');
var app = express();

app.use(express.static('.'));

app.listen(3000, function () {
    console.log('Example app listening on port 3000!');
});

Switching to node + express shaved the time down a little bit to 981ms. This is due mostly to the fact that live server implements hot-reloading, a fantastic feature for development but it does add a little overhead in terms of assets and speed. Node Http/1.1 Version

Http2

Switching to Http2 is actually pretty straight forward. First you have to update to Express 5. Then you can make the following changes to your server javascript.
Credit for this part goes to tunniclm.

var express = require('express');
var fs = require('fs');
var app = express();
var http2 = require('http2');

express.request.__proto__ = http2.IncomingMessage.prototype;
express.response.__proto__ = http2.ServerResponse.prototype;

app.use(express.static('.'));

http2.createServer({
        key: fs.readFileSync('./certs/server.key'),
        cert: fs.readFileSync('./certs/server.crt')
    }, app)
    .listen(3000, (err) => {
    if (err) {
        throw new Error(err);
    }
console.log(`Listening on port 3000!`);
});

Now that we switched over to Http2 we can see our final speed of 821ms Node Http2 Version