When I relaunched my site a while back, with an emphasis on performance, I ensured that it was using SPDY. But I have been a little slow to upgrade it to use the full HTTP/2 protocol— primarily because it was low on my list. This weekend, I changed all of that— and fairly quickly got my server running HTTP/2 with very little fuss or mess.

For anybody interested in just looking at the changes to my NGINX server, I have the full commit of all the changes to my Ansible playbooks here.

Prerequisites

The prerequisites list is really short as HTTP/2 is meant to be able to be put right on top of a server already running HTTP 1.1.

• Your site must be HTTPS: Although technically the spec allows for non-TLS implementation, all major browsers require it anyway.
• NGINX should be at least 1.9.5: There are early alpha releases, although it is easiest just to use the version shipped with HTTP/2.

Updating NGINX

I have been using Ansible to keep my server's configuration consistent. It has made my life much easier. To upgrade NGINX, I just altered the version number in my configuration to be 1.10.0, and then re-run the playbooks.

For the configuration of the site, make sure to remove all references to spdy, as it will cause an error with NGINX. Then within your site configuration, use the http2 directive to ensure it is enabled.

server {
  listen [::]:443 ssl http2;
  listen 443 ssl http2;
  server_name iamcarico.com;

  # Make sure to also have your SSL certificates!
  ssl_certificate /etc/nginx/ssl/server.crt;
  ssl_certificate_key /etc/nginx/ssl/server.key;
}

I also like to have a directive to ensure any non-ssl traffic is always redirected to the SSL site. This is not needed for most browsers, as I have added my site to the HSTS Preload List.

server {
  listen [::]:80;
  listen 80;
  server_name iamcarrico.com www.iamcarrico.com;
  return 301 https://iamcarrico.com$request_uri;
}

Testing

Once you have done the above steps and restarted NGINX, you should be good to go. The easiest way to test is to open your site with Chrome, then in another tab go to chrome://net-internals/#http2. You should see your site listed, which shows Chrome has an active HTTP/2 connection open with the site.

That is is, you're done. You now have your site on HTTP/2— and now we can start optimizing for better performance on HTTP/2.