This year I've built most of my side projects with HTMX. HTMX offers big UX improvements for very little added complexity on top of MPAs (Multi-Page Applications).

I'm currently building FullstackProjects.xyz with HTMX - a website that generates fullstack project ideas.

I thought it would be interesting to use this site to compare the performance of HTMX vs traditional MPA page loads.

Comparing HTMX vs MPA

FullstackProjects.xyz is a very simple website that displays a list of random project ideas stored in a Postgres DB. It consists of a single webpage and displays the items using an HTMX-powered Interactive Island.

This makes it a pretty good test subject for comparing HTMX vs MPA page loads because we can easily make it render using each and it's minimal enough that we won't have many conflating factors.

• MPA - Normal browser refresh
• HTMX - Click button to trigger an HTMX partial reload

Caveat: All benchmarks have asterisks. I'm doing a small N run taking an average-looking result so likely biased in some way.

HTMX vs MPA Performance

Edit: On further review I believe the difference in blocking DOM load is much smaller at 100 ms (HTMX) vs 120 ms (MPA). So still sizable but not as large for actually-blocking loads.

Loading FullstackProjects with a normal browser refresh we get DOM content loaded in ~300 ms.

On a normal page load we must load the HTML as well as all the linked assets - scripts, css, images, etc - which can be significant for large apps. Now some of this load time is maybe not fair to count cause it's including some non-blocking analytics stuff but this is common in more complex projects so we'll keep it in for now. Here these additional assets don't make much of a difference because this app is so simple but at scale they can really add up.

Using HTMX to load by clicking the button in the Interactive Island, we get new items refreshed in ~110 ms.

It makes sense that HTMX is so much faster because were transferring and loading much less - just the list of items. This means we don't need to refetch / reload any of the other assets - JS / CSS / images etc - just the little bit of the page that actually needs to change. So it makes sense it's faster - it's doing a lot less.

Is HTMX faster than MPAs?

Now does this mean that we can assume HTMX is 3x faster than MPAs? Not really - it's going to depend largely on your app and how it's set up.

But we can say that HTMX unlocks partial page reloads which can speed up webpages by avoiding unnecessary work. My belief is that the main thing that makes SPAs feel faster than MPAs is their ability to do partial page reloads - so this closes the gap.

Next

I've been having a good time building side projects with HTMX. It allows me to build apps faster and simpler than I was able to using frontend frameworks like SvelteKit and NextJS. In many ways it's brought back the joy of building cause I don't have to deal w tedious tools I don't want to deal with - I can simply build how I want with The HAM Stack.

Q: What are you using to build web apps? What libraries / frameworks do you recommend?

If you liked this post you might also like:

• What it’s like to run HTMX in Production - Stories from Experienced Software Engineers
• How HTMX allows you to build modern web apps faster and cheaper than bloated client-side SPA Frameworks
• Why I'm moving from SvelteKit to F#