What Really Happens When You Load a Web Page?

Intro

Growing up, everyone around me noticed I had a deep level of curiosity, which increased as I became older. A good number of the gadgets in the house then didn’t have the opportunity to stay whole long enough to see me grow up, because I had dismantled them one way or the other just out of curiosity to see how they really worked and if I could assemble them again. And of course, I couldn’t assemble all successfully. I still remember that big radio, and really hope my dad doesn’t come across this post. 😆

One of the curiosities I also noticed had grown in me as I found myself in the tech space was how the web really worked. One thing I was really sure of was that it isn’t magic at all even though it felt and still feels almost magical!

I mean, come to think of it; you just get to type a web address, hit enter, and in milliseconds, a web page appears.

PS: A web or website address is essentially the address of a resource or set of files on the internet. It’s called a Uniform Resource Locator (or URL for short).

As a frontend engineer too, understanding the steps behind loading a web page helps you level up and gives you a clearer picture of performance issues, rendering strategies, browser behavior, and even security implications.

I’ll do my best to break down this process in as much simple terms as I can. Don’t worry at all, I’ve got you covered 😇💪

Step 1. You type a URL or web address into your browser’s address bar and then hit enter

Let’s say you visit: https://example.com

This is not just a random string, as you may have guessed rightly. Every part of it has its own function. Let’s break this down even more;

1. https : Scheme / Protocol

• This part tells the browser what protocol it should use to access the resource.

