How HTMX Unlocks Faster Webpage Reloads vs MPAs (Multi-Page Applications)
Date: 2024-05-15 | create | tech | web | htmx | mpa |
Previously we explored performance differences between HTMX and MPAs in my latest side project. We found that HTMX provides snappier page updates by avoiding the reload of many static assets.
In this post I wanted to dive in a little bit more into what's actually changing between MPA and HTMX reloads to allow for these performance differences for the exact same content.
HTMX Unlocks Partial Page Reloads
MPAs often feel sluggish because they reload the entire page whenever something changes. This means full network payloads and browser refreshes when often only a small thing has changed and thus needs to update.
HTMX allows any element to send HTTP requests and decide what to do with the resulting HTML response. Ultimately this unlocks partial page reloads - if only a small thing needs to change, then only reload the small thing.
Generally this helps make "traditional" server-side rendered web pages (MPAs) feel MUCH faster because we are reducing wasted work by only reloading what is needed.
HTMX Partial Reloads vs MPA Full Reloads
Initial page loads for MPAs and HTMX are essentially the same:
- Markup - Describes the webpage - what it looks like, what assets it needs, and any scripts it needs to run
- Assets - Fetches the assets listed as dependencies by the Markup
- Scripts - Anything else it needs to run to work correctly (analytics, client-side logic, etc)
So HTMX doesn't really do anything different for initial page loads. At the end of the day we need to load in everything we need for the page so that's what we do in both cases.
What's different is on subsequent reloads.
For MPAs you essentially need to reload everything on the page (including assets / scripts) because there's no way to do partial reloads. This often means doing way more work than was actually necessary (objectively slower) but also risks bad ux like losing your place on a page and the white flash / unstyled content issue (subjectively slower).
- Markup - Load full markup
- Assets - Load full assets - often from cache so minimal network but some browser parsing / loading overhead
- Scripts - Generally all scripts need to be rerun
HTMX allows you to declare actions that only require partial reloads.
This means we only reload a portion of what's on the page - the things necessary for that action. This typically leads to much smaller amounts of work - less network load, less browser load, less script execution - per actions thus leading to a snappier feeling experience.
- Markup - Only load markup needed
- Assets - Generally no assets need to be loaded (already loaded in browser) but rarely you might dynamically include an asset in the changed markup
- Scripts - Some scripts may run to account for changed content but usually a very small portion compared to what's on page
How much does this actually matter?
In my previous post we found the difference between HTMX and MPA loads to be ~300% (non-blocking) and ~20% (blocking). Now it's hard to generalize these numbers as it's heavily dependent on how each web page is setup but generally HTMX will always be noticeably faster because it's simply doing less work.
But I would argue that the real performance difference is perceived / subjective rather than actual / objective.
The perceived experience feels much faster and smoother because we get "modern" ux - only a part of the page reloads, we do not risk losing our place on a web page, and we get no "white flash" / unstyled content. Overall this makes the page feel faster and performance is often a matter of perception.
Aside: Also I think that HATEOAS unlocks a lot of interesting design patterns that beat out MPAs in terms of dynamism and efficiency but that's for another time.
Next
I've been building most of my side projects with HTMX this year and I've really enjoyed it. It's sped up my development and allowed me to explore many new ideas for how to build on the web which I've found fun.
Q: What's your take on HTMX vs MPAs? Why do you choose one over the other?
If you liked this post you might also like:
Want more like this?
The best / easiest way to support my work is by subscribing for future updates and sharing with your network.