Skip to main content
WordPress made easy with the drag & drop Total WordPress Theme - now just $39!Learn More

Introduction to HTTP/2 for WordPress

May 22, 2018
Introduction to HTTP/2 for WordPress

HTTP/2 is one of the most significant milestones to be introduced in the modern web. This article highlights the current state of HTTP and introduces the core benefits (and some non-technical concepts) of HTTP/2. We’ll also learn how to implement HTTP/2 for WordPress in 2018.

A Brief History of HTTP

HTTP stands for Hypertext Transfer Protocol, which was created by Tim Berners Lee in the year 1991. Tim’s the man we have to thank for the World Wide Web. HTTP is one of the most ubiquitous and widely adopted application protocols on the Internet. But it’s not the only one.

Hold on for a second. I’ve highlighted the phrase application protocols. Why is that? You see, the Internet is actually a composition of four hierarchical layers of protocols. Each layer consists of a number of protocols and is responsible for a core function.

Geeking out for a bit, there are four layers in the Internet Protocol (IP) suite:

  1. Application layer
  2. Transport Layer
  3. Internet Layer
  4. Link Layer
Internet Application Layer protocols

Internet Protocol Layers. Source: Wikipedia

Without going too much into details, the last three layers (i.e. Transport, Internet, and Link layers) are responsible for establishing a reliable connection for data to be exchanged.

The topmost layer is called the Application Layer, which serves all the applications in the Internet.

  • Viewing web pages is an application in the Internet – which is made possible by the HTTP protocol.
  • Email is another application in the Internet – made possible by the POP or IMAP protocol.

There are multiple protocols in the application layer in the Internet that makes things like YouTube Live Videos and Clash of Clans possible.

The Birth of HTTP/2

HTTP/2 for WordPress Beginnings

HTTP is the common language between clients and servers, enabling the modern web. From its simple beginnings as a single keyword and document path, it has become the protocol of choice not just for browsers, but for virtually every Internet-connected software and hardware application.

This begs the question – how often do we update this crucial piece of software? Well, as it turns out – not very often

In fact, the last time HTTP protocol got a update, was in the year 1997 – ten years before the first iPhone was launched! That was HTTP version 1.1 and 20 years later, it is still the most widely used HTTP version today!

Everything that happens in the Internet – from streaming cat videos, to live video chats delivered from the International Space Station and trillions of online transactions – happens over the technology that’s hasn’t had an update in over two decades. Over the years, we’ve made tremendous progress with creating new applications for the Internet. However, we did all of this by creating workarounds from the limitations of HTTP/1.1

I don’t mean to say that HTTP/1.1 is all bad. But it can sure use an update. And that’s why in 2015 Internet Engineering Task Force doubled-down on creating a better protocol for HTTP.

The result was a new protocol that seamlessly worked with all the stuff that was running on HTTP/1.1, while making some serious improvements in the underlying technology. This new protocol was called HTTP/2.

What Changed in HTTP/2?

A lot of things actually. But we’re not going to cover all of them here. Pretty sure you’ll be bored by then and even more sure that I won’t be able to explain the stuff in a non-geeky way. But when it comes to HTTP/2 for WordPress, here are a few key points.

Multiplexing

In HTTP/1.1, the server and the client needed to establish individual connections to request for resources. Let me explain with this beautiful illustration from UpWork:

HTTP/2 for WordPress: Multiplexing

Illustration of multiplexing by UpWork

A website is made up of HTML, CSS, JavaScript, images and other files. These files are collectively called resources. In this example, there’s a website made up of three resources – a JavaScript file, a CSS file and an image file.

We see that in HTTP/1.1, the browser requires three TCP connections with the server to request these resources. Why? Because in HTTP/1.1, each connection can only request for one request. A larger number of connections usually result in what can be best described as resource ‘traffic jams’ – which ultimately lead to a slow website experience.

HTTP/2 supports Multiplexing

Multiplexing is a technology that allows servers to send multiple files over a single connection. As a result, when the same website uses HTTP/2, all the three resources can be sent over a single connection. Consequently, load times and consumption of network resources would significantly reduce. In simpler terms, you’d be able to do more with less. So HTTP/2 for WordPress is a great way to (potentially) speed up your WordPress site.

Domain Sharding & Other Improvements

Remember how newer applications require ‘workarounds’ to overcome certain limitations of HTTP/1.1? Domain sharding is one such workaround. Let’s look at why domain sharding is required.

Typically, HTTP/1.1 limits the maximum number of open connections between a server (domain) and client. Most websites have multiple resources to be loaded in parallel. In an effort to make sites load faster, websites began to serve their resources from multiple sub-domains. This is called domain sharding.

HTTP/2 for WordPress: Domain Sharding

Illustration of domain sharding by UpWork

Now with HTTP/2, there’s no need of domain sharing. Not because HTTP/2 does not put a limit of the maximum number of open connections. But because HTTP/2 supports multiplexing. All the resources can be sent directly in one connection!

