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.
Top comments (0)