Diagramium
🌐 Narrated diagram

What happens when you open a website

The half second between pressing enter and seeing a page, unpacked hop by hop: name lookup, connection, encryption, request, server, and the paint on your screen.

15 steps3 min readNarrated with a studio voice
What happens when you open a websiteenter pressedhost namecache missanswernumeric addresssocket opensecure channelGET requestnot cachedqueryrowscompressed markupneeds assetslayout and paintA source or sink outside the system (person or system)You type a web addressA transform that changes data1Browser parses the addressA transform that changes data2Local caches checkedA transform that changes data3DNS resolves the nameWhere data rests — a file, table or databaseAnswer cached with a TTLA transform that changes data4TCP three way handshakeA transform that changes data5TLS encryption agreedA transform that changes data6HTTP request sentA transform that changes data7CDN edge answers if it canA transform that changes data8Origin server runs the appWhere data rests — a file, table or databaseDatabase returns the dataA transform that changes data9Response streams backA transform that changes data10Markup parsed into a treeA transform that changes data11Images, styles and scripts fetchedA source or sink outside the system (person or system)Pixels painted on screen
What happens when you open a website — the complete diagram. Press Present to watch it build itself.
Step 1 of 15

You type a web address

You type an address and press enter. What feels instant is really a relay race across a dozen machines, often on two or three continents, and the whole thing usually finishes in under half a second.

Step 2 of 15

Browser parses the address

The browser first splits what you typed into parts: the scheme, the host name, the path. Only the host name matters right now, because the browser still has no idea which machine on Earth answers to it.

Step 3 of 15

Local caches checked

Before asking anyone, it checks its own memory, then the operating system's underneath. A site you visited a minute ago can skip the next several steps entirely, which is exactly why the second visit feels so much faster.

Step 4 of 15

DNS resolves the name

If nothing is cached, a resolver goes hunting for the numeric address behind the name. It may question a root server, then a top level server, then the domain's own name server, and still finish in well under a tenth of a second.

Step 5 of 15

Answer cached with a TTL

The answer arrives with a time to live, a countdown in seconds. Set it to three hundred and the world forgets your address in five minutes. Set it to a day and moving servers takes a day to reach everyone.

Step 6 of 15

TCP three way handshake

Now the browser opens a connection. Your machine says hello, the server says hello back, your machine confirms. That three way handshake costs one full round trip before a single byte of the actual page has moved.

Step 7 of 15

TLS encryption agreed

Then encryption. The server proves its identity with a certificate, both sides agree on a secret key, and from here everything is unreadable to anyone in between, including the cafe wifi and your internet provider.

Step 8 of 15

HTTP request sent

Finally the request itself: a short block of text naming the page you want, the browser you are using and any cookies for this site. It is often smaller than a single paragraph of this narration.

Step 9 of 15

CDN edge answers if it can

Most requests never reach the real server. A content delivery network keeps copies in hundreds of cities, so the reply can come from a machine a few miles away instead of a data centre an ocean apart.

Step 10 of 15

Origin server runs the app

For anything personal, the origin server runs your request through actual code: check the session, look up the account, decide what this particular person is allowed to see on this particular page.

Step 11 of 15

Database returns the data

The application asks a database for the pieces it needs. A well tuned query answers in a millisecond or two, while one missing index can turn that same query into a two second stall the whole page waits on.

Step 12 of 15

Response streams back

The response streams back compressed, usually with gzip or brotli, which typically shrinks a page to a quarter of its size. The browser starts work on the first bytes long before the last ones arrive.

Step 13 of 15

Markup parsed into a tree

The browser reads the markup and builds a tree of every element, then a second tree of styles. A typical news page carries a couple of thousand elements, and those two trees together decide what each box is, where it sits and what colour it gets painted.

Step 14 of 15

Images, styles and scripts fetched

The page is really just a shopping list. Images, fonts, scripts and stylesheets each need their own fetch, and a typical modern page pulls in about seventy of them, many travelling at once down the same connection.

Step 15 of 15

Pixels painted on screen

Layout, paint, done. All of that happened while your finger was still leaving the enter key. Click a link on the same site and the browser reuses the open connection, skipping straight past the lookup and the handshake.

Watch it explain itself

Every step above is narrated aloud. Play it, or open it in the editor and make it yours — no account needed.