Critical rendering path
Separate discovery, parsing, execution and painting before changing a resource attribute.
Predict first
Before you read: predict
A proctor-console response contains a stylesheet link in its head and a heading in its body, with no scripts. The harness holds the stylesheet response and waits until the HTML has arrived.
Which pair describes heading DOM presence and contentful paint before the release?
The 30-second version
Use separate browser records for discovery, parsing, execution and painting. Loading a document is a chain of dependencies, so a visible symptom can belong to different stages. Test states and order with a local barrier before changing an attribute. [S1–S3]
Separate discovery, parsing, execution and painting before changing a resource attribute.
How it works
Step 1 of 8
Analogy: A screen-print press
A printmaker needs both the stencil and the agreed ink mix before making the first impression. Preparing the stencil resembles constructing visible content; mixing the ink resembles preparing styling. Having a finished stencil alone does not mean the first impression exists. A visitor can inspect the stencil on the bench while the ink is still being prepared.
The operator may stop reading the setup instructions at a mandatory machine adjustment. An assistant can still scan later instructions and fetch supplies. Fetching a squeegee proves that someone discovered its name, not that the operator has reached that instruction. This distinction is the useful part of the analogy: readiness to request something and permission to continue executing are different states.
| Print shop | Browser |
|---|---|
| Stencil ready, ink pending | DOM available, matching stylesheet unresolved |
| Mandatory adjustment holds operator | Classic script holds parser |
| Assistant fetches later supplies | Speculative preload scanner |
| Advance requisition names a supply | Explicit preload hint |
In real terms, a request waterfall is not a DOM trace. Limits: browsers may paint incrementally; there is no requirement to finish the entire document before any pixel. A preload also needs compatible URL, destination and credentials to be reused. The assistant analogy does not promise a request ordering between unrelated resources. [S1, S3]
Examples, run for real
4.1 ExamHall: styles and the first console heading
EXH-1560 concerns a console whose heading exists in the DOM while its initial stylesheet is held. MR !1760 adds a diagnostic that records DOM availability separately from the Paint Timing API. In browser.mjs, the local server sends all HTML and holds only the CSS response. The browser can find the heading; it has no first-contentful-paint entry. After release, the entry appears. This identifies a rendering dependency, not an empty response or a missing component. [S1]
The capture records DOM availability and Paint Timing separately, then confirms a paint only after the stylesheet barrier opens. It contains no elapsed duration. A blank screenshot alone would not distinguish a missing node from unresolved styling.
4.2 Catalog: dependent scripts
The catalog loads scripts a and b. The server releases b before a. Deferred scripts still record their source order, followed by DOMContentLoaded. Ordinary modules give the same order in this fixture. Async scripts record completion readiness instead: b then a. The fixture deliberately does not grade async against DOMContentLoaded, whose relative placement is not guaranteed. [S2]
The capture distinguishes document order from readiness order without relying on a duration. Neither defer nor module means the browser waits to start fetching until parsing completes. Their execution gate is the relevant distinction. Changing a dependency chain to async without changing its dependency assumptions can therefore produce a program that starts its consumer before its producer. This example examines two simple independent module files; imported dependencies and top-level await require additional care and are outside its observed ordering.
4.3 Catalog: discovery ahead of execution
A held classic script precedes an image. The image request arrives while its element is absent from the DOM. A second fixture puts a fetch preload before that script and creates another fetch inside a later inline script. Only the preloaded request arrives before release. Preload is useful when the resource's ordinary discovery otherwise depends on unavailable script execution. [S3]
The capture distinguishes a resource request from the DOM node that eventually uses it, and it records whether a declared fetch is already present while the script is held. These observations establish discovery boundaries, not a guarantee that every resource should be preloaded. A hint for unnecessary data can compete with useful work. Connection establishment belongs to net-connection-setup-http-versions; the eventual largest painted element belongs to perf-lcp. Neither those protocol details nor the LCP metric is needed to interpret this experiment.
Try it
Answer first, then check. Nothing is saved.
Question 1 of 4
A catalog's DOMContentLoaded listener snapshots the length of an array. Two external deferred scripts each append one marker; their responses are released in reverse source order.
What count does the listener snapshot?
Question 2 of 4
Two module scripts carry the same scheduling attribute. The server holds both responses and makes b available before a.
Which execution trace should the harness predict?
Question 3 of 4
A held classic script precedes the catalog's normal data fetch. Three proposed head changes are run against that same page.
Which produces a matching-fetch/incidental-request trace of [true,0] before the script is released?
Question 4 of 4
A document contains a held external classic script followed by a product marker.
Which before/after-release DOM pair should the inspector predict for that marker?
Go deeper
Pro tip
Name the observation before collecting it: request, node, execution marker or painted content. Record browser version alongside it. A performance trace is easier to interpret when every marker has a precise meaning; do not substitute one kind of evidence for another.
Sources
- S1: MDN, Critical rendering path, fetched 2026-09-29. DOM, CSSOM, render tree and rendering dependencies.
- S2: WHATWG, HTML Standard, script processing, fetched 2026-09-29; MDN, script element, fetched 2026-09-29. Classic, async, defer, module and DOMContentLoaded scheduling.
- S3: MDN, How browsers work, fetched 2026-09-29, preload scanner; and Speculative loading, fetched 2026-09-29. Explicit preload; browser observations additionally constrain the examples.
Related lessons
Checked against the tools and docs as of 2026-09-29.