A page is many files
Open shop.example and your browser doesn't get one file. It gets an HTML document, and the HTML points to more: a stylesheet, a script, a logo, a hero image, a grid of product photos, and a font the stylesheet asks for. Twelve files for this small page; real pages often need dozens.
Watch the browser window: the page fills in as each file lands. Below it, the waterfall has one row per file, showing when it was requested and when its bytes arrived. The page is done when the last row ends.
Right now the browser speaks HTTP/1.1, the version that carried the web for almost twenty years. Every version in this lesson loads this same page, so keep an eye on the timer.
The stage runs ten times slower than real life. Timers show real milliseconds for a server 100 ms away.
<!doctype html><link rel="stylesheet" href="/style.css"><script src="/app.js" defer></script><img src="/logo.svg" alt="shop.example"><img src="/hero.jpg" alt=""><img src="/p1.jpg"> <img src="/p2.jpg"> …
font.woff2 isn’t in the HTML: style.css asks for it, so the browser only finds it once the CSS has arrived.