My website is now ~2.8x faster after converting it to a Django LiveView SPA
After releasing the 2.2.0 update of Django LiveView to PyPI, which fixed some minor issues, I decided to transform my entire personal website (where you are right now) into a fully SPA (Single-page application) navigation. In other words, instead of loading each page directly from the server, it now loads once and the rest of the HTML is dynamically rendered/sent on demand.
In my case, I went from having a hybrid website where pages were rendered the traditional way (Server Side Rendering or SSR) with some dynamic elements managed by Django LiveView (modals, form steps, infinite scroll...), to handing all navigation and responsibility to Django LiveView. It is not a minor change, as it involved restructuring part of the templates and moving some logic from the views to the Django LiveView components.
After a few days of work in my spare time, I finished migrating everything.
Has the speed improved? Is the effort worth it? Well... the result has been spectacular. The numbers speak for themselves.
| Page | SSR | SPA (Django LiveView) |
|---|---|---|
| Index | 188 ms | 49 ms |
| Blog | 237 ms | 125 ms |
| Article | 339 ms | 92 ms |
| Books | 244 ms | 66 ms |
| Talks | 225 ms | 76 ms |
| Courses | 267 ms | 122 ms |
| Lesson | 366 ms | 138 ms |
SPA navigation is on average ~2.8x faster than the direct initial load (from 267 ms to 95 ms). And I am sure the times could be even better if I play with caching in SPA.
What about SEO? Are the pages still being indexed? Yes, I have not lost anything in that regard. Each page continues to be fully rendered on the server if accessed directly. In fact, I ran the experiment of disabling JavaScript and was able to navigate the entire website. The links are normal but use an attribute that Django LiveView intercepts.
<a
href="/"
class="link link--without-underline logo"
aria-label="Go to Home"
data-action="click->page#run"
data-liveview-function="navigate_home"
>
Home
</a>
In short, the migration to a fully SPA navigation with Django LiveView has been a resounding success. Not only has it significantly improved loading speed, but also the user experience. I recommend this architecture to other developers looking to optimize their web applications and working with Django.
This work is under a Attribution-NonCommercial-NoDerivatives 4.0 International license.
Support me on Ko-fi
Comments
There are no comments yet.