Google, Microsoft, Mozilla and Apple are desperate to encourage all brands to ensure their website is compatible with the relatively new HTTP/2 protocol which is now supported by each of their web browsers – Chrome, Edge, Firefox and Safari.
HTTP/2 is the new version of the HTTP protocol that underpins the web and revolutionises how Internet data can be transferred between a website server and a user’s web browser – it can potentially double the speed of a website, resulting in of course increased user satisfaction that drives increased customer loyalty, leads and sales.
However, the major challenge is that according to W3Techs.com only 7.3% of all websites currently use HTTP/2 as of writing.
Why? Outside of the tech, Internet security and web hosting industry there is a real lack of awareness on the protocol. In it’s simplest incarnation, ‘switching on’ http/2 is relatively straightforward but the larger the website you work with, the harder the challenge to build a business case – whether it be bureaucracy or technology requirements.
Let’s take a look at the case for implementing HTTP/2. First, what’s the difference from a technical point of view. After that, we’ll go through how you can migrate to HTTP/2.
The Differences Between HTTP/1.1 and HTTP/2
Whilst pretty much everything else on the web has changed dramatically over the past two decades, HTTP has remained relatively the same.
Developers have been working around HTTP’s limitations but its performance is falling short of bandwidth utilisation. As web design and maintenance have become more complex and both clients and servers consume more web resources, it’s time for HTTP/2 to take over.
- HTTP/2 allows multiple requests to be sent which means it can work a lot faster, speeding up your site. Loading time is a big factor for sites, with 40% of potential customers abandoning a purchase if it takes longer than three seconds to load according to Thawte.
- HTTP/2 is multiplexed, which means that all parts of your site (whether it’s HTML, CSS or JavaScript) won’t block each other, and load in parallel.
- HTTP/2 is also binary, which makes it more efficient, and headers are compressed which reduces the amount of data on the network.
You can test if your website currently supports HTTP/2 using this tool developed by KeyCDN.
Which Browsers Support HTTP/2?
Currently, all major desktop browsers support the HTTP/2 protocol or to be specific, 70.15% of all the browsers used on the web are capable of loading sites in HTTP/2.
Regardless, HTTP/2 and HTTP/1.X are backwards compatible so don’t worry, your customers will continue to enjoy a seamless web experience.
CanIUse.com has a helpful breakdown of compatibility across notable web browsers.
Why You Need To Implement HTTP2
1. Speed Benefits
Loading speed, as we have seen, is an integral part of your website’s success. If losing potential customers is a factor for your site, you should consider switching to HTTP/2. According to Cloudflare.com when they implemented HTTP/2 they seen customers average page load time nearly halved – from 9.07 seconds for HTTP/1.X falling to 4.27 seconds for HTTP/2. That’s a significant improvement in a key area of website efficiency.
2. Increased User Satisfaction
According to a study by QuBit.com, 8% of users abandon a purchase if they experience slow loading pages – a challenge that can be partially solved by adopting HTTP/2. As a result, retailers across the global are currently losing out on potentially £1.73bn a year due to poor user satisfaction.
3. Server Push
Servers can proactively push additional content to visitors, which means you can avoid extra loading. This works by the server sending multiple pieces of information at any one time, pushing them all at once when required. Your webpages can easily stream real-time data and information to your users, keeping them engaged for longer and on-site.
4. Builds a Further Case for SSL Implementation
Whilst it’s not technically necessary to have a SSL Certificate to utilise HTTP/2, all of the major browsers as of writing will only display your site in the protocol if you have one in place.
SSL Certificates keep your data secure, increase user trust and of course also provide SEO benefits.
5. SEO Benefits
At the moment, Google doesn’t reward websites that utilise HTTP/2 but it does play a role in your organic visibility – due to the fact that you will benefit from increased website speed and user satisfaction.
6. First Mover Advantage
With only 7.1% of websites currently adopting HTTP/2 there is a clear first mover advantage to get ahead of the competition and for now, benefit from the fastest website within your industry or marketplace.
Great, So How Do I Implement & Migrate to HTTP/2?
1) Do your Homework. Check if your Users will actually benefit
Firstly, it’s worth looking at your Analytics data to understand if the majority of your current visitors use web browsers that support actually HTTP/2.
The answer is likely yes, but browser usage can change dramatically in cases where you are appealing to a specific demographic and location.
In Google Analytics, you can check this by doing as follows:
- Open up Google Analytics and select your Website Profile
- Go to the Audience > Technology > Browser & OS report.
- By default your primary selected dimension will be set to Browsers.
- Change the secondary dimension to Users > Browser Version.
As a result you will see a table of all the browsers and their versions, which your visitors use to browser your website.
2) Check Your Server Software
From here, you can move on to actually implementing HTTP/2. Check with your hosting company or web team to find out what operating system your web servers currently use – likely Apache or NGINX and if your current version of it supports HTTP/2 out of the box.
You can also use the BuiltWith Chrome Extension to find out what operating system powers your web server.
Apache began supporting HTTP/2 with version 2.4.17 and NGINX 1.9.5. However, make sure your server will continue to support all users of HTTP/1.X as a fall-back option.
The full list of software supporting HTTP/2 can be found on the official GitHub documentation here.
3) Is Your Website Secure?
There is also little value in switching to HTTP/2 if you don’t have an SSL Certificate in place currently on your server. Most browsers will simply ignore the HTTP/2 version of your website if it’s not secured.
LetsEncrypt.org is a free, automated SSL Certificate service backed by major sponsors that can help get the job done. Alternatively, most major hosting providers do provide SSL Certificates.
4) Optimising Your Javascript & CSS for HTTP/2
As web development has evolved, a number of site speed techniques developed to make websites load faster under the HTTP/1 protocol. Once you’ve switched to HTTP/2, a number of these are rendered mute and it actually makes logical sense to undo them.
For example, a common recommendation under HTTP/1 was to reduce the number of CSS and Javascript files referenced within your source code and combine them to ‘master’ files.
This made sense on the HTTP/1 protocol, as a webpages progressively load from start to finish, so it’s faster to download one big file with all the CSS or JavaScript, than having separate files for each part of the website.
The disadvantage of this practice is that with every little change to your CSS and JavaScript, your website has to update the whole big file and users have to download a lot of code of which they will need only a fraction.
With HTTP/2’s speed benefits, it’s best practice to only load the JS/CSS code a user actually requires when visiting a page. Common sense, right?
However, this is likely the most complex part of migrating to HTTP/2 and may be best left to tackle when you re-design your site. It’s optional, but necessary to take full advantage of the protocol.
To achieve this, you will need to audit every URL on your site to identify what specific JS and CSS is used each page and develop an automated system that conditionally load the relevant code on each URL as a user requires it.
5) Goodbye Image Sprites
In similar vein, Image Sprites are another popular technique designed to help your site’s speed performance on HTTP/1.1.
Before HTTP/2 and SPDY, every request for your page resources was expensive time-wise; every new image on your website meant extra milliseconds of loading time. To save time and network resources, web developers commonly take several images from a page and combine them into one “super image”. Once downloaded, browser would then cut out relevant picture from the bigger image sprite.
With SPDY or HTTP/2 this technique is unnecessary, as these protocols are built to carry out many requests in parallel without blocking each other. Downloading one big image instead of many smaller images has no benefits.
Moreover, in case you want to update one particular image on your website, it means that browser has to download whole new big image sprite instead of just replacing particular image.
Therefore, the action here is to when appropriate move away from using Image Sprites and only load images in the browser as your user needs them.
6) Using Domain Sharding? Switch it off for HTTP/2
Domain Sharding is a technique where you try to parallelise downloading as many resources at the same time as possible through splitting your content on multiple domains.
With HTTP/2, this tactic becomes redundant and possibly harmful. The best solution is to implement smart domain sharding. This keeps benefits of domain sharding for those users who will visit your website on HTTP/1.1 and will ignore it for users on HTTP/2.
Ready to Go!
That’s it. Hopefully you now have the case to make it happen and understand how to migrate to HTTP/2. It’s also worth referring to the HTTP/2 official GitHub for more technical details during your implementation.
If you make the switch, you’ll become an early pioneer in HTTP/2 alongside Facebook, Twitter, Yahoo! and unsurprisingly Google who are all currently using the protocol.
