Why do render-blocking CSS and JavaScript slow the page?
The browser cannot paint until it has both the DOM and CSSOM, so stylesheets block rendering. A synchronous script can block HTML parsing itself, because it might change the document. Deferring scripts and inlining critical CSS shortens the time to first paint.
Answered in
From Enter Key to Pixels: What Happens When You Type a URLDNS caches, TCP, TLS, HTTP, then HTML parsing, the render tree, layout and paint. Every stage is a place a page can be slow, and a place to fix it.
Read the full analysisOther questions this article answers
More web performance questions
- What problem does HTTP/2 solve compared with HTTP/1.1?
- What is head-of-line blocking and does HTTP/2 remove it?
- Why does HTTP/3 use UDP?
- How can I check which HTTP version a site is using?
- What is the difference between latency, bandwidth and throughput?
- Why measure p95 and p99 instead of the average?
- What is the quickest win for network latency?
- How do I decide whether to make something asynchronous?
Every answer on Crashtech is written by the editor of the article it comes from — never auto-summarised. Browse all answers or the Web Performance beat.