A browser can start building the document tree while HTML bytes arrive. Styles contribute to the layout and paint decision, while scripts can modify the tree and may pause parsing when loaded synchronously in the wrong place. The critical path is a dependency graph, not a single download timer. A page should send useful text and navigation in HTML, reserve stable dimensions for an important image, and load behavior after the parser can see the controls it will enhance. A deferred script runs after HTML parsing and preserves order among similarly deferred scripts; an asynchronous script is better suited to work that does not depend on document order. This lesson treats JavaScript as an enhancement to a readable case record rather than the sole carrier of its content.
Page loading: keep content available while CSS and scripts arrive
Case study
A case page shows the title, status, and record body before any enhancement runs. Its stylesheet can establish the layout, and a deferred local script adds a copy control after the document is parsed. An image of equipment declares width and height so surrounding copy does not jump when pixels arrive. If the script fails, readers still get the case facts and links. If CSS fails, the document's semantic order still makes sense. The browser may choose a different image resource at a different viewport width, but the visible purpose and text alternative stay the same.
Working contract
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Case 47 | AI Trove</title>
<link rel="stylesheet" href="/assets/case.css">
<script src="/assets/case-actions.js" defer></script>
</head>
<body>
<main>
<h1>Pump inspection, case 47</h1>
<p>Status: review pending</p>
<img src="/assets/pump-47.webp" width="640" height="360" alt="Pump 47 beside its inspection label">
<p>The service valve was checked at 08:30.</p>
</main>
</body>
</html>Cost and tradeoffs
Parsing work grows with document and stylesheet size; script execution adds main-thread work that can delay interaction. The example has one stylesheet and one deferred script, but a real page's transfer budget includes fonts, images, and third-party code. Width and height reserve layout space but do not make a large image cheap to download. Measure the rendered page at real viewports and input conditions before adding resource hints or more scripts. The complexity of an interaction handler is separate from the browser's parsing and painting costs.
Common Mistakes
- Do not make the script download the only copy of essential case text.
- Do not use async for a script that depends on earlier scripts executing first.
- Do not omit image dimensions when the page can reserve a stable box.
- Do not describe a fast network response as proof of a fast rendered page.
Continue through the stack
HTML document skeleton: declare language, encoding, and a real title; HTML script loading: choose ordered defer or independent async work; HTML srcset and sizes: let the browser choose an appropriately sized image; Responsive CSS: keep reading order and controls usable.
Failure trace
A page ships a useful case title only in a late API response. The server returns 200 immediately, so a synthetic response-time check looks healthy, but a slow browser shows an empty main region while scripts download and execute. Put essential case text in the initial HTML, defer dependent enhancement, and reserve the image box. Inspect the rendered state, not just the network waterfall's first line.
Verification
- Disable scripts and verify the case title, status, and navigation are still readable.
- Throttle script delivery and observe when the first meaningful text becomes visible.
- Delay the main image and confirm declared dimensions prevent nearby text from moving.
Decision note
The request critical path includes transfer, parsing, style calculation, layout, and script work. Reducing one response's size may not improve the page if a blocking dependency remains ahead of useful content.