Demystifying HTTP for Web Developers — Part 1

What is HTTP and How a Request Travels Across the Web Why Understanding HTTP Matters HTTP is the foundation of everything we build and interact with on the web — whether it’s a static website, a complex Single Page Application (SPA), a RESTful API, or a modern mobile app. Every user action that triggers data exchange — from submitting a login form to loading an image — ultimately depends on HTTP. Despite this, many developers treat HTTP as a black box: something that “just works” behind the scenes. While abstraction is useful, serious web developers must move beyond it. Understanding how HTTP actually operates — from how requests are structured, to how connections are established, to how responses are transmitted — is essential for building high-quality, secure, and performant applications. A deep knowledge of HTTP enables developers to: Design better client-server interactions. Optimize application performance at the protocol level. Troubleshoot complex network bugs confidently. Understand and prevent vulnerabilities like man-in-the-middle attacks. Make better architectural decisions, especially around APIs, authentication flows, caching, and content delivery. In this series, Demystifying HTTP for Web Developers, we’ll go beyond theory —  proving every concept through real-world observation using tools like Chrome DevTools and Wireshark. We will anchor each explanation to the true technical foundations — official RFC standards — ensuring you’re learning real, industry-grade knowledge, not approximations. In this first part, we’ll start from the very beginning: What is a protocol, really? Who defines the rules for Internet communication? How is HTTP structured, and where does it fit in the larger networking architecture? What happens when you issue a simple HTTP request, from typing a URL to receiving a response? By the end, you’ll not only understand HTTP better — you’ll have a precise mental model of how data travels across the Internet, and you’ll see it all in action through real-world inspection. Let’s dive in. What is a Protocol? Before we can understand HTTP, we must first understand a more fundamental concept: What exactly is a protocol in networking? Definition: A protocol is a formal set of rules that define how two or more systems communicate and exchange information over a network. These rules cover critical aspects such as: How a communication session is initiated. How data is structured and formatted. How each side acknowledges receipt of data. How errors are detected and handled. When and how communication sessions are terminated. In essence, a protocol is like a language — but more strict, complete with grammar, sequence, and expectations. Two systems can successfully communicate only if they both strictly follow the same protocol. Real-World Analogy Imagine two people — one speaks only German, the other only Japanese. Without a shared language, communication would fail. Similarly, computers and applications must share a common protocol to exchange meaningful data. Protocols in Networking Many protocols exist, each serving a specific role. For example: Each protocol operates at a specific layer of the networking architecture, building on the services of the protocols below it. Each protocol operates at a different layer to achieve seamless communication. Important: Traditional HTTP (HTTP/1.1, HTTP/2) relies on TCP to deliver its messages. Newer HTTP versions (HTTP/3) operate over QUIC, a protocol built on top of UDP. Why Protocols Matter Without strict adherence to protocols: Browsers wouldn’t understand web servers. Emails couldn’t be reliably sent. Secure transactions wouldn’t be possible. Protocols ensure that systems developed by different organizations — across different devices, operating systems, and networks — can interoperate reliably. In the case of HTTP, understanding its protocol rules allows developers to: Correctly interpret how web communication works. Spot and fix performance bottlenecks. Diagnose unexpected network errors. Build standards-compliant clients and servers. Next, let’s explore who actually defines these protocols — and how Internet standards like HTTP are created and maintained. Who Defines Protocols — and What is an RFC? Now that we understand protocols are essential for communication, the next question is: Who creates these protocols? And how are they standardized across the entire Internet? Key Organizations Behind Internet Standards Two major organizations are responsible for developing and maintaining the technical standards that power the Internet and the Web: IETF defines communication standards; W3C defines web application standards. The IETF — Shaping the Internet’s Communication The Internet Engineering Task Force (IETF) is the primary body that defines how systems on the Internet communicate. It is an open standard

May 2, 2025 - 14:54
 0
Demystifying HTTP for Web Developers — Part 1

What is HTTP and How a Request Travels Across the Web

Illustration of a developer opening a glowing box labeled 'HTTP', revealing HTTP concepts like GET, POST, Cache-Control, and Content-Type – representing the idea of demystifying HTTP

