HTTP/2 vs HTTP/1.1: What's the Key Difference?

Its important to know the latest enhancements in the protocols to take the better decision while choosing between HTTP/2 vs HTTP/1.1. This decision can be based on the functionality (like web sockets doesn't support HTTP/2) or the server requirements.

Let's check out the major features of both widely used protocols and the difference between HTTP/2 and HTTP/1.1

Table of contents

1. HTTP/1.1 Major Features
2. HTTP/2 Major Features
3. Major Differences between HTTP/2 vs HTTP/1.1

HTTP/1.1 Major Features

Here the the major features introduced as part of HTTP/1.1 protocol.

1. Partial Content with Range Request

Range Request header is the essential part of streaming applications now a days, where partial data can be stream from server to client. This allows to send the partial content rather than downloading the whole file.

// First 500 bytes
HTTP/1.1 200 OK
Range: bytes=0-499

// Next 500 bytes
HTTP/1.1 200 OK
Range: bytes=500-999

2. Persistent Connections (Keep-Alive)

Before HTTP/1.1 for every new request a new TCP connection got established, with persistent connection using the Keep-Alive Response Header, a single TCP connection is maintained for the communication by default. This overall reduced the latency by eliminating the TCP handshake and improve the performance.

// Example
HTTP/1.1 200 OK
Connection: Keep-Alive
Content-Encoding: gzip
Keep-Alive: timeout=5, max=200

3. Chunked Transfer Encoding

Transfer-Encoding chunked allows sever to send the dynamic generated data without know the total size of the content. This helps in streaming large responses easily.

// Example
HTTP/1.1 200 OK
Transfer-Encoding: gzip, chunked

4. Host Header

Before HTTP/1.1, each IP can server only single website per domain. HTTP/1.1 introduced Host request header so that multiple IPs can be mapped to the single website.

// Example
HTTP/1.1 200 OK
Host: frontendgeek.com
Connection: Keep-Alive
Content-Encoding: gzip
Keep-Alive: timeout=5, max=200

HTTP/2.0 Major Improvements

HTTP/2.0 is based on Google's SPDY project, named after SPeeDY which shows its fast and compression nature. Here are the major features/improvements over HTTP/1.1

1. Binary Protocol (Binary Framing Layer)

HTTP/1.1 uses the plain text format which requires complex parsing, but HTTP/2 introduced binary format using binary framing layer which reduced errors and improve efficiency. Overall this makes the communication between client and server faster and more reliable.

2. Request and Response Multiplexing

In HTTP/2 Bi-directional communication (Multiplexing) can happen on the same TCP connection. It allows multiple requests and responses to be sent over single TCP connection parallelly. No need to create different TCP connections for different requests. Means it only requires 1 TCP connection per origin.

It solved the major issue of sequential handling of requests from HTTP/1.1 protocol. 

3. Header compression using HPACK 

In HTTP/2, compression happened for both request and response headers using HPACK, meaning less data transfer between client and server. This overall reduced the overhead in the communication which results into lesser bandwidth utilization and faster loading.

4. Server push

Before HTTP/2, the server could send only a single response per request, but with the server push the server sends multiple responses to the client for a single request. For example If a client requests an HTML file, the server can also send CSS and JS files proactively without even requested by client.

Server push overall reduce the round trips required for the assets resulting faster web application.

Major Differences Between HTTP/2 vs HTTP/1.1

Here are the major differences between HTTP/2 vs HTTP/1.1

Comparison	HTTP/1.1	HTTP/2
Protocol Type	Text based	Binary based
Header compression	NO ❌	Compressed Header
Multiplexing Support	NO ❌	YES ✅
Server Push Support	NO ❌	YES ✅
Latency	High	Low

Learn Next 🚀

1. Frontend System Design Concepts
2. Best Frontend System Design Cheat Sheet