# One URL, Seventy Requests — narration script Runtime 8:43. Timecodes are when each chapter starts; the film's animation is keyed to these cue times, so a recorded voice-over should keep each line near its timecode. ## 0:00 · One URL, seventy requests - `0:01` You type one URL. You get one page. At least, that's how it feels. - `0:07` Open the Network panel and reload. The browser didn't make one request. It made dozens. In 2024, the median home page made around seventy. - `0:19` You asked for one document, but it arrived in many parts, some of them unexpected. ## 0:26 · HTML is a list of other URLs - `0:27` Remember the three inventions: a URL names a thing, HTTP fetches it, and HTML describes a document. The trick is what HTML does with other URLs. - `0:41` As the browser reads the HTML from top to bottom, every URL it meets becomes another HTTP request. A stylesheet. A script. An image. A video. An icon. An iframe, which is a whole other page. - `0:58` Each of those tags is a placeholder. An img tag holds no picture. It holds an address for one, and the browser fills the spot by fetching it. - `1:10` Fun fact: a data: URL carries the asset inside the address itself, trading one less request for a bigger document. - `1:21` So the HTML document is the root of a tree, and most of what it contains is a list of things to go get. ## 1:30 · Branches have branches - `1:31` And the tree keeps growing. Stylesheets request fonts and background images. Scripts fetch JSON, load more scripts, and sometimes load other organizations' scripts onto your page. That iframe brings its own HTML, with its own tree. - `1:50` Depth matters. A font can't be requested until the stylesheet that names it has arrived and been read. Three links in a chain means three waits, one after another. - `2:04` Developers call these critical request chains. Your users just call it waiting. - `2:10` Even if you never mention it, most browsers will ask your server for a favicon. The tree has a branch you didn't draw. ## 2:20 · An address plus a label - `2:20` Here's the part that makes the web so flexible. To the browser, every node in that tree is the same kind of thing: a URL, fetched over HTTP, with a label on the response that says what it is. - `2:37` That label is the Content-Type header, written as a MIME type. text/html. text/css. text/javascript. image/avif. application/json. font/woff2. - `2:56` When loading over a network, the browser goes by the label, not the file name. The same URL could return a page, a picture, or data, and the MIME type tells the browser what to do with it. - `3:11` Fun fact: MIME stands for Multipurpose Internet Mail Extensions. The web borrowed the idea from email, and it's now integral to how the web works. ## 3:23 · Hand it to a helper - `3:24` So the details of a Content-Type matter. When a response arrives, the browser reads its type and asks: given this, what do I do? - `3:35` For text/html, parse it as HTML. For text/css, apply the styles. For text/javascript, run it in the JavaScript engine. For image/jpeg, draw the picture. And so on. - `3:53` A type can even launch another application, called a helper. A zip file might be handed to an unzip program on your system. - `4:03` URL schemes work the same way. A mailto: link opens your mail program, tel: makes your phone dial, and a custom scheme can open an app like Spotify. These aren't ancient ideas; they're how the web reaches beyond the browser. - `4:21` Danger: when a server leaves the type out, browsers guess. That's called MIME sniffing. It's convenient, but it has enabled content-sniffing attacks, so label your responses and tell the browser not to sniff. ## 4:38 · From tree to timeline - `4:39` Now flip the tree on its side. Every node becomes a bar on the loading timeline, and the shape of the tree becomes the shape of the load. - `4:49` Most requests go to your own server. Requests to other servers, the third parties, need their own setup before the first byte: look up the name, open a connection, negotiate encryption. - `5:05` First party or third party, the mechanism is the same. The difference is control. 92% of pages load something from a third party, and they do it at some risk, because you don't control its speed, its uptime, or what it does with your users. ## 5:26 · Fewer bytes, fewer trips - `5:27` Two tools shrink the timeline. Compression squeezes text, the HTML, CSS, JavaScript, and JSON, often to a fraction of its size. The browser says which encodings it accepts, and the server labels what it sent. - `5:44` Images and video are already compressed, so for them, the savings come from your choices: format, dimensions, and quality. - `5:56` Caching skips the trip entirely. A Cache-Control header says how long a response stays fresh. Put a fingerprint in the file name, and you can cache it for a year, because a new version gets a new URL. - `6:14` The fastest request is the one you never make, so cache it if you can. - `6:19` Caching myth: loading a popular library from a shared CDN doesn't help reuse. Browsers keep a separate cache for each site, so a copy fetched for someone else's site isn't reused on yours. ## 6:35 · Who waits for whom - `6:35` Last, the tree decides who waits for whom. A plain script tag in the head stops the HTML parser until the script downloads and runs. - `6:48` Stylesheets block rendering, on purpose, so you don't see a flash of unstyled content. Images block neither. They fill in as they arrive. - `7:00` And you control most of this with a word or two. Defer lets a script download in parallel and run after the HTML is parsed. Async runs it as soon as it arrives. Module scripts are deferred by default. - `7:17` loading="lazy" holds back images that are off-screen. Preload and preconnect start important work early, and fetch priority tells the browser what matters most. - `7:32` Same page, two trees. With the right hints you help the browser; in the critical path, you slow everything down. How you build the page shapes delivery, even when the byte count is the same. ## 7:48 · Design the tree - `7:49` So a page isn't a file. It's a tree of addresses, each fetched over HTTP and labeled with a type. That one simple idea lets the web carry any kind of content, and hand off whatever it can't handle. - `8:06` When you build a page, you aren't just writing markup. You're designing a tree, and its shape decides how it loads for everyone on the other end. - `8:17` Try it yourself. In Chrome's Network panel, hold Shift and hover over a request. You'll see who asked for it, and what it asked for in turn. - `8:29` Next, the Availability lesson: is the page there at all, and did it arrive while the user still cared?