Why Understanding HTTP Matters

HTTP is the foundation of everything we build and interact with on the web — whether it’s a static website, a complex Single Page Application (SPA), a RESTful API, or a modern mobile app.

Every user action that triggers data exchange — from submitting a login form to loading an image — ultimately depends on HTTP.

Despite this, many developers treat HTTP as a black box: something that “just works” behind the scenes. While abstraction is useful, serious web developers must move beyond it.

Understanding how HTTP actually operates — from how requests are structured, to how connections are established, to how responses are transmitted — is essential for building high-quality, secure, and performant applications.

A deep knowledge of HTTP enables developers to:

  • Design better client-server interactions.
  • Optimize application performance at the protocol level.
  • Troubleshoot complex network bugs confidently.
  • Understand and prevent vulnerabilities like man-in-the-middle attacks.
  • Make better architectural decisions, especially around APIs, authentication flows, caching, and content delivery.

In this series, Demystifying HTTP for Web Developers, we’ll go beyond theory —  proving every concept through real-world observation using tools like Chrome DevTools and Wireshark.

We will anchor each explanation to the true technical foundations — official RFC standards — ensuring you’re learning real, industry-grade knowledge, not approximations.

In this first part, we’ll start from the very beginning:

  • What is a protocol, really?
  • Who defines the rules for Internet communication?
  • How is HTTP structured, and where does it fit in the larger networking architecture?
  • What happens when you issue a simple HTTP request, from typing a URL to receiving a response?

By the end, you’ll not only understand HTTP better — you’ll have a precise mental model of how data travels across the Internet, and you’ll see it all in action through real-world inspection.

Let’s dive in.

What is a Protocol?

Before we can understand HTTP, we must first understand a more fundamental concept: What exactly is a protocol in networking?

Definition:

A protocol is a formal set of rules that define how two or more systems communicate and exchange information over a network.

These rules cover critical aspects such as:

  • How a communication session is initiated.
  • How data is structured and formatted.
  • How each side acknowledges receipt of data.
  • How errors are detected and handled.
  • When and how communication sessions are terminated.

In essence, a protocol is like a language — but more strict, complete with grammar, sequence, and expectations. Two systems can successfully communicate only if they both strictly follow the same protocol.

Real-World Analogy

Imagine two people — one speaks only German, the other only Japanese. Without a shared language, communication would fail. Similarly, computers and applications must share a common protocol to exchange meaningful data.

Protocols in Networking

Many protocols exist, each serving a specific role. For example:

Table listing protocols and their purposes: TCP ensures reliable delivery, IP routes packets, TLS encrypts and authenticates, and HTTP defines message exchange between clients and servers

Each protocol operates at a specific layer of the networking architecture, building on the services of the protocols below it.

Diagram of the networking stack: Application Layer (HTTP) on top, followed by Transport Layer (TCP or QUIC), Internet Layer (IP), and Link Layer (Ethernet/WiFi)
Each protocol operates at a different layer to achieve seamless communication.

Important:

Traditional HTTP (HTTP/1.1, HTTP/2) relies on TCP to deliver its messages.

Newer HTTP versions (HTTP/3) operate over QUIC, a protocol built on top of UDP.

Why Protocols Matter

Without strict adherence to protocols:

  • Browsers wouldn’t understand web servers.
  • Emails couldn’t be reliably sent.
  • Secure transactions wouldn’t be possible.

Protocols ensure that systems developed by different organizations — across different devices, operating systems, and networks — can interoperate reliably.

In the case of HTTP, understanding its protocol rules allows developers to:

  • Correctly interpret how web communication works.
  • Spot and fix performance bottlenecks.
  • Diagnose unexpected network errors.
  • Build standards-compliant clients and servers.

Next, let’s explore who actually defines these protocols — and how Internet standards like HTTP are created and maintained.

Who Defines Protocols — and What is an RFC?

Now that we understand protocols are essential for communication, the next question is:

Who creates these protocols?

And how are they standardized across the entire Internet?

Key Organizations Behind Internet Standards

Two major organizations are responsible for developing and maintaining the technical standards that power the Internet and the Web:

