How Browsers Load a Web Page

How Browsers Load a Web Page

How Browsers Load a Web Page


Understanding how a browser loads a web page is essential for anyone who works with websites—developers, designers, and even content creators. 

When you understand this workflow, you can optimize performance, fix rendering delays, and improve user experience and Core Web Vitals.


1. Step 1 — URL Input & DNS Lookup

The browser loading journey begins the moment a user types a URL like:

https://example.com

1.1 What happens next?

  1. The browser checks its internal cache for a DNS record.

  2. If not found, it queries the operating system DNS cache.

  3. If still not found, the OS sends a request to a DNS resolver.

  4. The resolver returns the IP address (e.g., 93.184.216.34) of the server hosting the website.


1.2 Why it matters

  • DNS lookup adds latency.

  • Slow DNS affects Time to First Byte (TTFB).



2. Step 2 — Establishing a TCP & TLS Connection

2.1 TCP Handshake

After DNS lookup, the browser must establish a connection using the TCP 3-way handshake:

  1. SYN

  2. SYN-ACK

  3. ACK

Only after this handshake can data start flowing.


2.2 TLS Handshake (If HTTPS)

For secure sites:

  • Browser verifies SSL certificate

  • Negotiates encryption algorithms

  • Establishes a secure session


2.3 Example: HTTPS Request Timeline

HTTPS Request Timeline



2.4 Optimization Tips

  • Use HTTP/2 or HTTP/3

  • Enable TLS 1.3

  • Use CDN for lower latency

  • Use OCSP stapling for faster certificate checks



3. Step 3 — Sending the HTTP Request

Once the connection is ready, the browser sends a request:

GET /index.html HTTP/1.1
Host: example.com
User-Agent: Chrome/123.0
Accept: text/html

The server receives this and returns a response.

Response Includes

  • Status code (200 OK)

  • Headers (cache-control, content-type)

  • Body (HTML content)



4. Step 4 — Browser Receives HTML & Starts Parsing

The browser does not wait for the entire HTML file to download.

It begins parsing immediately, generating a DOM (Document Object Model).


4.1 DOM Example

HTML:

<h1>Hello</h1>
<p>Welcome to the website.</p>


DOM Tree:

DOM Tree




4.2 Why DOM Creation Matters

  • JavaScript can block DOM creation

  • CSS might delay rendering

  • Improper script placement slows page load



5. Step 5 — Resource Discovery (CSS, JS, Images)

While parsing HTML, the browser discovers external resources:

Example:

<link rel="stylesheet" href="styles.css">
<script src="app.js"></script>
<img src="banner.jpg">

As soon as the browser sees these tags, it queues download requests.


5.1 Blocking Behavior

  • CSS is render-blocking

  • JS is parser-blocking (unless async/defer)


5.2 JavaScript

Use:

<script src="app.js" defer></script>

or

<script src="analytics.js" async></script>


5.3 CSS

Use media attributes:

<link rel="stylesheet" href="print.css" media="print">


5.4 Preload critical assets

<link rel="preload" href="main.css" as="style">



6. Step 6 — Downloading Resources

The browser uses multiple parallel connections to fetch assets.

6.1 With HTTP/1.1

  • Limited parallel requests

  • Combining files is beneficial


6.2 With HTTP/2 & HTTP/3

  • Multiplexing allows faster parallel downloads

  • Minify CSS/JS, but merging is optional


6.3 Caching

If a resource is cached, the browser may not download it.

Example cache header:

Cache-Control: max-age=31536000




7. Step 7 — Building the CSSOM (CSS Object Model)

Once CSS files download, the browser parses them to build the CSSOM.

Example CSS:

h1 { color: blue; }
p { font-size: 18px; }


CSSOM Tree:

CSSOM Tree





Why CSSOM is Important

Rendering cannot happen until:

  • DOM is ready

  • CSSOM is ready

Together, they form the Render Tree.



8. Step 8 — Blocking JavaScript Execution

JavaScript affects page rendering because it can modify the DOM and CSSOM.

8.1 Blocking Example

<script src="main.js"></script>

This stops HTML parsing until the JS file:

  • Downloads

  • Parses

  • Executes


8.2 Avoid This Using defer

<script src="main.js" defer></script>


8.3 Avoid This Using async

<script src="analytics.js" async></script>




9. Step 9 — Constructing the Render Tree

The Render Tree merges:

  • DOM

  • CSSOM

This tree represents what will actually be displayed.

Example:

HTML:

<div class="box">Hello</div>

CSS:

.box { display: block; color: red; }


Render Tree:


Render Tree






10. Step 10 — Layout (Reflow)

During layout, the browser calculates:

  • Positions

  • Sizes

  • Margins

  • Padding

  • Z-index

Example:

.box {
    width: 200px;
    margin-top: 40px;
}

Browsers compute the exact pixel values.


10.1 Layout is expensive

  • DOM changes trigger reflows

  • Nested elements multiply cost

10.2 Optimization Tip

Batch DOM edits:

Bad:

