Do You Still Need Optimization After Migrating to HTTP/2?

There’s a lot of talk about HTTP/2. Why? Possibly because it promises to help alleviate some of the bottlenecks that come along with the dynamic, rich webpages that people have come to expect.

The consumer market is driven by media consumption, be it high-definition videos, third-party plugins or animations, and these are bandwidth-hungry elements in an adversarial relationship with page load speeds.

Introduced in the spring as the successor to the SPDY standard (and to replace the aging HTTP/1.1), HTTP/2 was released to “uncork” the flow of data to the browser and it currently accounts for about 10% of all web traffic, according to stats from Mozilla’s Daniel Stenberg. All the major browsers either support it or will do so soon.

What Does HTTP/2 Promise?

HTTP/2 has some great things going for it in the speed department.

First, with multiplexing, multiple transactions can be handled over a single TCP connection at the same time, allowing for interleaved replies from the server, irrespective of the order of the requests. With HTTP/1.1, you had a set number of TCP connections subject to large resources holding them up. No need for workarounds such as domain sharding. Front end optimization (FEO) treatments that saved round trips on the same domain are now automatically optimized (zero latency) by the protocol.

Next, header compression reduces the size of the header’s total size and eliminates the need to repeatedly send the full header for every single resource. HTTP/2 uses a new, more efficient header compression mechanism.

Additionally, server push in HTTP/2 eliminates another round trip, which in HTTP/1.1 would occur when a browser would request a page and the server would send the HTML in the response. Then the server would have to wait for the browser to parse the HTML and issue requests for all of the embedded assets before it can start sending everything over.

These, and other innovations, help move the needle for overall web performance.

Still, it doesn’t do everything.

There’s Still Room For Optimization

While HTTP/2 handles the inherent HTTP/1.1 protocol bottlenecks, it doesn’t handle the content optimization side – such as image optimization and other response payload-reduction techniques like preloading and smart caching.  All of these are important FEO techniques that come on top of the new HTTP/2 protocol and can provide significantly more acceleration potential to web applications.

Image compression is key for reducing your web page’s total weight. In fact, according to HTTP Archive, images account for over 63 percent of the average page’s size as of September 1st, 2015.  This can be much more for an image-heavy ecommerce site.

Source: HTTP Archive, accessed 9/15/15

It’s important to compress each image with the most suitable compression algorithm for its makeup.

The top image formats include JPG, GIF, PNG, WebP and others, with some being lossless and others being lossy.

If you use a lossy image compression algorithm, you want to keep the change in observable quality to 2%, which is normally undetectable to the human eye.

From there you want to use the correct compression format and image size to best suit the browser type requesting it. This is challenging, since the CMS or web application needs to have this dynamic capability.

For example, WebP is a great format, but is only supported by Chrome, Opera and the Android Browser, while JPGXR is only supported by Internet Explorer and Microsoft’s new Edge browser (For more image optimization strategies including a rundown of the main image formats, check out designingforperformance.com).  Invest in an automation tool that can perform all of the above can more easily result in an appreciable load time reduction for many image-driven websites.

Best Tools + Best Optimization Practices = Best Outcome

HTTP/2 is an important upgrade which can enable you to realize performance improvements for your web applications. Ensuring you are following image optimization best practices will help you to achieve the best outcome possible: a rich, eye-catching page that loads quickly. Radware Fastview is an example of an automation tool that optimizes images on the fly per browser, ensuring that not only each image is optimized, but it is optimized for each type of browser requesting it.