---
title: "Build on HTML that already works · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/site-architecture/progressive-enhancement
updated: 2026-10-20
licence: "All rights reserved"
---

# Build on HTML that already works

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

- Level: Required
- Chapter: [Site architecture](https://agentwranglers.se/playbook/website/site-architecture)
- Rule: Ship working HTML first. Let JavaScript add behaviour to what is already there.
- How: Render all content and links on the server or at build time. Write scripts that find elements and add behaviour to them. If those elements are missing, the script does nothing.
- Check: Turn JavaScript off. Every page and link still works.
- Measured: On a reference site, rendering the content in the browser instead took mobile Lighthouse Performance from 99 to 85. Layout shift went from 0 to 0.295.

Example:

```html
<button class="copy" data-copy="npm install example">Copy</button>
<script type="module">
  for (const b of document.querySelectorAll('[data-copy]')) {
    b.addEventListener('click', () => navigator.clipboard.writeText(b.dataset.copy));
  }
</script>
```

**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/site-architecture/progressive-enhancement`.

- Previous: [Render at build time and serve from memory](https://agentwranglers.se/playbook/website/site-architecture/render-at-build-time-serve-from-memory)
- Next: [Load one of each from your own site](https://agentwranglers.se/playbook/website/site-architecture/one-of-each-all-first-party)
- [Site architecture](https://agentwranglers.se/playbook/website/site-architecture)