27 lines
1.7 KiB
Text
27 lines
1.7 KiB
Text
---
|
|
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).
|
|
|
|
|