How a page loadsRecap
Keep the chain in your head.
Recall each idea before revealing it, then go to the sources.
Why can a fast server still give a slow first visit?
Reveal reasoning
Before the server's speed matters, the browser spends round trips on the DNS lookup, the TCP handshake, the TLS handshake and the request itself. Those depend on distance and the network.
What does a DNS answer's TTL decide?
Reveal reasoning
How many seconds caches may reuse the answer before asking again. It is why a second visit skips the lookup, and why a change of address takes time to reach everyone.
What does a redirect to another domain name cost, and how does Chrome avoid the http:// one?
Reveal reasoning
A new DNS lookup, a new connection with both handshakes and the request again: on a first visit, as much as the page itself. Chrome tries https:// first for http:// addresses and falls back to http:// only if that fails; HSTS removes the fallback.
What is the difference between render-blocking and parser-blocking?
Reveal reasoning
A render-blocking stylesheet stops drawing but lets parsing continue. A parser-blocking script stops parsing until it has downloaded and run; in the head, that also delays drawing.
Which tags look blocking but are not?
Reveal reasoning
A stylesheet with a media attribute that does not match the screen, such as print, and a module script, which is deferred by default. An inline script, on the other hand, still pauses parsing and waits for stylesheets above it.
Why is a stylesheet loaded with @import slow?
Reveal reasoning
The browser finds it only after the stylesheet that imports it has arrived, so their downloads happen one after the other: a request chain. Link it from the HTML instead.
When does DOMContentLoaded fire, and when does load?
Reveal reasoning
DOMContentLoaded: when the HTML is parsed and deferred scripts have run. load: when everything, including images, has finished. Neither is when the visitor first sees the page.
Key takeaways
- A page load is a chain: find the server, open a connection, ask and wait, read the HTML, draw.
- A first visit over HTTPS spends about four round trips before the first byte of HTML. Every redirect adds more, and a redirect to another domain name repeats the whole chain. Link to the final address.
- DNS answers and connections are reused on later visits, for as long as the TTL and the open connection last.
- Chrome and Safari try https:// first for http:// addresses; HSTS makes sure a browser never falls back to plain http://.
- Sending the head early lets the browser fetch stylesheets while the server is still working.
- Stylesheets are render-blocking and plain scripts parser-blocking, with exceptions: print stylesheets and module scripts do not block; inline scripts do.
- Files found inside other files form request chains. Keep the files the first paint needs in the HTML.
- Measure each stage with Navigation Timing instead of guessing.
Tracks your place during this browser session. Sign in to save it to your account.
Next submodule1.2
Rendering pipeline
Style, layout, paint, compositing, and the cost of visual changes.
See what it will cover