WHO IS INVOLVEDThe active part is highlighted
THIS STEP
At this moment
- From
- To
- Data
- Result
Why does this happen?
Where can you see it?
Rule
GUIDE 02 / THE WEB
What happens when you open a website?
Trace a first visit to this site's homepage, from the address bar to the pixels on your screen. Add each part when the browser needs it.
BUILD THE FLOWSTEP 01 OF 12
FULL SYSTEM VIEW
From name to pixels
The browser solves three separate jobs to show one page.
01 / FIND AND TRUST
URL → DNS resolver → IP address → Cloudflare edge → TLS certificate
DNS finds a destination. TLS checks that the endpoint may speak for the host.02 / FETCH BYTES
GET / → Pages asset → HTTP response → HTML + CSS requests
Browser and edge caches can each shorten this path on later visits.03 / DRAW AND USE
HTML → DOM → CSSOM → layout → paint → interaction
Parsing, downloads, and rendering can overlap. The screen may appear before loading is finished.Trace this site: https://systems-from-zero.pages.dev/ → index.html → home.css → visible homepage These are the deployed files for the current static example; protocol, cache, and edge choices can differ by visit.
SEE IT YOURSELF
Read a real browser trace
Use DevTools to connect the diagram to an actual visit.
Open Network first
Open DevTools → Network, enable Disable cache, then reload. Click the document row. Inspect URL, status, protocol, Timing, and response headers.
Compare a normal reload
Turn Disable cache off and reload. Look for cached sizes, an ETag request, or 304. DNS and connection phases may disappear if reused.
Navigate away and back
Return with the Back button. The page may restore from back/forward cache with no new document request. This is different from HTTP cache.
The path is conditional
First visit URL → DNS → connection → request → response → render
Warm visit saved response or reused connection may skip work
HTTP/2 uses TCP; HTTP/3 uses QUIC and integrates TLS into its connection setup. A dynamic app may also add application code and a database after the edge. This site's worked example is static.Find a problem by its layer
DNS error: the browser did not obtain a usable address. Check hostname and resolver.
Connection or TLS error: the address was found, but transport or certificate validation failed.
404 or 5xx: HTTP reached a server; inspect the path and server response.
Unstyled or blank page: HTML may have arrived; inspect CSS, scripts, and console errors.
Visible but slow to use: inspect main-thread JavaScript and later resource work.
What changes on other sites?
Dynamic HTML: an application server may authenticate a user and query a database before returning HTML.
JavaScript app: the first document may be small while scripts build much of the UI later.
Service worker: installed code can answer some requests from its own cache.
Redirects: the browser may repeat parts of the request path at a new URL.
Other hosts: images, fonts, or APIs on another host may need another DNS answer and connection.
Key terms
URL The resource address, including scheme, host, and path.
DNS resolver Finds an IP address for a host, often using saved answers.
Authoritative DNS The source of a domain's DNS records.
CDN edge A nearby server that can deliver a site's content.
TLS Checks the server's certificate and protects the connection.
HTTP The request and response rules used to ask for web resources.
DOM and CSSOM Browser structures for document content and styles.
Paint Turning layout into visible pixels.
ETag A response version marker used for validation.
Sources and scope
This is a teaching trace of a first visit to a static Cloudflare Pages site. The steps reveal dependencies, but browsers can overlap work or skip steps through caches and reused connections. DNS answers, protocol choice, edge location, and timing must be observed on a real visit; the guide does not claim they are fixed for this domain.