Enable HTTP/2 with nginx on Debian Jessie / Stretch and Ubuntu 16
Enabling HTTP/2 is really easy and doing so will give you a number of free wins, such as faster page loads and better SEO rankings.
If you’re reading this article, then you probably already know you want to use HTTP/2, but in case you’re wondering, here’s 2 big wins of using HTTP/2 which require doing nothing other than enabling it:
Pages load way faster because a single connection can now support many requests in parallel, instead of incrementally loading them in a waterfall-style fashion.
Google may rank HTTP/2 sites higher because your pages will load faster and they will have a smaller footprint since HTTP header compression got a huge upgrade.
If you want to read a deep dive on how it all works, here’s a great introduction on HTTP/2.
# Enabling HTTP/2 with nginx
HTTP/2 support in the open source version of nginx requires having version 1.9.5 or higher.
- If you’re running Ubuntu 16.04+ you’re all good because the nginx version is 1.10.3.
- If you’re running Debian Stretch (9) you’re all good because the nginx version is 1.10.3.
- If you’re running Debian Jessie (8) you’ll have nginx version 1.6.2 but you can get 1.10.3 by using the backports version.
(Only applies to Debian Jessie) Installing nginx with Jessie backports:
# Login as root.
sudo su
# Add the backports list to your list of apt sources.
echo "deb http://ftp.debian.org/debian jessie-backports main" > /etc/apt/sources.list.d/nginx-backport.list
# Grab the new package list.
apt-get update
# Install nginx from the backports list (nginx-full is the standard nginx install).
apt-get -t jessie-backports install nginx-full
If you already have nginx installed, this will update your existing nginx
installation without overriding your configs as long as you interactively
answer “N” when it asks to override your nginx.conf and default.conf files.
Updating Your nginx Config to Support HTTP/2
This is the easy part. I’m going to assume you already have HTTPS set up because that’s ridiculously important and also essential when it comes to leveraging the benefits of HTTP/2 because most browsers will only support HTTP/2 over TLS (HTTPS).
If you don’t have HTTPS set up then I recommend using Let’s Encrypt. If you want an end to end video guide on how to host any site or web app over HTTPS using nginx and Let’s Encrypt I do have a course on that, but if you don’t feel like paying for that you can spend your own time figuring it out instead.
Making the changes to your nginx config(s):
You’ll want to find all of your listen directives that are listening on port
443 (HTTPS) and add http2 to them. In the end, it should look something like
this: listen 443 ssl http2;.
Once you’ve made all of your changes, restart nginx with
sudo systemctl restart nginx.
Yep, it was that easy, congrats, you’re running HTTP/2!
Verify HTTP/2 is Working:
You can verify HTTP/2 is enabled by opening up your dev tools in Chrome (or comparable browser), going to the network tab, right click any column and then enable “Protocol”.
You should see a bunch of “h2” protocols from requests originating from your domain.
# Demo Page View Speeds with and without HTTP/2
This site is being served over HTTP/2 but since it doesn’t have a ton of assets you might not really notice too much of a difference. I ended up with a 15% improvement on my speed index score after enabling HTTP/2 with no additional tweaks.
Here’s 2 websites that demo HTTP/1 vs HTTP/2 with a lot of assets:
Are you running HTTP/2? If so, how much faster is your site? Let me know below.