DNS to WebSockets: the terms that decide how long before the first byte, which bytes are fetched at all, in what order, and what is reused from cache.
The terms that decide how long before the first byte: resolving, connecting, the protocol, and the hints that move work earlier.
Turning a hostname into an IP address by asking a recursive resolver, which walks root, TLD and authoritative servers and caches the answer for its TTL.
in practiceThe "DNS" segment at the start of a Network waterfall row; dns-prefetch and preconnect hints; a slow first visit from a new country.
SYN, SYN-ACK, ACK: one round trip before a single byte of HTTP can be sent on a new connection.
in practiceThe "Initial connection" segment in the waterfall; why connection reuse and preconnect matter on high-latency mobile networks.
Agreeing keys and verifying the server's certificate before encrypted traffic flows; one round trip in TLS 1.3, two in 1.2.
in practiceThe "SSL" segment in the waterfall; certificate errors; why TLS 1.3 and session resumption cut first-byte time.
Round-trip time: how long a packet takes to reach the server and come back; the unit every handshake and request is paid in.
in practiceWhy a page that is fast in the office is slow in Lagos on 3G: every serial round trip multiplies the RTT.
Time to first byte: from the request starting to the first byte of the response arriving; DNS, connect, TLS and server think time combined.
in practiceThe first phase of LCP; the "Waiting for server response" bar in DevTools; server-side caching and CDNs move it.
One request at a time per connection; browsers open about six connections per origin to get parallelism, and a slow response blocks the ones behind it.
in practiceDomain sharding and sprite sheets, both now anti-patterns; the "Stalled" segment when all six connections are busy.
Many requests multiplexed as streams over one TCP connection with compressed headers; head-of-line blocking moves down to TCP.
in practiceThe "h2" protocol column in Network; why bundling everything into one file matters less than it did.
HTTP over QUIC, a UDP-based transport with TLS built in and per-stream loss recovery, so one lost packet stalls only its own stream.
in practiceThe "h3" protocol column; better tail latency on lossy mobile networks; connection migration when a phone switches from Wi-Fi to cellular.
A slow or lost item at the front of a queue holding up everything behind it, at whichever layer the queue lives.
in practiceHTTP/1.1 response queues, TCP packet loss under HTTP/2, a render-blocking script in the HTML parser.
Keeping a connection open for further requests so the DNS, TCP and TLS costs are paid once per origin rather than per request.
in practiceThe "Connection ID" column in Network; why third-party origins cost more than their bytes.
A network of edge servers near users that cache responses so most requests never travel to the origin.
in practiceThe "x-cache: HIT" response header; static assets with long cache lifetimes; edge functions running near users.
A hint telling the browser to do DNS, TCP and TLS to an origin now, because a request to it is coming.
in practicelink rel=preconnect for the font or API origin; it saves the handshakes from the critical path.
The terms that decide what is fetched at all, in what order, and what stays open.
A hint to fetch a specific resource early at high priority because the page will need it, before the parser discovers it.
in practiceThe LCP hero image or a font referenced only from CSS; the console warning when a preloaded resource is not used within seconds.
The browser's per-request priority (highest to lowest) and the fetchpriority attribute that nudges it.
in practiceThe Priority column in Network; fetchpriority="high" on the LCP image; low on below-the-fold carousels.
A low-priority fetch of something a likely next navigation will need, stored in the HTTP cache.
in practicelink rel=prefetch for the next route's chunk; Speculation Rules prerender for whole pages.
The browser's store of responses keyed by URL, reused according to Cache-Control so repeat requests skip the network.
in practiceThe "(disk cache)" and "(memory cache)" size column entries; hashed filenames with year-long max-age.
The response header that says who may cache a response and for how long: max-age, no-cache, no-store, private, immutable, stale-while-revalidate.
in practiceimmutable, max-age=31536000 on hashed assets; no-cache on HTML; private on personalised API responses.
A version tag on a response; when stale, the browser asks "If-None-Match" and the server answers 304 with no body if unchanged.
in practiceThe 304 rows in Network: small, but each still a round trip.
Serve the cached response immediately even if slightly stale, and refresh it in the background for next time.
in practiceCache-Control directive for feeds and config; the same idea in SWR and TanStack Query on the client.
Cross-Origin Resource Sharing: the server opting in, via Access-Control-Allow-* headers, to let another origin's script read its responses.
in practiceThe red CORS error in the console; preflight OPTIONS requests; "Script error." when a cross-origin script lacks it.
An automatic OPTIONS request the browser sends before a non-simple cross-origin request to ask whether it is allowed.
in practiceExtra OPTIONS rows before PUT, DELETE or JSON POSTs; Access-Control-Max-Age caches the answer.
Encoding text responses smaller on the wire; Brotli beats gzip by 15 to 25% on JS and CSS.
in practicecontent-encoding: br in response headers; the two sizes in the Network size column (transferred vs resource).
A long-lived, full-duplex connection upgraded from HTTP, for messages in both directions without a request per message.
in practiceThe WS filter and Messages tab in Network; live prices, chat, presence; reconnect and backoff logic.
A one-way stream of text events from server to client over plain HTTP, with automatic reconnection built in.
in practiceEventSource; notification feeds and LLM token streaming; simpler than WebSocket when the client only listens.