What is HTTP/2 and How Does it Compare to HTTP/1.1?

http1.1 vs http2HTTP/2 is one of the largest changes to how the web works since HTTP v1.1 was released in June 1999.  The new HTTP/2 protocol will make web pages load significantly faster, both on the desktop and mobile.

The internet has changed dramatically since the HTTP 1.1 was launched back in 1999.  Websites have become more dynamic, relying on frameworks (such as WordPress), Script Libraries (such as Javascript) and a multitude of customized themes, images and other resources that need to be loaded for each web page.  While developers have gotten creative in dealing with these limitations (Minification \ Combining scripts & CSS, Image Sprites, Lazy Loading, etc.), it wasn’t enough. The new Protocol has been designed to eliminate the need for many of these techniques and significantly speed up the response time of your website.

What is HTTP/2?

HTTP/2 is the next version of HTTP and is based on Google’s SPDY Protocol, which was implemented to speed up the loading of web pages.  It is a new standard and is already starting to take over from the current protocol HTTP1.1 still used by the majority of websites.

The primary benefits include the following:

Multiplexing and concurrency

As we have indicated, modern websites require the web browser to make a significant number of requests to render a web page.  HTTP/1.0 allowed just one request to be made at a time, with HTTP/1.1 allowing multiple requests.

The exact number of simultaneous requests with HTTP/1.1 is dependant on the browser:

Browser Max Parallel Connections Per Host
IE 9 6
IE 10 8
Firefox 4+ 6
Opera 11+ 6
Chrome 4+ 6
Safari 4

With modern websites often requiring over 100 connections, it is not difficult to see that the responsiveness of the website can suffer.  This is further exacerbated by a problem called “head-of-line blocking” that means before a subsequent request can be made the results of the first request must have been received.

With the new Protocol, the user can send multiple requests, but the browser can receive them in any order.  By eliminating head-of-line blocking, the website can be loaded much more quickly.

The diagram below shows the differences between HTTP/1.1 and HTTP/2 in the way assets are loaded:

http/1.1 vs http/2

Akamai has developed a simple demonstration allowing you to see how this works by loading two images.  Each image is split into 379 small tiles, causing 379 separate connections to be made to the server.  While a website is unlikely to have anywhere near this number of requests, it does amplify just how much faster HTTP/2 is.  We have taken a very short video of the demonstration below:

Stream dependencies

When websites load the assets (HTML, CSS, javascript, images) that make up the web page the order in which they are loaded is important.  You can’t have CSS (the styling) load at the end; otherwise, the web page may look deformed for the first few seconds.  Secondly, you can’t have assets that require the jquery library (javascript) load before jquery as this can even break the functionality of some of the features on the website.

With HTTP/1.1, this was easy, as head-of-line blocking made it simple to load various assets in the correct order.  With HTTP/2, however, the response to the browser request may be received back in any order.  The new protocol solves this by allowing the browser to communicate with the server and indicate the priorities for the respective objects \ files.  No changes will be required by web \ app developers as modern web browsers will take care of prioritization and handling of data streams.

Header compression

HTTP/2 has made significant improvements to the HTTP headers.  Headers are used to inform the servers what information is needed, and the format in which that information can be delivered.  One such header relates to compression, telling the servers that it supports gzip. Another example relates to cookies that can be quite large in some cases.

With HTTP/1.1 headers have to be provided for every asset requested, which if you have a page with over 100 requests can be time-consuming, and use bandwidth.  The new Protocol can send all the headers in a single connection, also utilizing compression.  Instead of 100 round trips required to load the headers for all the objects, it can now be done in a single trip.

Due to a major attack being documented targeting the use of Stream Compression, the HTTP/2 developers had to abandon the use of GZIP.  Instead, they created a new, header-specific compression scheme called, “HPACK.”  Since HTTP headers rarely change between messages, the new scheme provides a balance between safety and compression efficiency.

Server push

The server can send resources the client has not yet requested.  Applications designed to take advantage of the new server push capabilities in HTTP/2 must be carefully designed to balance performance and utility.

This will be a substantial boost for people on high latency connections as it effectively could remove multiple round trips to the server.

Why does HTTP/2 require a website to use Encryption (SSL)?

Despite a strong push to make HTTPS mandatory for the new Protocol, it did not get consensus.  As a result “technically” HTTP/2 does not need HTTPS to function.

That being said, two of the leading web browsers (Firefox and Chrome) said that they would only implement HTTP/2 over TLS (SSL).  This means you need an SSL for your website to take advantage of the new Protocol.

What Browsers Support HTTP/2?

The latest releases of Firefox, Microsoft Edge, Internet Explorer 11, and Chrome already support HTTP/2.   Cloudflare measured the traffic over different browsers running through its system over a 48 hour period:

HTTP/2 capable browser Global Market Share
IE 11 on Windows 10 0.14%
Edge 12, and 13 0.35%
Firefox 36 – 45 5.09%
Chrome 41 – 49 15.06%
Safari 9 0.91%
Opera 28 – 34 0.57%
Safari for iOS 9.1 1.07%
Opera 30 for Android 0.01%
Chrome 46 for Android 3.59%
Firefox 41 for Android 0.01%
Total 26.79%

Availability of HTTP/2

HTTP/2 is currently available at a relatively small number of web hosting providers, but will see adoption quickly ramp up in early 2016.  SiteGround, a very early adopter of new technologies implemented the new protocol some weeks ago.

Most hosting providers that use the most popular control panel cPanel are waiting on the new Protocol to be rolled out with EasyApache. Latest reports suggest this will happen before the year end:

This is pretty much it. When EA3 gets 2.4.18 (hopefully this week or next), http2 support will automatically be there. We don’t plan to make any changes to EA3 to make it a one-click install, but it’s very simple to pass the compile flag via a rawopt and install nghttp2.

As for Content Delivery Networks; Sucuri (who we use) and Cloudflare have implemented the new protocol (among others).  One of the most popular CDN companies, MaxCDN, has not yet implemented it but we expect it to do so soon.

Further Reading

If you wish to know more about HTTP/2 we recommend the Github FAQ.

We will be happy to see your thoughts

Leave a reply