---
title: "Never let a script block the page · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/performance/script-loading
updated: 2026-10-20
licence: "All rights reserved"
---

# Never let a script block the page

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Recommended
- Chapter: [Performance](https://agentwranglers.se/playbook/website/performance)
- Rule: Load scripts as `type="module"` or with `defer`, keep blocking scripts out of the head, and send as little JavaScript as possible.
- How: Ship one `type="module"` bundle, which is deferred by default. Keep inline scripts to tiny ones that must run before paint, such as applying a saved theme. Load third-party code late, or not at all.
- Check: Lighthouse mobile Total Blocking Time is under 200 ms. A build gate finds no `<script src>` in the head without `type="module"`, `defer` or `async`.

Example:

```html
<head>
  <script>
    try { document.documentElement.dataset.theme = localStorage.theme || ""; } catch {}
  </script>
  <script type="module" src="/app.3f9a1c.js"></script>
</head>
```

**For agents:** if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in `Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/performance/script-loading`.

- Previous: [Put the styles in the page](https://agentwranglers.se/playbook/website/performance/critical-css)
- Next: [Break up long tasks](https://agentwranglers.se/playbook/website/performance/long-tasks)
- [Performance](https://agentwranglers.se/playbook/website/performance)