What is HTTP/2 and how does it affect the web?
The second version of the Hypertext Transfer Protocol HTTP protocol is named HTTP/2.0 and was approved february last year. The first standardized protocol of data communication on the world wide web was published in 1997 so after almost 20 years we have an updated version. Most major browsers already added HTTP2 by the end of last year and it did not really changed a lot from a users perspective. That is probably the main reason why most marketers haven’t heard or read about it yet. Involved in speeding up pagespeed?
The differences with the old HTTP/1.1 protocol
The main purpose of developing a new protocol is the ever increasing amount of resources and files a single webpage requires nowadays. Loading all those assets efficiently has been a challenging task since the original protocol only allowed one outstanding request per TCP connections. Because of this flaw, most browsers allow 4 to 8 multiple TCP connections to create the possibility of parallel connections and downloads. Even allowing multiple connections, some websites are still loading tens or even hundreds of files within the first pageview. Because of this limit, we used to make those beautiful waterfall graphs of the process of loading a website:
Because of this limit, web developers have been using CSS Sprites, moving all the CSS or JS into just 1 file, divide resources across multiple domains (domain sharding) and many other less known workarounds to minimize the number of connections required to load the website as fast as possible. All those techniques are not needed anymore once your website users all use a browser that support HTTP/2 multiplexing. This new protocol is all about multiplexing so less hassle when building resource rich webpages in the future. No more limitations for the number of files that can be downloaded simultaneously or can block rendering.
The other major improvement is the size of HTTP headers, little packages of information that need to be exchanged between server and browser. Instead of sending unique headers per single request / file, HTTP2 only requires one header per connection. For an average page of 85 resources, this saves quite a lot of data exchange in between the downloading of actual files.
How about the order in which files are downloaded? Currently, the most important files are put above less important files. Best practice is to load non-functional Javascript just before the HTML closing tag. Prioritization is a problem that comes with the luxury of multiplexing and reducing headers: instead of using the order based on the HTML order, browsers need to be able to communicate which resources need to be downloaded first. We do want to be sure that CSS is loaded before other objects for example. The protocol itself deals with prioritization so web developers do not have to worry about making any additional changes. Browsers will take care of it, following basically this scheme:
- HTML (highest)
- CSS (high)
- Javascripts (JS) (middle)
- images (low)
Official documentation can be found at HTTP/2 Frequently Asked Questions
How to make use of HTTP2
More and more hosting companies are updating their software to support the use of HTTP2 already. The one and only must have requirement is to have encrypted connections enabled (meaning having your website available via HTTPs) which is recommended anyway. Google has been telling us that HTTPS will be a ranking signal and looking to the fact that they are pushing it clearly (Indexing HTTPS pages by default) I recommend implementing an SSL certificate as soon as possible while asking your hosting to enable HTTP/2 support. CDN services like CDN77, CloudFlare and KeyCDN are already supporting HTTP/2, often in combination with a SSL integration so you can combine this and upgrade your website in just a few steps. Since headers are smaller, it actually makes SSL with the required TLS handshakes, faster via multiplexing and compressing header data.
Tools for testing and using HTTP/2
There are not so many tools yet but for Firefox there is a little add-on HTTP/2 and SPDY indicator and a similar one for Chrome (link). A great webbased tool is http://bit.ly/1OdAOii to verify HTTP2 support:
If you like to use the command line, have a look at is-http made by Stefan Judis. Just one option, to include results that consider the usage of SPDY protocol as HTTP2 supporting.
If you want a bit more indepth understanding of the performance of your website and see which parts are being loaded by using the HTTP2 protocol, use the Chrome Developer View. Go to the developer console, and go to the Network tab. Once you have refreshed the page, data will come in. The next step is to add an additional column which is not visible by default: use right-click and add the protocol column:
After adding this column you will see a few different values, the old http/1.1, h2 (equals HTTP/2) and additional protocols like spdy/3.1. For my personal blog, I haven’t setup all the different servers correctly, resulting in static image files being loaded via the latest standard HTTP2 but other files are not available through the best protocol yet.
Since not all browsers (monitor the Protocol support table at Wikipedia) is not something that is top priority yet, but support is growing fast. If you want to read about specific HTTP/2 perfomance optimisations, have a look at 7 Tips for Faster HTTP/2 Performance, an extensive piece on the pro’s and con’s of making the best out of HTTP/2 options. Have fun making your website as fast loading as possible!
Post from Jan-Willem Bobbink
Dr. IT Services - Data recovery,it support,computer & laptop repair in Kingston upon Thames
http://bit.ly/1RhRaKp