elem.style.width = "100px";
elem.style.height = "50px";

Good:

elem.style.cssText = "width:100px;height:50px";



11. Step 11 — Painting

Once layout is done, the browser paints:

  • Colors

  • Borders

  • Text

  • Shadows

  • Images

This step converts the render tree into pixels.



12. Step 12 — Compositing

If layers exist (transforms, fixed elements, animations), the browser composites them into the final display.

Example triggers new layers:

transform: translateX(20px);
will-change: transform;
position: fixed;

Compositing helps:

  • Smooth animations

  • Faster rendering



13. Complete Browser Rendering Flow (Diagram)

Here is a simplified diagram you can reuse in your article:




Complete Browser Rendering Flow





















14. Real-World Example of the Entire Process

User visits: https://shop.example.com


Behind the scenes:

  1. Browser performs DNS lookup

  2. Browser establishes HTTPS connection

  3. Sends GET request

  4. Receives HTML

  5. Starts parsing

  6. Encounters <link rel="stylesheet">

  7. Downloads CSS (blocks render)

  8. Encounters <script>

  9. Pauses parsing (unless deferred)

  10. Builds DOM & CSSOM

  11. Creates render tree

  12. Calculates layout

  13. Paints page

  14. Composites header, sidebar, and modal layers

The user sees the complete page in under 1 second with optimization.



15. Tips to Optimize Every Stage

15.1 Before HTML Loads

  • Use fast DNS

  • Use CDN

  • Enable HTTP/3


15.2 During HTML Parsing

  • Minify HTML

  • Avoid inline JS blocking


15.3 CSS Phase

  • Inline critical CSS

  • Use media queries (media="print")

  • Use preload for important assets


15.4 JS Phase

  • Use defer for scripts

  • Avoid manipulating DOM repeatedly

  • Lazy-load heavy libraries


15.5 Layout & Paint

  • Avoid overly complex nesting

  • Prefer CSS transformations over layout-changing animations

  • Combine layers wisely



16. Checklist for Developers

Performance Checklist

  • Use HTTP/2 or HTTP/3

  • Enable Brotli compression

  • Use <script defer>

  • Inline above-the-fold CSS

  • Use CDN for assets

  • Optimize images (WebP recommended)

  • Remove unused CSS with PurgeCSS

  • Minify HTML/CSS/JS



17. Conclusion

Every time a user opens a web page, the browser performs dozens of actions—DNS resolution, TLS handshake, parsing HTML, downloading resources, building DOM and CSSOM, layout, painting, and compositing.

When you understand these stages, you can dramatically improve your site's performance.

Popular posts from this blog

The Early Search Engines: Yahoo, AltaVista, and the Dawn of Web Discovery

Image
The Early Search Engines: Yahoo, AltaVista, and the Dawn of Web Discovery When the World Wide Web first became public in the early 1990s, it was a chaotic digital landscape — thousands of pages scattered across servers around the world, with no easy way to find what you were looking for.  There were no smart algorithms, no Google, and no social media recommendations.  To explore the growing web, users needed a way to search it.  That’s where the first search engines came in.  Among them, Yahoo! and AltaVista were the pioneers that shaped how people discovered information online and laid the foundation for the search-dominated internet we use today. 1. The Problem of Finding Information on the Early Web In the early 1990s, the World Wide Web was growing rapidly.  What began as a small collection of research and university websites quickly expanded into thousands of public pages.  But unlike libraries, the web had no index or directory system.  Us...
Read more

The Birth of Internet Cafes and Online Communities

Image
The Birth of Internet Cafes and Online Communities The late 20th century marked a revolution in human communication.  The internet, once confined to research labs and universities, began spreading into homes, schools, and cities across the globe.  But before every household had Wi-Fi or smartphones, there was another space where people first experienced the digital world together — the Internet Cafe .  At the same time, online communities emerged, connecting people through shared interests, conversations, and digital friendships.  Together, these two phenomena laid the cultural and social foundation of the modern connected world. 1. The Rise of the Internet Cafe: A Gateway to the Digital World In the early 1990s, personal computers and internet connections were still expensive and not widely available.  For many, the first experience of going online didn’t happen at home but in a small, bustling space filled with computers — the Internet Cafe . The world’s ...
Read more

How Hyperlinks Changed the World

Image
How Hyperlinks Changed the World When we think about the internet, we often picture web pages, social media platforms, or search engines.  Yet, one of the most transformative inventions behind all of these is something so simple that we almost take it for granted: the hyperlink .  This seemingly small innovation—blue underlined text that connects one document to another—became the foundation of how we navigate the web.  It not only changed the way we access information but also reshaped communication, education, business, and even the way we think. 1. The Origins of the Hyperlink Idea The concept of linking information predates the modern web by several decades.  The first visionary to describe a system resembling hyperlinks was Vannevar Bush , an American engineer and science administrator.  In his 1945 essay “As We May Think” , Bush described a theoretical machine called the Memex , which would allow users to store books, records, and communications, and to...
Read more