Build on HTML that already works

How to do it

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.

Example

<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>

How to 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.