---
title: I recommend hx-boost
description: 'How I added `hx-boost` to make my website slightly nicer and how you can too'
tags: post,short
date: 2026-01-27 22:53:23 -5
---

[`hx-boost`](https://htmx.org/attributes/hx-boost) is an attribute provided by [htmx](https://htmx.org) that makes your website better with no downside.
Really! As the page in the documentation describes, it makes `<a>`s that point within your website use AJAX.
It swaps the body and pushes a history state, so it works exactly like an anchor normally does from the user's perspective.

This might sound like overcomplicating things with JavaScript for a *potential* speed improvement, but the reason you should highly consider it is the [`hx-preserve`](https://htmx.org/attributes/hx-preserve/) attribute.
Put that (and a unique `id`) on content that you don't want to change when you navigate between pages, like a sidebar.
Now things like GIFs will keep playing and there won't be flashes when things that should be static are refreshed.
Importantly, literally nothing changes for (cool) users who (righteously) block JavaScript.
It is perfect [progressive enhancement](https://en.wikipedia.org/wiki/Progressive_enhancement).

## Steps
1. Add htmx to your `<head>`: `<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.8/dist/htmx.min.js"></script>`.
2. Add `hx-boost="true"` to your `<body>`.
3. Add `hx-preserve="true"` to stuff that is static between pages (probably a sidebar/footer). Add a unique `id` if it doesn't already have one.
4. Be happy that it works with and without JavaScript.

It really is that easy! [Here's the commit where I added it to my site](https://git.pyrope.net/mbk/twopn/commit/42a9f2a467ee15c398e1bc5fac1296b6befb4878).


