HTTP/2 For Faster Web Page Loads

HTTP/2 is in the news lately because it’s just been approved as a standard! This is good news because HTTP/2 offers more efficient and potentially more secure ways for your browser and server to send information back and forth. An ultra-simplified explanation of one part of it, multiplexing, is that it allows multiple browser requests to be processed together. So, a slow-loading image at the top of a web page won’t necessarily hold up the rest of the page.

For web programmers, it’ll no longer be necessary to jump through certain hoops to get the best performance. We can all look forward to the freedom to find newer, better ways to improve performance. Mattias Geniar and Iliyan Peychev each provide some good technical reading for developers (e.g., no need for CSS Sprites and domain sharding).

See HTTP/2 In Action

To see HTTP/2 now in Firefox and Chrome, just look for the “h2-14” protocol identifier.

Here’s how:

On Firefox:

  1. As of Firefox 34, since about August 8, HTTP/2 was enabled by default! Still, maybe you want to confirm, so enter ‘about:config’ in the address bar and search for the option named “network.http.spdy.enabled.http2draft”. It should be set to true.
  2. Enable “Web developer > Network”.
  3. Check the response headers from the server. For sites using HTTP/2, you’ll see a response is “HTTP/2.0”, and also Firefox inserts its own header “X-Firefox-Spdy: h2-14”. For example, load up https://http2.akamai.com/
Using “Web developer->Network” to see HTTP/2 in Firefox
Using “Tools > Web Developer > Network” to see HTTP/2 in Firefox

On Chrome:

  1. Download Chrome beta at https://www.google.com/intl/en/chrome/browser/beta.html
  2. Enable on the protocols column from “Inspect Element”. Mattias Geniar provided excellent instructions here, already: http://ma.ttias.be/view-httpspdyhttp2-protocol-google-chrome/
  3. Also, in Chrome, HTTP/2 isn’t enabled by default, so you’ll need to set a flag. Mattias Geniar helps out again, http://ma.ttias.be/enable-http2-support-chrome/.
  4. Then load up an HTTP/2 site such as https://http2.akamai.com/, and check it out!
Using the Protocol column from “Inspect Element” to see HTTP/2 in Chrome

More Info

For the latest information about which browsers and products have implemented HTTP/2, follow the link for known implementations from here: https://http2.github.io/

http2.github.io/faq/

Here’s a useful chart showing which browsers and applications support HTTP/2, along with the popularity of each: http://caniuse.com/#feat=spdy