Render-blocking resources
TL;DR
Render-blocking resources are CSS or JS files holding up page rendering until fully downloaded and processed.
Browsers pause showing content until render-blocking resources finish. This blocks First Contentful Paint and hurts LCP. Techniques against it: inline critical CSS, defer/async JS attributes, preload essentials, code-splitting.
Example
A site loads 450KB CSS in head without splitting. LCP 4.2s. After extracting 14KB critical CSS inline and lazy-loading the rest: LCP 2.1s.
Frequently asked questions
Difference between defer and async?
Both prevent JS blocking HTML parsing. Defer runs after parsing, in order. Async runs when downloaded, out of order. Use defer for dependent scripts, async for independent (analytics).
Related terms
Further reading
- → Our service: SEO