Table listing two web standard organizations: IETF defines core Internet protocols like TCP, IP, and HTTP; W3C develops web technologies like HTML, CSS, and parts of web application architecture

Diagram showing the relationship between IETF and W3C: IETF defines protocols like TCP/IP or HTTP, which flow into W3C standards like HTML, CSS, and Web APIs
IETF defines communication standards; W3C defines web application standards.

The IETF — Shaping the Internet’s Communication

The Internet Engineering Task Force (IETF) is the primary body that defines how systems on the Internet communicate.

  • It is an open standards organization — meaning engineers, researchers, and practitioners worldwide can contribute.
  • Its work is organized into specialized Working Groups , such as the HTTP Working Group, Security Groups, and Transport Groups.
  • The goal of the IETF is not to control the Internet, but to guide its growth based on technical merit and consensus.

Mission Statement:

“The mission of the IETF is to make the Internet work better by producing high-quality, relevant technical documents that influence the way people design, use, and manage the Internet.” — IETF Mission Statement

The W3C — Standardizing the Web

The World Wide Web Consortium (W3C) focuses specifically on the technologies of the Web.

It develops standards like:

  • HTML
  • CSS
  • DOM specifications
  • Web accessibility standards

The W3C’s mission is to ensure the Web remains accessible, interoperable, and evolves as technologies change.

In short:

  • IETF → Defines protocols that move data across networks (HTTP, TCP, TLS).
  • W3C → Defines how web pages and applications are structured and behave (HTML, CSS).

Note:

Early versions of HTTP (HTTP/1.0 and HTTP/1.1) were co-developed by both the W3C and the IETF. Today, the IETF’s HTTP Working Group is the main authority on HTTP specifications.

What is an RFC?

You’ve likely seen references to “RFCs” in technical documentation.

RFC stands for Request for Comments  — but despite the casual name, an RFC is a formal, peer-reviewed, and highly authoritative document.

RFCs define:

  • Protocol specifications (e.g., TCP, IP, HTTP)
  • Best Current Practices (BCPs)
  • Architectural guidelines
  • Research and experimental proposals

Key Facts About RFCs:

  • RFCs are sequentially numbered documents , starting from RFC 1 (published in 1969).
  • Some RFCs define official Internet standards , while others share research or best practices.
  • RFCs are managed by the RFC Editor , operating under the guidance of the IETF and related organizations.
  • They are freely available and intended to be stable, citable references for engineers worldwide.

RFCs Relevant to HTTP

When this series refers to how HTTP works, it anchors explanations in the actual RFCs  — not vague approximations.

Some important RFCs for modern HTTP:

Table listing RFCs and their purposes: RFC 9110 defines HTTP semantics; RFC 9112 defines HTTP/1.1 format; RFC 9113 defines HTTP/2; RFC 9114 defines HTTP/3 over QUIC

Summary

  • Protocols ensure reliable communication across the Internet.
  • The IETF and W3C are the primary organizations maintaining Internet and Web standards.
  • RFCs are formal, peer-reviewed documents defining protocols like HTTP.

Next, let’s see exactly where HTTP fits inside the Internet’s layered architecture — and how different protocols build on each other to make web communication possible.

Networking Layers — Where HTTP Fits

Developers often hear that HTTP is an “Application Layer” protocol — but what does that really mean?

To fully understand HTTP’s role, we must explore the layered architecture of Internet communication — a fundamental concept that powers everything from simple web pages to massive cloud systems.

The Layered Architecture of Network Communication

Internet communication is organized into layers , each responsible for a specific set of tasks.

Each layer:

  • Provides services to the layer above it (e.g., reliable delivery).
  • Relies on services from the layer below it (e.g., packet routing).

This modular design makes the Internet scalable, interoperable, and resilient.

Two models explain these layers:

Table comparing models: TCP/IP Model is the practical architecture of the real-world Internet; OSI Model is a more detailed theoretical model used for teaching and understanding

In practice, the TCP/IP model is what truly matters for web development.

The TCP/IP Networking Model

The TCP/IP model organizes communication into the following four layers:

