Mi web ahora es ~2.8x más rápida al convertirla en SPA gracias a Django LiveView
Después de subir la actualización 2.2.0 de Django LiveView a PyPI que arreglaba algunos problemas menores, me animé a transformar toda mi web personal (donde estás en estos momentos) a una navegación completamente SPA (Single-page application). O lo que es lo mismo, en lugar de cargar cada página directamente desde el servidor, ahora se carga una sola vez y el resto de HTML se renderizan/envían dinámicamente por demanda.
En mi caso, pasé de tener una web híbrida donde las páginas se renderizaban de manera tradicional (Server Side Rendering o SSR) con algunos elementos dinámicos gestionados por Django LiveView (modales, pasos en formularios, scroll infinito...), a dar toda la carga de navegación y responsabilidad a Django LiveView. No es un cambio menor, ya que implicaba reestructurar parte de las templates y mover cierta lógica de las vistas a los componentes de Django LiveView.
Después de algunos días de trabajo en mis ratos libres, terminé de migrar todo.
¿Ha mejorado la velocidad? ¿Vale la pena el esfuerzo? Pues... el resultado ha sido espectacular. Los números hablan por sí mismos.
| Página | SSR | SPA (Django LiveView) |
|---|---|---|
| Index | 188 ms | 49 ms |
| Blog | 237 ms | 125 ms |
| Artículo | 339 ms | 92 ms |
| Libros | 244 ms | 66 ms |
| Charlas | 225 ms | 76 ms |
| Cursos | 267 ms | 122 ms |
| Lección | 366 ms | 138 ms |
La navegación SPA es de media ~2.8x más rápida que la carga inicial directa (de 267 ms a 95 ms). Y estoy seguro de que los tiempos podrían ser aún mejores si juego con la caché en SPA.
¿Qué pasa con el SEO? ¿Se siguen indexando las páginas? Sí, no he perdido nada en ese aspecto. Cada página continúa siendo renderizada completamente en el servidor si se accede directamente a ella. De hecho hice el experimento de desactivar JavaScript y pude navegar por toda la web. Los enlaces son normales pero usan un atributo que Django LiveView intercepta.
<a
href="/"
class="link link--without-underline logo"
aria-label="Ir a Inicio"
data-action="click->page#run"
data-liveview-function="navigate_home"
>
Inicio
</a>
En definitiva, la migración a una navegación completamente SPA con Django LiveView ha sido un éxito rotundo. No solo ha mejorado significativamente la velocidad de carga, sino que también la experiencia de usuario. Recomiendo esta arquitectura a otros desarrolladores que busquen optimizar sus aplicaciones web y trabajen con Django.
Este trabajo está bajo una licencia Attribution-NonCommercial-NoDerivatives 4.0 International.
Apóyame en Ko-fi
Comentarios
Todavía no hay ningún comentario.