What Browsers do to Load Site Content, Theme, and Javascript
Purpose
This page gives a simple, accurate overview of what a browser does during page load and why that work can affect speed.
The browser turns code into pixels
When a user visits a page, the browser generally:
- downloads the HTML
- parses HTML to build the DOM
- downloads and parses CSS to build the CSSOM
- combines DOM and CSSOM into a render tree
- calculates layout (sizes and positions)
- paints pixels
- composites layers for display
Authoritative references:
- Critical rendering path overview (MDN): https://developer.mozilla.org/en-US/docs/Web/Performance/Guides/Critical_rendering_path
- RenderingNG architecture (Chrome for Developers): https://developer.chrome.com/docs/chromium/renderingng-architecture
JavaScript changes the timeline
JavaScript can:
- block parsing when it runs during HTML parsing
- add main thread work that delays layout and paint
- attach event handlers that run during early interaction
Authoritative references:
- Optimize JavaScript execution (web.dev): https://web.dev/articles/optimize-javascript-execution
- Optimize long tasks (web.dev): https://web.dev/articles/optimize-long-tasks
Why users experience delays
Users see slowdowns when the browser is busy:
- content appears later
- inputs feel laggy
- the layout shifts as late content is inserted
These outcomes map to Core Web Vitals concepts:
- Core Web Vitals overview (web.dev): https://web.dev/vitals/
How this connects to Speed Layer
Speed Layer focuses on early phase ordering and execution timing so the browser can prioritize:
- the most important content
- layout stability
- responsiveness
Related pages:
- What Happens When a Page Loads (Simple Explanation)
- What “Blocking” vs “Non-Blocking” Means