• In this case, the browser is to use the HTTPS (HyperText Transfer Protocol Secure), which is basically a secure version of the HTTP (HyperText Transfer Protocol → http://); or in more technical terms, HTTP with encryption via TLS (Transport Layer Security).

  PS: HTTP is a set of rules that govern how web browsers and servers communicate, enabling the display of web pages and other content (*more info at the references section).

• It ensures the data being shared or looked up is:

  • Encrypted (no eavesdropping by a 3rd party)

  • Authenticated (you’re talking to the real site, even though this is not a 100% assurance today 🥲)

  • Tamper-proof (the data can't be altered in transit)

2. example.com : Domain Name

• This is the hostname or domain, which users can remember and type easily.

• The domain is mapped to an IP address via a DNS lookup (*more info in next step).

Let’s break it down even further:

Combined, example.com is the fully qualified domain name (FQDN).

A full URL actually goes way beyond just the above. It can include the following:

When all put together this gives us an even longer URL:

https://www.example.com:443/about?user=gospel#section

Step 2. DNS Lookup: Translating the domain to the actual address

Let’s just say the domain name (web address) above you typed into your search bar (example.com) is the name of a utility store. Computers do not understand what names are, and so do not know what example.com is. What they understand is numbers, and hence we need to map the domain to a number (also known as an IP address). The IP (Internet Protocol) address can be said to be the store’s real street address. The computer needs this street address to get to the store you’re searching for.

In essence, your browser asks a DNS (Domain Name System) server (like a phonebook) to resolve the domain to an IP address, e.g., 93.184.216.34.

*The IP addresses associated with example.com are: 93.184.216.34 and 2606:2800:220:1:248:1893:25c8:1946. These are the IPv4 and IPv6 addresses respectively.

Worthy of note: There’s a term called DNS prefetching. It’s a process that you can use to speed up DNS look up for known domains.

Step 3. Establishing a TCP connection (with TLS if HTTPS)

On getting the IP address, your browser establishes a TCP (Transmission Control Protocol) connection with the server hosting the website. TCP is a fundamental protocol that ensures reliable and ordered delivery of data over the internet. This step is very important because it sets up a communication channel between your device and the server, allowing data to be exchanged accurately.

The process begins with a three-way handshake, which is a series of steps that both your browser and the server must complete to establish a connection. First, your browser sends a SYN (synchronize) packet to the server to initiate the connection. The server then responds with a SYN-ACK (synchronize-acknowledge) packet to acknowledge the request. Finally, your browser sends an ACK (acknowledge) packet back to the server, confirming that the connection is established and ready for data transmission.

If you’re using https://, then an additional of security is added through TLS (Transport Layer Security). This involves exchanging cryptographic keys and certificates to encrypt the data being transmitted, ensuring that sensitive information remains secure and private.

This step is often overlooked, but it can add latency or delays especially on mobile or slow networks.

Step 4. Sending the HTTP request

Now the browser finally sends an HTTP GET request for /.

Example:

GET / HTTP/1.1
Host: example.com
User-Agent: Chrome/124

This includes headers with info like cookies, cache rules, accepted formats, and authentication tokens.

Step 5. The server responds

The server then receives the request, processes it (maybe querying a database or rendering just HTML which is short for HyperText Markup Language), and finally sends back a response to your browser. This HTML document is the backbone of the web page, containing the structure and content that the browser will render for the user.

Example:

HTTP/1.1 200 OK
Content-Type: text/html

The response body includes the raw HTML of the page. This is where the browser begins to display the web page.

Step 6. Your browser renders the HTML (DOM creation)

As your browser receives the requested web page as HTML data, it parses content line by line, thereby building the DOM (Document Object Model). The DOM is a tree-like structure that represents the web page's content and structure. This process helps the browser understand how to display the page.

Also, along with the HTML content, the browser receives external resources (like CSS - Cascading Style Sheets, JS - JavaScript, fonts, images, etc.) which it adds to the list of resources for download.

PS: The browser might stop rendering if it comes across CSS or synchronous JS, which can delay the web page from loading in time.

Step 7. CSSOM and Render Tree construction

In this step;

• The browser parses all CSS into the CSSOM (CSS Object Model).

• Then combines it with the DOM to form the Render Tree.

• This tells the browser what to draw and how to draw it.

Step 8. Layout and paint

Now with the render tree ready:

• The browser calculates where each element goes → Layout.

• Then it paints pixels to the screen → Paint.

• The GPU (Graphics Processing Unit) in your device may then start working to put together layers and handle animations.

Step 9. JavaScript execution & event binding

JS files execute during or after parsing, depending on whether they’re defer, async, or blocking.

Also, these take place;

• Event listeners are attached.

• Components are initialized (React, Vue, etc.).

• Client-side rendering (CSR) may then start here.

Step 10. The page becomes interactive (DOMContentLoaded & Load Events)

• DOMContentLoaded: When HTML and DOM are fully parsed.

• load: When everything including images and styles are fully loaded.

This is the final step and at this point the web page has completely loaded and is fully interactive. At this point you now have access to the full contents of the web page you requested on your browser. ☺️

So, what can slow it down? (For devs 😀👌)

How long it takes to load a web page completely play very important roles to how good or bad the experiences of your users/customers turns out. This can be affected by;

• Large CSS or JS files; these block render, especially when they are not deferred.

• Unoptimized images; these increase the web page’s load time due to the longer time it takes the broswer to download the content.

• Third-party scripts; these delay interactivity, as the scripts have to run from top to bottom.

• Multiple server requests; these add latency.

TIP: You can use Lighthouse or PageSpeed to audit or check the performance of your web pages and optimize based on the recommendations.

In Conclusion

A whole lot goes into achieving this “magic” of looking up website addresses and giving us web pages with content that bring value to us. 🔥

Also, for frontend web engineers, understanding how the web works and how to easily optimize for the best user experience (UX) can give us the knowledge we need to build faster, more accessible, and more resilient web apps.

So the next time someone says that a web page is slow, you’ll know exactly where to look! ☺️

References and Further Reading

• What is HTTP and how does it work?

• What is an IP Address – Definition and Explanation

• What is DNS?

• Document Object Model (DOM)

• An Introduction and Guide to the CSS Object Model (CSSOM)

• JavaScript execution model