Table showing networking layers with responsibilities and example protocols: Application Layer handles software communication (e.g., HTTP, SMTP); Transport Layer ensures data transfer (e.g., TCP, UDP); Internet Layer routes data (e.g., IP); Link Layer manages hardware connections (e.g., Ethernet, Wi-Fi)

Stack diagram showing protocol layers from top to bottom: HTTP, TCP or QUIC, IP, and Ethernet/Wi-Fi
HTTP relies on lower layers like TCP and IP to successfully transmit messages over the network.

Where HTTP Fits in the Stack

HTTP operates at the Application Layer.

It defines how web clients (browsers, apps) and servers (APIs, web servers) communicate by sending structured requests and responses.

However, HTTP depends on lower layers :

Table showing networking layers and their roles in HTTP communication: Transport Layer (TCP/QUIC) ensures reliable or optimized delivery; Internet Layer (IP) routes packets; Link Layer (Ethernet/Wi-Fi) handles physical transmission

Key Insight:

HTTP itself does not handle packet delivery, error correction, retransmissions, or routing. Those tasks are delegated to TCP, QUIC, and IP beneath it.

This layered separation allows each protocol to specialize and evolve independently , leading to faster innovation and better overall Internet performance.

What About the OSI Model?

You might have also heard of the OSI Model  — the “7-layer model” taught in networking classes:

  1. Application
  2. Presentation
  3. Session
  4. Transport
  5. Network
  6. Data Link
  7. Physical

While it’s great for conceptual understanding, the Internet in practice follows the simpler TCP/IP model.

For developers, thinking in terms of TCP/IP — Application, Transport, Internet, Link — is more practical and accurate.

Summary

  • Network communication is organized into structured layers.
  • HTTP operates at the Application Layer , defining the structure of client-server communication.
  • HTTP relies on Transport (TCP/QUIC), Internet (IP), and Link Layer (Ethernet/Wi-Fi) protocols to deliver messages across networks.
  • The TCP/IP model is the real-world architecture of the Internet.

Next, let’s dive deeper into HTTP itself: what it is, why it matters, and how its design choices like statelessness shape web development.

Deep Dive — What is HTTP?

Now that we understand protocols and where HTTP fits in the networking architecture, let’s focus specifically on HTTP itself  — the protocol that powers almost everything we do on the Web.

Definition and Purpose

HTTP stands for HyperText Transfer Protocol.

Originally designed to transfer hypertext documents (documents containing links to other documents), HTTP today is used for a wide variety of content:

  • HTML pages
  • Images
  • Video streams
  • API calls (JSON, XML, etc.)
  • WebSockets negotiation
  • And more

HTTP governs:

  • How a client formulates a request.
  • How a server formulates a response.
  • How metadata (content types, encodings, caching instructions) is exchanged.
  • How errors and status information are communicated.

The current formal definition of HTTP semantics is found in RFC 9110, which standardizes HTTP across HTTP/1.1 , HTTP/2 , and HTTP/3.

Core Characteristics of HTTP

HTTP has several key design principles that profoundly influence how the web behaves:

1. Statelessness

HTTP is inherently stateless.

Each HTTP request is independent.

The protocol itself does not retain any memory of previous requests or interactions.

  • The server treats every request as isolated.
  • If persistent state is needed (e.g., user login sessions), it must be implemented at the application layer using mechanisms like:  — Cookies  — Authentication tokens  — Server-side sessions

RFC 9110 §3.3 :

“HTTP is defined as a stateless protocol, meaning that each request message’s semantics can be understood in isolation…”

2. Client-Server Architecture

HTTP clearly defines roles:

  • Client : Initiates requests (browsers, mobile apps, API consumers).
  • Server : Listens for requests and sends back structured responses (web servers, APIs).

The server does not initiate communication — the client drives the entire interaction.

3. Textual and Extensible

HTTP messages (at least in HTTP/1.x) are primarily text-based :

  • Easy for humans to read and debug.
  • Easy to extend — new headers, new methods, and new status codes can be introduced without breaking older clients or servers.

Even though HTTP/2 and HTTP/3 use binary framing for better performance, the underlying HTTP semantics remain text-based according to RFC 9110.

