Olivier Bossel
January 2018
M T W T F S S
     
1234567
891011121314
15161718192021
22232425262728
293031  

Categories


Olivier Bossel

HTTP2 for web developers

What is HTTP2, what are the advantages and how to enable it

Olivier BosselOlivier Bossel

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.[6][7] The HTTP/2 specification was published as RFC 7540 in May 2015.[8]

H2 is a protocol, the same way as http 1.1. It has obviously some pretty nice advantages like:

  1. 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
  2. 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.
  3. Server Push. Additional resources can be sent to a client for future use.
  4. Prioritization. Requests are assigned dependency levels that the server can use to deliver higher priority resources faster.
  5. 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.
  6. 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:

Browser Per hostname Max
Chrome 6 10
Firefox 6 17
IE 9 6 35
IE 10 8 17
IE 11 13 17
Safari 6 17

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.

Demo

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

a2enmod http2

Add the H2 protocol in your virtual host

<VirtualHost *:443>
  Protocols h2 http/1.1
  ServerAdmin you@your-awesome-site.com
  ServerName your-awesome-site.com
  ...
</VirtualHost>

Restart apache

apachectl restart

For more informations about installing H2 on your apache, check this page

Links

Here’s some helpful links:


Also published on Medium.

Passionate interactive web developer from Switzerland. To be always in research of new technologies, improving workflows and contributing to the open source community are my primary motivations. The web community is moving so fast and being up to date is a daily job. THIS is where my passion for this domain come from. I'm an eternal dissatisfied and this is what makes me push each project at the limit and never give up on challenges. The web is an incredible way to communicate and to make the life simpler/better when it's correctly used and built. Be part of it's construction is a chance.

Comments 0
There are currently no comments.