Olivier Belaud
FR
February 2, 2025•5 min read

How Does a Web Interface Work? From Loading to Final Render

From DNS request to JavaScript execution: discover every step of page loading and how to optimize it.

When you load a web page by typing a URL into your browser, a specific process kicks in to retrieve and display that page. This process involves several steps that progressively render the page, execute JavaScript, and load data via APIs if necessary.

In this article, we detail each step, highlighting the role of the server and APIs in generating web pages.

1. The Initial Request: Contacting a Server or CDN

When a user types a URL in their browser (e.g., https://example.com), the following happens:

  1. The browser parses the URL and finds the corresponding IP address through a DNS server.
  2. An HTTP request is sent to ask for the web page.
  3. The server or a CDN (Content Delivery Network) responds with the requested page.

Server vs. CDN: What’s the Difference?

  • Server: A remote computer (using Apache, Nginx, Node.js, etc.) that generates and sends pages.
  • CDN: A network of servers distributed around the world that stores copies of static files (HTML, CSS, images, etc.) to deliver them faster to users.

Example:
A site hosted in the United States might serve a European user via a local CDN copy instead of waiting for a response from the American server.

2. Dynamic Page Construction on the Server (if necessary)

Before sending the HTML to the browser, the server might need to generate dynamic content.

There are two types of pages:

  1. Static Pages → Served directly without processing (e.g., a ready-made HTML file).
  2. Dynamic Pages → Generated on demand, often requiring server-side API calls.

How Does a Dynamic Page Work?

  • The server executes a script (PHP, Node.js, Python, etc.).
  • It retrieves data from a database or an external API.
  • It generates an HTML file with the integrated data.
  • The final HTML is then sent to the browser.

Example:
PHP Code Block Placeholder

Advantage:
Content is already embedded in the HTML, so no additional client-side API call is needed.

Disadvantage:
It might be slower because each request must be processed by the server before being sent.

3. Receiving and Displaying the HTML File

Once the server response is received, the browser parses the HTML file and starts building the page structure.

What Does the HTML File Contain?

  • The page structure (<head>, <body>, etc.).
  • Links to CSS files (e.g., <link rel="stylesheet" href="styles.css">).
  • References to JavaScript files (e.g., <script src="app.js"></script>).

What Happens at This Stage?

  • The browser reads the HTML and immediately displays the raw text content.
  • CSS and JavaScript are not yet loaded, so the page might appear unstyled and non-interactive.

4. Loading and Applying CSS

Next, the browser downloads the CSS files referenced in the HTML to apply visual styling.

CSS Functions:

  • Define colors, fonts, and spacing.
  • Position elements (using flexbox, grid, etc.).
  • Manage animations and transitions.

Why Can CSS Slow Down Loading?

A large CSS file might block rendering until it is fully loaded.

Possible Optimizations:

  • Use Critical CSS to load essential styles first.
  • Minify CSS files to reduce their size.

5. Downloading Fonts and Images

The browser also begins to retrieve images and font files used on the page.

Why Do Some Fonts Take Time to Appear?

  • Web fonts (such as Google Fonts) must be downloaded before they can be applied.
  • Some browsers hide text until the font is available (leading to a flash of invisible text, or FOIT).

Possible Optimizations:

  • Use font-display: swap; to show a temporary font until the custom font loads.
  • Preload fonts using <link rel="preload" as="font" href="font.woff2">.

6. Downloading and Executing JavaScript

The browser then retrieves JavaScript files, which add interactivity to the page.

JavaScript Functions:

  • Handle user events (clicks, form submissions, animations).
  • Dynamically update page content.
  • Make API requests for real-time data loading.

Why Can JavaScript Slow Down a Page?

Blocking JavaScript can delay the rendering of the rest of the site.

Possible Optimizations:

  • Load scripts asynchronously (async) or defer their execution (defer).
  • Implement code-splitting to load only what is necessary.

7. Executing JavaScript and Enabling User Interactions

After the JavaScript executes, the page becomes fully interactive.

What Does "Interactive" Mean?

  • Buttons respond to clicks (using onclick or addEventListener).
  • Animations and transitions become active.

8. Loading Data via API (if needed, Client-Side)

If the page requires additional data, client-side API calls are made.

Examples of API Calls:

  • Loading products for an e-commerce site.
  • Displaying a live-updating news feed.

How Are These API Calls Made?

JavaScript Code Block Placeholder

Impact on User Experience:

These requests often display a loader while waiting for the server response.

Conclusion: The Lifecycle of a Web Page

  1. The browser sends a request to the server/CDN.
  2. The server may dynamically generate HTML via server-side API calls.
  3. The HTML is downloaded and immediately displayed.
  4. CSS and fonts are loaded to apply styling.
  5. Images are downloaded to complete the visual presentation.
  6. JavaScript is downloaded and executed, making the page interactive.
  7. Client-side API calls may be made to fetch dynamic data.

Understanding these steps is key to optimizing both loading times and overall user experience.

Decode e-commerce tech

Clear insights to make the right technical decisions, even if you're not a dev.