4. Flexible Transport Layer

Traditionally, HTTP relies on TCP as its transport protocol (for reliable, ordered delivery).

However, starting with HTTP/3 , HTTP now runs over QUIC , a modern protocol built on UDP that offers:

  • Faster connection establishment
  • Better handling of packet loss
  • Improved performance under poor network conditions

Key Point:

Regardless of whether HTTP uses TCP or QUIC, its logical structure of requests and responses stays the same.

Fundamental Components of HTTP Communication

When a client sends an HTTP request and a server responds, several key components are involved:

HTTP Request

  • Method : Specifies the desired action.  — Examples: GET, POST, PUT, DELETE, etc.
  • Headers : Metadata about the request.  — Examples: Content-Type, Authorization, Accept, User-Agent.
  • Optional Body : Payload data (for methods like POST, PUT, PATCH).

HTTP Response

  • Status Code : Numeric code indicating the result.  — Examples: 200 OK, 404 Not Found, 500 Internal Server Error.
  • Headers : Metadata about the response.  — Examples: Content-Type, Cache-Control.
  • Optional Body : The returned data (HTML document, JSON data, file, etc.).

Diagram showing structure of an HTTP request and response pair
Every HTTP interaction consists of a structured request and a structured response.

Evolution of HTTP Versions

HTTP has evolved over time to meet the growing demands of modern applications:

Table comparing features across HTTP/1.1, HTTP/2, and HTTP/3

Today, modern browsers and servers automatically negotiate the best HTTP version they both support — typically via the ALPN (Application-Layer Protocol Negotiation) extension during the TLS handshake.

Summary

  • HTTP is a stateless, application-layer protocol governing client-server communication.
  • It is extensible and independent of the underlying transport (TCP or QUIC).
  • HTTP interactions are structured as requests and responses , with clearly defined methods, headers, status codes, and optional bodies.
  • Modern HTTP evolves across versions, improving performance while preserving core semantics.

Now that we know what HTTP is, let’s walk through the full journey of an HTTP request — from typing a URL to receiving a server response.

How an HTTP Request Travels Across the Internet

Understanding HTTP isn’t complete without seeing the full journey of a request  — from the moment a user types a URL, to the server processing the request, and back to the browser rendering the response.

Each step involves multiple protocols , different network layers , and important optimizations working together seamlessly.

Let’s walk through the complete process.

Step 1: DNS Resolution

Before any HTTP request can be sent, the client needs the server’s IP address.

  • When a user types a URL like https://example.com into the browser, the browser first checks:  — Browser DNS cache  — OS DNS cache
  • If the IP address isn’t already cached, the client sends a DNS query (usually over UDP) to a DNS resolver.
  • The resolver returns the IP address (e.g., 93.184.216.34).

Without DNS resolution, the browser would have no way to find the server.

Step 2: Establishing a Connection

Once the client knows the server’s IP address, it must establish a transport connection. Depending on the HTTP version:

For HTTP/1.1 and HTTP/2:

  • A TCP connection is established using a three-way handshake :

Diagram illustrating TCP three-way handshake steps: SYN, SYN-ACK, ACK

Only after the TCP handshake is complete can data be sent.

For HTTPS (secure HTTP):

  • After TCP, a TLS handshake happens:  — Negotiates encryption parameters (e.g., cipher suites).  — Authenticates the server identity via digital certificates.  — Establishes a secure, encrypted communication channel.

HTTPS ensures confidentiality, integrity, and authenticity.

For HTTP/3 (over QUIC and UDP):

  • No TCP handshake is needed.
  • QUIC (which runs over UDP) combines connection setup and encryption into a single step.
  • This reduces latency and improves performance, especially over unreliable networks.

QUIC is one of the major innovations of HTTP/3.

Step 3: Sending the HTTP Request

With a connection established (TCP/TLS or QUIC), the client sends the actual HTTP request. A typical HTTP request contains:

  • Method : e.g., GET, POST
  • Path : e.g., /index.html
  • Headers : e.g., Host, User-Agent, Accept
  • Optional Body : for methods like POST, PUT

Example of a simple HTTP/1.1 request:

