What is H2 (http2)
H2 (http2) is relatively new. Accordingly to the wikipedia page, his first specification is dated to 2015.
…to publish as Proposed Standard on February 17, 2015. The HTTP/2 specification was published as RFC 7540 in May 2015.
H2 is a protocol, the same way as http 1.1. It has obviously some pretty nice advantages like:
- Single Connection. Only one connection to the server is used to load a website, and that connection remains open as long as the website is open. This reduces the number of round trips needed to set up multiple TCP connections
- Multiplexing. Multiple requests are allowed at the same time, on the same connection. Previously, with HTTP/1.1, each transfer would have to wait for other transfers to complete.
- Server Push. Additional resources can be sent to a client for future use.
- Prioritization. Requests are assigned dependency levels that the server can use to deliver higher priority resources faster.
- Binary. Makes HTTP/2 easier for a server to parse, more compact and less error-prone. No additional time is wasted translating information from text to binary, which is the computer’s native language.
- Header Compression. HTTP/2 uses HPACK compressions, which reduces overhead. Many headers were sent with the same values in every request in HTTP/1.1.
What are the advantages for a web app/site
Basically, H2 is more performant than the http 1.1. But why it is so good for web development?
The problem with HTTP 1.1
To understand the problem, it’s important to know that the browsers can handle multiple connections at once but this amount is limited. Here’s a small non-exhaustive table of that:
On every connection, with http 1.1, you can send only 1 request at a time. This mean that when you request for example 1 css file, 1 js file and 1 image, it will open 3 connections and each of these connections have to wait the end of the current request to handle a new one.
I let you bring this principle at a full size website that will send a lot of requests (sometimes even hundred of them) to display 1 page. HTTP 1.1 start to become a huge bottleneck.
The H2 solution
The fact that H2 work on a single connection and support the multiplexing is a big game changer for browsers performances.
If we take our previous example with the 1 css file, 1 js file and 1 image, over H2, the browser will open only 1 connection and transfert every files at the same time through it. This mean smaller response time for every loaded assets, resulting in quicker page load and happier visitors as well.
You can find here a nice comparaison between HTTP 1.1 and H2 to understand visually the benefits.
Additional benefits as a web developer
As a web developer, we are familiarized with the concept of bundling our code into 1 big file to ship it to our clients. With H2, all of these server side optimisation can be droped and we can send as many separated files as we want without having to big performance issues.
This can be very useful in some situations like for example in a wordpress where it can be painful to bundle every pieces shiped by every installed plugins.
Enable H2 on apache (ubuntu)
To enable H2 on an apache server, it’s fairly straightforward. Here’s the steps
Enable the module
Add the H2 protocol in your virtual host
<VirtualHost *:443> Protocols h2 http/1.1 ServerAdmin firstname.lastname@example.org ServerName your-awesome-site.com ... </VirtualHost>
For more informations about installing H2 on your apache, check this page
Here’s some helpful links:
Also published on Medium.