Thanks to multiplexing in HTTP/2, a lot of these ‘workarounds’ are no longer required. These include CSS sprites, inline images in CSS using data URIs, and concatenation of CSS and JavaScript. To put it in Smashing Magazine’s words:

HTTP requests are cheap in the world of HTTP/2. Organizing your assets during development according to the pages on which they will be used will be far better. You can then serve up only the code that the visitor needs. Downloading a lot of tiny style sheets won’t matter. You could also organize based on how frequently things change; assets with longevity could then be cared for longer.

Support for Binary Protocols

We know that computers talk in 0s and 1s, right? Well, that wasn’t how HTTP/1.x used to talk. HTTP1.x used to process text commands to complete request-response cycles.

HTTP/2 supports conversion from a text protocol to a binary protocol. This enables the server and client to talk in 0s and 1s instead of actual text – thereby significantly reducing the amount of time and energy required to complete the same request-response cycles.

HTTP/2 Server Push

This feature could get a bit complicated to explain, but I’ll try to keep it simple. In the classical HTTP/1.1 scenario, a server (or website) will only send resources to the client (browser) only when the client requests for the resource. This is the typical request-response scenario.

However, HTTP/2 introduces the concept of a server push, wherein for the very first time the server can send resources (or information) to the client, without having the client to explicitly request for the resource. This mechanism saves a request-respond round trip and reduces network latency.

Web developers can build applications that leverage Server Push and send additional resources/information to the client by anticipating requests. End result? Faster, smoother applications.

Header Compression

HTTP/2 uses something called the HPACK header compression when exchanging data between the client and the server. Before we get into why this is important, it’s time to learn a bit more on protocols.

A data unit in any protocol (including HTTP) is made up of three core components – header, payload and footer.

  1. Header: The Header contains information about the data unit
  2. Payload: This is the actual data this is being transported from the server to the client
  3. Footer: This is a sort of a checklist which ensures that the data unit was delivered successfully without any errors.

Header compression works is a pretty simple way – the server compresses the header information before transferring it to the client. Upon receiving the data unit (or packet), the client decompresses the header and displays (or uses) it to (or for) the user.

With media rich websites (like Netflix or the New York Times) becoming the norm today, HTTP/2’s HPACK header compression can save a lot of bandwidth when transferring data from the server to the client.

Improved TLS

TLS stands for Transport Layer Security, which is the bit of technology that encrypts connections between server and clients. We know that has HTTPS. That’s the technology that helps to prevent hackers from stealing our credit card information and other personal data during online transactions.

HTTP/2 works flawlessly with the existing TLS technology and brings in a ton of advanced features such as fewer TLS handshakes, low resource consumption on both client and server sides and improved capabilities in reusing existing web sessions while eliminating certain vulnerabilities associated with HTTP/1.x.

Is the World Ready for HTTP/2?

Well, that depends. Most modern browsers including Chrome and Firefox support the HTTP/2 protocol. If you have the resources to implement the HTTP/2 protocol – you should go ahead and do it.

Compatibility check for HTTP/2 among major web browsers.

CanIUse.com provides an up-to-date compatibility check for HTTP/2 among major web browsers

How to get started with HTTP/2 for WordPress?

HTTP/2 for WordPress

Implementing HTTP/2 on your WordPress host requires a lot of technical know-how. If you’re a developer or networks and managing servers are your thing – go for it.

The good news is that implementing  HTTP/2 for WordPress is made easy thanks to good WordPress hosting providers. Foe example, both WPEngine and Kinsta support HTTP/2 and have all the necessary fallbacks required to ensure site visitors who don’t support the new protocol, get a reliable, fully-optimized version of HTTP/1.1 experience.

From an internet user’s perspective, you won’t have to do anything other than download the latest version of your browser. If the website is compatible with HTTP/2, your browser will automatically communicate with it using the new protocol. However, HTTP/2 is fully backwards compatible, so websites still using the old HTTP will not be affected. That means you can just sit back and enjoy faster loading websites.

Wrapping Up HTTP/2 for WordPress

HTTP/2 for WordPress is a much-needed, revolutionary piece of update to one of the world’s foremost pieces of technology. However, it would take a lot of time for HTTP/2 to go mainstream – like HTTPS websites. That being said, the purpose of this article is to introduce our readers to this wonderful piece of technology that could potentially change the face of the World Wide Web.

Thoughts on HTTP/2 for WordPress? Questions? Let us know in the comments section below!

http2-wordpress
Article by Sourav WPExplorer Author
Published on: May 22, 2018
Last updated on: May 22, 2018
Subscribe to the Newsletter

Get our latest news, tutorials, guides, tips & deals delivered to your inbox.

Comments

No comments yet. Why don't you kick off the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *

Learn how your comment data is processed by viewing our privacy policy here.