I’ve been revisiting some fundamentals around script loading and wanted to share a simple visual that clarifies how script placement and attributes impact page performance:

🟢 HTML Parsing
🔵 Script Download
🔴 Script Execution

─────────────────────────────────────────────────────────────

1️⃣ <​script> in

HTML: 🟢🟢 🔴 🟢🟢🟢
Script: 🔵🔴
Parsing stops while the script downloads and runs.
This can delay rendering and hurt perceived performance.

─────────────────────────────────────────────────────────────

2️⃣ <​script> at end of

HTML: 🟢🟢🟢🟢🟢🟢
Script: ------------🔵🔴
HTML finishes parsing before the script loads and executes.
A safer default for avoiding render-blocking.

─────────────────────────────────────────────────────────────

3️⃣ <​script async>
HTML: 🟢🟢🟢🟢🟢🟢
Script: 🔵---🔴
Downloads in parallel and executes as soon as it’s ready.
Can interrupt parsing unpredictably.

─────────────────────────────────────────────────────────────

4️⃣ <​script defer>
HTML: 🟢🟢🟢🟢🟢🟢
Script: 🔵---------------🔴
Downloads in parallel and executes after parsing is complete.
Predictable and non-blocking.

Even small adjustments here can improve metrics like First Contentful Paint and make your site feel faster.