The Anatomy of a Page Load
Walk through what actually happens between typing a URL and seeing a fully interactive page, so you understand where performance is won or lost.
The Anatomy of a Page Load is a free Web Performance Optimization & Lighthouse lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Web Performance Optimization & Lighthouse learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
From URL to Pixels
A page load runs a fixed sequence: DNS, TCP/TLS handshake, request, response, parse, render, interactivity. Each step adds latency — and shows you where to optimize.
DNS Resolution
First the browser resolves a hostname to an IP via DNS. A cold lookup can cost 20-120ms; caching and dns-prefetch cut it down.
<link rel="dns-prefetch" href="https://cdn.example.com">Connection Setup
Next come the TCP and TLS handshakes — round trips that hurt on high-latency networks. preconnect warms the connection in advance.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>Time To First Byte (TTFB)
TTFB measures the wait until the response's first byte arrives. It captures network latency plus server time, and delays everything after it.
Parsing the HTML
As bytes arrive, the browser parses HTML into the DOM tree. It also finds linked CSS and JS, which can pause parsing (render-blocking).
Building the Render Tree
The browser merges the DOM with the CSSOM into a render tree, then runs layout (geometry) and paint (pixels) to put content on screen.
First Contentful Paint
First Contentful Paint (FCP) is the first moment the user sees any text or image — the earliest real signal the page is loading.
JavaScript Execution
Scripts must be parsed, compiled, and run on the main thread. Heavy JavaScript blocks rendering and input, dragging down interactivity.
Reaching Interactivity
The page is truly usable only when the main thread is free for clicks. Time to Interactive and Total Blocking Time capture this final stage.
Inspecting the Timeline
DevTools' Performance panel and the PerformanceNavigationTiming API expose every phase — DNS, connection, TTFB, paint — for precise measurement.
const nav = performance.getEntriesByType('navigation')[0];
console.log('TTFB:', nav.responseStart);
console.log('DOM done:', nav.domContentLoadedEventEnd);Where to Optimize
Optimize by layer: prefetch and CDN for network, caching to cut TTFB, fewer render-blocking assets, and smaller, deferred JavaScript.
Quick Check
Which metric measures the delay until the first byte of the server response arrives?
Recap
You traced a load from DNS through connection, TTFB, parsing, render tree, FCP, JS, and interactivity. Each phase shows where to reclaim seconds.
Frequently asked questions
Is the “The Anatomy of a Page Load” lesson free?
Yes — the full text of “The Anatomy of a Page Load” is free to read here on the web, and the Web Performance Optimization & Lighthouse course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Web Performance Optimization & Lighthouse course, upgrade to CoddyKit PRO.
What will I learn in “The Anatomy of a Page Load”?
Walk through what actually happens between typing a URL and seeing a fully interactive page, so you understand where performance is won or lost. You practise Web Performance Optimization & Lighthouse with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Web Performance Optimization & Lighthouse?
No prior experience is required. Web Performance Optimization & Lighthouse on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “The Anatomy of a Page Load” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Web Performance Optimization & Lighthouse lesson?
Yes. Every Web Performance Optimization & Lighthouse lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- What is Web Performance?
- Why Performance Matters
- Key Performance Metrics
- The Anatomy of a Page Load