Difference between HTTP/2 and HTTP/1.1 Protocol

Difference between HTTP/2 and HTTP/1.1 Protocol

The Hypertext Transfer Protocol (HTTP) is an application protocol for distributed, collaborative, hypermedia information systems. HTTP is the foundation of data communication for the World Wide Web.

HTTP is based on the Client-Server model. Client-Server model can be explained as two computers, Client (receiver of web services) and Server (provider of services) that are communicating via requests and responses.

There are many more interesting HTTP concepts and utilities to discuss, but the star of this post is (not enough) famous HTTP/2.

What is HTTP/2?

In 2015, Internet Engineering Task Force (IETF) release HTTP/2, the second major version of the most useful internet protocol, HTTP. It was derived from the earlier experimental SPDY protocol.

Main goals of developing HTTP/2 was:

  • Request multiplexing over a single TCP connection
  • Binary protocol
  • HTTP/2 Server Push
  • Protocol negotiation mechanism — protocol electing, eg. HTTP/1.1, HTTP/2 or other.
  • High-level compatibility with HTTP/1.1 — methods, status codes, URIs and header fields.
  • Request pipelining
  • Page load speed improvements trough
  • HOL blocking (Head-of-line) — Package blocking
  • Compression of request headers

Request multiplexing

HTTP/2 can send more than one data requests in parallel over a single TCP connection over same network at same time while HTTP/1.1 sends single request per TCP Connection. This is the most advanced feature of the HTTP/2 protocol because it allows you to fetch or download web files asynchronously from one server. Most modern browsers limit TCP connections to one server.

It helps to reduce additional round trip time (RTT), making your website load faster without any optimization.

Binary protocol

The latest HTTP/2 version has evolved significantly in terms of capabilities and attributes such as transforming from a text protocol to a binary protocol. HTTP1.x used to process text commands to complete request-response cycles. HTTP/2 will use binary commands (in 1s and 0s) to execute the same tasks. This attribute eases complications with framing and simplifies implementation of commands that were confusingly intermixed due to commands containing text and optional spaces.

Browsers using HTTP/2 implementation will convert the same text commands into binary before transmitting it over the network.

Benefits:

  • Reduced network latency and improved throughput.
  • Lighter network footprint.
  • Less prone to errors.
  • Compact representation of commands for easier processing and implementation.
  • Effective network resource utilization.
  • Eliminating security concerns associated with the textual nature of HTTP1.x such as response splitting attacks.
  • Low overhead in parsing data — a critical value proposition in HTTP/2 vs HTTP1.
  • Enables other capabilities of the HTTP/2 including compression, multiplexing, prioritization, flow control and effective handling of TLS.
  • Efficient and robust in terms of processing of data between client and server.

Header compression

HTTP/2 minimize a large number of redundant header frames. It uses the HPACK specification as a simple and secure method to header compression. Both client and server maintain a list of headers used in previous client-server requests.

HPACK minimize the individual value of each header before it is transferred to the server, which then looks up the encoded information in a list of previously transferred header values to reconstruct the full header information.

HTTP/2 Server Push

This capability allows the server to send additional cacheable information to the client that isn’t requested but is anticipated in future requests. For example, if the client requests for the resource X and it is understood that the resource Y is referenced with the requested file, the server can choose to push Y along with X instead of waiting for an appropriate client request.

Benefits:

  • The client saves pushed resources in the cache.
  • The client can reuse these cached resources across different pages.
  • The server can multiplex pushed resources along with originally requested information within the same TCP connection.
  • The server can prioritize pushed resources — a key performance differentiator in HTTP/2 vs HTTP1.
  • The client can decline pushed resources to maintain an effective repository of cached resources or disable Server Push entirely.
  • The client can also limit the number of pushed streams multiplexed concurrently.

What we have here is a simple page with 100 images of checks which I’ll use to demonstrate HTTP/1.1, HTTP/2 AND HTTP/2 server push.

What is important to note in the picture below are number of requests, load time, protocol column, initiator column and waterfall diagram itself (we can see how requests are made through multiple batches, unfortunately, it is hard to see other data from it except TTFB and content download time; eg. resource scheduling and connection start time).

For HTTP/1.1:

Number of requests: 102

Load time: 12.97s

Protocol: “http/1.1”

Initiator column: Initiator of the first one is user/client and the rest of the requests are initiated by the response to client who realizes he needs some other resources (in this case, images).

Waterfall diagram: We can see how requests are made through multiple batches (TCP connections).

For HTTP/2:

Number of requests: 102

Load time: 11.19s

Protocol: “h2” (HTTP/2)

Initiator column: Initiator of the first one is user/client and the rest of the requests are initiated by response to client who realizes he needs some other resources (in this case, images).

Waterfall diagram: We can see how requests are made through 2 batches (TCP connections).

Take note of the load time. In this case, it is a bit lower than the load time of HTTP/1.1 example but it doesn’t have to be always. This example shows the multiplexing of client requests.

HTTP/2 server push:

Number of requests: 102

Load time: 3.17 s

Protocol: “h2” (HTTP/2)

Initiator column: Initiator of the first one is user/client and the rest of requests are initiated by the push of the server (virtually one request/response cycle).

Waterfall diagram: We can see how requests are made through 1 batch (1 TCP connection).

Browser Compatibility

Most of the modern browser fully support HTTP/2 protocol with an exception (red) of Opera mini (all versions) and UC Browser for Android. There are also the ones that have partial support (light green) like IE11.

You can find more details on browser support on this link https://caniuse.com/#feat=http2

Use HTTP/2 and speed up your site

HTTP/2 provides us with many new mechanics that will mitigate HTTP/1.1 issues and ones that will boost your web page performance. Currently, it is widely supported by web clients so its implementation is painless. Although implementation of HTTP/2 protocol is easy you should have in mind that with it you will probably have to change the mechanics (like serving assets to the client) to use the full potential of this protocol.

Back to Top