What blocks the paint
A render blocking resource is anything the browser must fetch and process before it can paint. The two main culprits are stylesheets and synchronous scripts.
- A plain stylesheet link blocks rendering until it loads and parses.
- A classic script tag in the head pauses HTML parsing while it downloads and runs.
- Scripts can also block on CSS because they may read computed styles.
Freeing the parser
Script loading attributes change this behavior and keep the parser moving.
- defer: download in parallel, run after parsing in document order. Best for most scripts.
- async: download in parallel, run as soon as ready, order not guaranteed. Best for independent scripts.
- Inlining tiny critical CSS and loading the rest with a non blocking pattern reduces blocking bytes.
A script in the body bottom also avoids blocking, but defer is cleaner because it still downloads early. Use media queries on stylesheets so a print sheet does not block the screen render.
Key idea
Use defer for ordered scripts and async for independent ones so the parser never stalls waiting on JavaScript.