Most people experience the web as something fast, simple, and almost magical. Click a link or type a web address, and in seconds the page appears. Behind that apparent simplicity lies a highly orchestrated, lightning-fast chain of events that happens every single time you visit a site.
From translating a friendly domain name into a machine-readable address, to breaking data into thousands of tiny packets for the journey, to reassembling it all so your page looks “just right,” the process involves countless moving parts working together in the background.
This article takes you on a step-by-step tour of what actually happens from the moment you hit
“ENTER.”
DNS - Step 1
When an address of a page is typed, the DNS translates the domain name into the server’s IP address.
Example
‘Google.com’ is not the server’s address. Instead, it is an easy name for us to remember and use. When that name is typed into the address bar, it gets converted into an IP address. The process of conversion is handled by DNS Lookup, which acts as a mapping of domains and IP addresses. DNS stands for Domain Name Server, which is sort of like a phone book of the Internet.
As such, when we enter a URL, the browser connects to a DNS, and the latter converts it into the IP address of the server. DNS is provided by the Internet Server Provider of the Internet the client uses.
-
https:// - protocol
-
216.58.211.26 - server’s IP address
-
443 - port number (443 - default for HTTPS, 80 for HTTP) - it is like a subaddress
TCP/IP Socket Connection - Step 2
A TCP/IP socket connection between client and server is established, which means they become connected.
This connection is kept open for just enough time for the server to transfer all the files of a webpage requested.
-
TCP - Transmission Control Protocol
-
IP - Internet Protocol
Together, TCP/IP are protocols that define how data travels over the internet.
Here is what TCP/IP does:
-
Breaks request and response data into thousands of chunks called packets before they are sent.
-
Once these packets arrive at their destinations, they will be reassembled to their original state. It is done to speed up the delivery of data. It is easier to deliver the data in smaller packages instead of one whole. The analogy here is a large truck that is trying to drive through a narrow road, as such, creating a traffic jam. The cargo is instead delivered by a large number of motorcycles that don’t block the road. Each packet has the IP address of the server where it must be delivered, so it does not get lost.
HTTP Request Made - Step 3
The client (browser) sends an HTTP request to the server.
HTTP stands for Hyper-Text Transfer Protocol. It is yet another communication protocol (a system of rules that allows two or more parties to communicate over the Internet).
Here is an example HTTP request:
Start line
GET / HTTP/1.1
The first line of the HTTP request is called ‘Start line,’ and includes the HTTP method (GET in the above example), a request-target (/ - homepage), and HTTP version (HTTP/1.1).
Sample HTTP methods are:
-
GET - for requesting data
-
POST - for sending data
-
PUT - for modifying data
In the above example, the request-target is ‘/,’ which means we are asking the server to send us the homepage (root).
Headers
What follows the ‘Start line’ are request headers - some info that we send about the request itself. There are many request headers. Examples:
-
What browser is used to make a request
-
At what time
-
The user’s language
Body
In the case when we send data to the server, the request will include the body, such as data coming from the form that was submitted on the page.
HTTP Response Sent - Step 4
Once the server receives the request, it starts working on getting it ready.
Here is an example HTTP response:
It also includes:
-
Start line
-
Headers
-
Body
Start line
It is pretty similar to the start line of the HTTP Request, but it also includes:
-
Status code: 200
-
Status message: OK
Headers
The difference from request headers is that the response headers are configured by the backend developer.
Body
It usually contains the HTML of the requested resource, or JSON data coming from an API.
What Happens Next
Once the HTML page is returned by the server, the browser parses the HTML code, and if other resources are required for it to build the page (images, external CSS/JS, fonts, etc.), it will request those resources. To get each such resource, the set Request-Resource cycle must repeat.
Once all resources for the page have been downloaded, the browser will render the page.
For example, to build Slicebread’s homepage, the browser has to request 328 resources, as shown in the following screenshot:
To recreate this test, open the DevTools in Google Chrome (F12 key on Windows), visit the Network tab, tick ‘Disable cache’, and select ‘All’ filter to see all request resource types. Once ready, enter our homepage into the browser.
To see the initial response, filter resources by clicking on the ‘Doc’ filter and clicking on the first item in the list:
As shown in the above screenshot, you can explore the request/response headers, response body, the initiator of the request, as well as timing and cookies information.
When you strip it down to its basics, loading a web page is a complex dance of servers, protocols, requests, and responses - all happening in fractions of a second. It’s easy to forget that each click sets off an invisible chain reaction involving multiple systems spread across the globe.
Understanding this process not only gives you a deeper appreciation for how intricate the web truly is, but also highlights why building and maintaining a smooth, fast-loading site requires both technical skill and careful planning. The web may feel effortless on the surface, but behind every page load lies a remarkable feat of engineering.
