What Happens When a Page Loads (Simple Explanation)
Purpose
This page provides a simple explanation of what happens when a page loads.
A simple timeline
When someone visits a page, the browser typically:
- downloads the HTML
- reads the HTML and discovers CSS, scripts, images, and fonts
- builds the page structure (DOM)
- builds the style model (CSSOM)
- calculates layout and paints pixels
- runs JavaScript to add interactivity
- continues loading additional resources
Why some pages feel slow
A page can feel slow when:
- key resources are discovered late
- CSS blocks rendering until it is downloaded and parsed
- JavaScript keeps the main thread busy
- third party scripts inject work during the early part of load
Authoritative references:
- Critical Rendering Path (web.dev): https://web.dev/articles/critical-rendering-path
- Critical rendering path overview (MDN): https://developer.mozilla.org/en-US/docs/Web/Performance/Guides/Critical_rendering_path
How to connect this to real metrics
Google’s Core Web Vitals map user experience to measurable signals:
- LCP relates to when the main content appears
- CLS relates to how stable the page is
- INP relates to how responsive interactions are
Reference:
- Core Web Vitals overview (web.dev): https://web.dev/vitals/
Related pages:
- What “Blocking” vs “Non-Blocking” Means
- Why Some Scripts Are Delayed on Purpose