Performance UX Site Speed 2

Getting up to speed with HTTP/2

At iProspect we are always on the lookout for ways to achieve the biggest wins for our clients with the least amount of effort required from them. Very recently, just by switching one of our client's websites from HTTP 1.1 to 2.0 iProspect decreased the load time by almost +10%, but before going into detail, first let's look at what HTTP is.

What is HTTP?

HTTP is short for Hyper Text Transfer Protocol and is the backbone behind the World Wide Web. It is the universal protocol used for data requests sent across the internet. This includes the blog you are reading now; the request was sent from your browser and delivered to you by the server.

One of the biggest limitations of HTTP was that requests were handled in a sequence – only once one request is satisfied (e.g. an image is sent to the browser) then the next request can be executed. This created bottlenecks which drove organisations to circumvent the issue by using CSS Sprites and partially, content delivery networks (CDNs). HTTP/2, aside from other improvements, resolved this issue and multiple assets can now be delivered simultaneously.

One advantages of HTTP/2 is that it is easy and fast to implement. A couple lines of code deployed by your server administrator and you are on HTTP v2. However, caution is advised when implementing HTTP/2. Before HTTP/2, techniques such as domain sharding and image sprites were used to get around the limited connections of browsers. Leaving these optimisation techniques live on top of HTTP/2 could be detrimental to your webpage performance as it’s no longer needed. You can learn more about HTTP/2 in one of our previous posts.

Speeding up the process

So how have we utilised HTTP/2 to help one of our clients? As a well-known FMCG brand, speed performance is critical to the user journey and future campaigns for best experience possible, especially on interactive pages. We started by benchmarking their current setup by assessing priority pages, established KPIs and reviewed our toolkit availability to get the best measurements possible. In this case, we chose WebPageTest for its integration and in-depth runtime capabilities to match our client’s audience and their devices more closely.

HTTP2 benchmark metrics

A visual breakdown of HTTP/2 vs. HTTP/1.1

The chart above shows that HTTP/2 has a positive impact on loading by streaming assets to the browser, this resulted in load time improvements of +8.32% (on load) and +6.32% once fully loaded. Additionally, this has improved the organisations’ Speed Index score – a combined user experience (UX) and load time metric that is part of Google’s Lighthouse toolset.

However, there are still further improvements to be made, for example, Document Object Model (DOM) content loaded and visual rendering metrics did not improve, this shows that we have other issues to improve e.g. image size and JavaScript (JS) optimisation. There could also be JS running after the initial load is complete. Therefore, HTTP/2 should not be considered a silver bullet and your business will need to ensure that assets are correctly optimised for your webpage.

In conclusion, HTTP/2 is often thought of as a long time-to-market project depending on your setup. For a little time invested, you can quickly close the gap with your competitors and start to focus on other speed optimisations.