Render Blocking
In one sentence
Resources, chiefly stylesheets and synchronous scripts, that stop the browser painting until they are dealt with.
Analogy Mental model
One dish holding up the whole table. The first plate is late and everybody waits, even though their own food is ready.
In practice What you actually do
Defer scripts, or load them as modules, and keep blocking only what must run before paint. Non-critical CSS can load asynchronously, and critical CSS goes inline in the head.
Where people get burned Pitfalls
Deferring the stylesheet that styles the first screen produces a flash of unstyled content, which looks worse than the delay it saved. Blocking is not the enemy; blocking the wrong things is.
This entry was written in English from the Chinese original, not machine-translated. Read the Chinese version →