GET /index.html HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
Accept: text/html

At this point, the HTTP semantics defined in RFC 9110 come fully into play.

Step 4: Server Processing and Response

Upon receiving the request:

  • The server processes it (maybe involving database queries, cache lookups, internal logic).
  • The server formulates an HTTP response:  —  Status code (e.g., 200 OK, 404 Not Found).  —  Response headers (e.g., Content-Type: text/html). — Optional body (e.g., HTML page, JSON API response).

Example of a simple HTTP/1.1 response:

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 1234

...

The server sends this response back over the established transport connection.

Step 5: Browser Processes the Response

Once the browser receives the response:

  • It reads the status code and headers.
  • It renders content (for HTML documents) or processes API data (for JSON responses).
  • It may issue additional HTTP requests to load assets like:  — Images  — CSS files  — JavaScript files

These subsequent requests create a cascade of network activity  — visible in the browser’s Developer Tools Network tab.

This is how full web pages are progressively loaded and rendered.

Visual Summary of the Journey

The typical sequence of an HTTP request looks like this:

End-to-end diagram showing full HTTP request lifecycle across layers and protocols
Multiple protocols work together to deliver a single web page request.

Important Performance Observations

  • DNS Resolution latency can slow down page loads if DNS is slow or not cached.
  • TCP/TLS Handshakes introduce round-trip delays before the first byte is sent.
  • HTTP/2 and HTTP/3 optimize performance by:  — Reducing connection overhead.  — Allowing multiple parallel streams.  — Mitigating head-of-line blocking.

Understanding these phases is crucial for diagnosing slow websites and network issues.

Summary

  • Before any HTTP request, the browser resolves the server’s IP address via DNS.
  • A transport connection (TCP/TLS or QUIC) must be established first.
  • The browser sends an HTTP request, and the server returns a structured HTTP response.
  • Modern browsers handle dozens (sometimes hundreds) of HTTP requests per page load, optimizing for speed and efficiency.

Now that we understand the full journey, let’s observe it hands-on using Chrome DevTools and Wireshark — validating each step of the HTTP lifecycle.

Practical Example — Observing a Real HTTP Request: Chrome DevTools and Wireshark

Theory is important — but seeing HTTP communication live in action truly deepens understanding. In this section, we’ll walk through a real-world experiment :

  • Perform an HTTP request using Chrome.
  • Observe the full lifecycle — DNS resolution, connection establishment, and HTTP exchange — using:  —  Chrome DevTools (Application Layer view)  —  Wireshark (Network Layer view)

Let’s get started.

Test Scenario

We’ll open the browser and load a simple URL: https://example.com

This triggers:

  • DNS lookup
  • TCP or QUIC connection establishment
  • TLS handshake (for HTTPS)
  • HTTP request and response

We’ll capture and inspect every step.

Observing the HTTP Journey in Chrome DevTools

Step 1: Preparing Chrome DevTools

  1. Open Google Chrome.
  2. Press F12 to open DevTools.
  3. Navigate to the Network tab.
  4. Enable:  —  Preserve log (to keep records even if page reloads).  —  Disable cache (to avoid cached responses affecting the results).
  5. (Optional) Right-click the Network tab’s column headers and enable the Protocol column if not already visible.
  6. Press the Clear (⟲) button to clear old network activity.

Screenshot of Chrome DevTools Network tab capturing HTTP traffic

Optional: Forcing a Fresh Connection

To ensure Chrome performs a full DNS lookup and handshake instead of reusing an existing connection:

  • Visit: chrome://net-internals/#sockets  — Click Flush socket pools.

Screenshot of Chrome's net-internals page showing socket pool flushing option

  • Visit: chrome://net-internals/#dns  — Click Clear host cache.

Screenshot of Chrome's net-internals DNS tab with Clear host cache button

Or simply open a new Incognito Window with cache disabled.

This forces Chrome to perform every network step fresh.

Step 2: Loading the Test URL

Observe the network activity in the DevTools Network panel.

Focus on the main request to example.com.

Step 3: Inspecting the Request Details

Click on the example.com request and check:

