What happens when you press Enter?
In about a second, your browser goes on a trip across the world and comes back with a page. Type any website and watch every step.
The trip, step by step
Fifteen little steps in six parts. Press play and watch, or tap any step. It takes about 2 minutes.
You type a name
You tell the browser where you want to go. First it checks: is this the name of a website, or something you want to search for?
Grown-ups call this URL parsing.
Did you know?
URL is short for Uniform Resource Locator. That is a very long way to say "address".
Make the trip faster
Move the shop, change your internet, and see what makes the trip quick or slow. The secret: counting trips there and back.
1.09s
Quick, but you notice the wait
4 trips there and back, 135 ms each
- Find the address115 ms
- Knock on the door135 ms
- Secret code135 ms
- Ask and wait285 ms
- Bring it home267 ms
- Build and draw150 ms
The shop is far away and slow to cook the page. A copy shop nearby (CDN) can answer from down the road.
Your trip, for real
This all happened to you a moment ago, when you opened this page. Your browser keeps a stopwatch for every step.
Reading your stopwatch…
Put the trip in order
Can you remember the trip? Tap the cards in the order they happen.
- 1What comes next?
- 2
- 3
- 4
- 5
- 6
- 7
- 8
Start with the very first thing that happens.
Answer it in an interview
This part is for the grown-ups. It is one of the most asked questions in web developer interviews, and now you know the whole story.
The one-minute answer
- Resolve
The browser parses the input, decides it is a URL, applies HSTS, and checks its caches. Then it resolves the host through DNS: browser and OS caches, a recursive resolver, and on a miss the root, TLD and authoritative name servers.
- Connect
It opens a TCP connection, one round trip, then runs a TLS 1.3 handshake, one more, verifying the certificate chain against trusted roots. HTTP/3 over QUIC folds both into a single round trip.
- Request and response
It sends an HTTP GET with headers and cookies. A CDN edge answers from cache or forwards to the origin, which renders the HTML. The response streams back: status, headers, then the compressed body.
- Parse
The parser builds the DOM as bytes arrive while the preload scanner fetches CSS, scripts and images. CSS becomes the CSSOM and blocks rendering; classic scripts block parsing unless they are async or defer.
- Render
The DOM and CSSOM form the render tree, then layout computes geometry, paint records drawing commands, and the compositor rasters layers and draws them on the GPU.
- Interactive
Scripts run, DOMContentLoaded and load fire, and the event loop handles input one task at a time. Short tasks keep the page responsive, which is what INP measures.
What they ask next
What is different on the second visit?
Most steps get skipped. DNS is cached until its TTL runs out. An idle connection may still be open, and TLS can resume a session. Hashed CSS and JS come straight from the HTTP cache, and the HTML is revalidated with ETag, often a tiny 304. The back button can restore the whole page from the back/forward cache.
What happens if the DNS lookup fails?
The resolver returns NXDOMAIN, or the lookup times out, and the browser shows its own error page. Negative answers are cached too, for the time the zone says, so a fixed record can take a little while to be seen.
HTTP/1.1, HTTP/2 and HTTP/3: what changes?
HTTP/1.1 sends one request at a time per connection, so browsers open about six per host. HTTP/2 multiplexes many streams on one TCP connection, but a lost packet still stalls them all. HTTP/3 runs on QUIC over UDP: streams are independent, the handshake is combined with TLS, and connections survive network changes.
Why is CSS render-blocking, but images are not?
Styles can change every box on the page, so painting without them would show unstyled content and waste a layout. An image only fills its own box. Give images a size so they do not shift the page when they arrive.
async or defer?
Both download in parallel with parsing. async runs as soon as it arrives, in any order, which suits independent scripts like analytics. defer runs after parsing, in document order, which suits code that needs the DOM. Module scripts are deferred by default.
Reflow, repaint, composite: which is cheapest?
Composite only is cheapest: transform and opacity skip layout and paint. A colour change needs paint. A change to size or position needs layout, then paint, then composite. That is why animations should use transform and opacity.
Where do redirects fit in?
Each redirect restarts the trip for the new URL, which can mean another DNS lookup, connection and handshake. Avoid chains, and use HSTS preload so http:// is upgraded inside the browser instead of by a redirect.
How would you make the first visit faster?
Cut round trips and bytes. Serve from a CDN, enable HTTP/3 and Brotli, preconnect to critical third parties, inline critical CSS, defer scripts, preload the LCP image with fetchpriority="high", and cache hashed assets for a year. Then measure with field data, not only Lighthouse.