General Overview

  • Request URL : https://example.com
  • Request Method : GET
  • Status Code : 200 OK
  • Remote Address : e.g., 96.7.128.175:443 (or a different one based on the returned result from the DNS Resolution)
  • Protocol : (Shown in the Network table) — typically h2 (HTTP/2) or http/1.1.

Screenshot of DevTools Headers tab showing HTTP request and response details

Screenshot of DevTools General tab with remote address and protocol information

Timing Breakdown (Timing Tab)

In the Timing tab, you will see a waterfall graph divided into phases:

  • DNS Lookup Time
  • TCP Connection Time
  • TLS Handshake Time
  • Request Sent Time
  • Waiting (TTFB) — Time to First Byte
  • Content Download Time

Each phase maps directly to the theoretical journey we described earlier.

Note: If the connection is reused, only the Request/Response phases will be visible.

Screenshot of DevTools Timing tab showing DNS, TCP, TLS, and download durations

Observing the Same Journey in Wireshark

For a deeper, packet-level view, we’ll capture and inspect network traffic using Wireshark.

Step 1: Setting Up Wireshark Capture

  1. Open Wireshark.
  2. Select your active network interface (e.g., Wi-Fi, Ethernet).
  3. Start capturing traffic  — no filter needed yet.

Screenshot of Wireshark interface selecting network adapter for traffic capture

Now Wireshark records all network activity.

Step 2: Loading the Test URL

  • In Chrome (DevTools open, caching disabled or after flushing sockets), reload https://example.com.

Wireshark captures all the DNS, TCP, TLS, and HTTP packets involved.

Step 3: Filtering Relevant Packets

After the capture:

  1. Find the resolved IP address for example.com:  — (You can see it in DevTools → Headers → Remote Address.)
  2. In Wireshark, apply this display filter :
dns or ip.addr == [resolved IP address]

Wireshark screenshot filtered for DNS and traffic to server IP

This filters the traffic down to only:

  • DNS queries/responses
  • TCP or QUIC connection packets
  • TLS handshake packets
  • HTTP encrypted application data

Step 4: Analyzing the Captured Packets

You’ll observe:

  • DNS Resolution:
     — 
    DNS query for example.com  — DNS response with IP address

DNS query and response for example.com captured in Wireshark

  • TCP Three-Way Handshake (for HTTP/1.1 or HTTP/2):  — SYN → SYN-ACK → ACK

TCP three-way handshake packets captured in Wireshark

  • TLS 1.3 Handshake (HTTPS only):  — ClientHello — ServerHello

TLS 1.3 handshake packets including ClientHello and ServerHello in Wireshark

Important: If TLS 1.2 you will see more steps

  • HTTP Request and Response (encrypted inside TLS Application Data frames):  — Encrypted packet containing HTTP GET request  — Encrypted packet containing HTTP 200 OK response

Encrypted TLS Application Data packets containing HTTP request and response

  • TCP Session Closure :  — FIN-ACK packets cleanly closing the connection.

TCP FIN-ACK packets closing the connection, captured in Wireshark

Each step perfectly matches the theoretical journey described earlier.

Key Observations

  • DNS lookup must complete successfully before any connection is attempted.
  • TCP handshakes and TLS negotiation introduce real-world latency.
  • TLS handshake ensures secure communication.
  • HTTP request and response data are encrypted (not directly visible unless you decrypt TLS).
  • QUIC (for HTTP/3) would show a slightly different pattern — no separate TCP and TLS handshakes.

Real-world inspection confirms how different protocols work together to deliver even a simple webpage.

Summary

  • Chrome DevTools shows the application-level phases of HTTP requests.
  • Wireshark reveals the network-layer behavior — from DNS, to TCP/QUIC, to TLS, to HTTP Application Data.
  • Together, they validate and demystify the full HTTP communication lifecycle.

In the next part of the series, we’ll zoom into the structure of HTTP requests and responses — learning about headers, methods, status codes, and how they work across different HTTP versions.

What do you think?

Was this breakdown helpful?

I'd love to hear your thoughts, feedback, or any questions you have in the comments.

Let's discuss — whether you're just learning HTTP or you've used it for years, your perspective is welcome!