#073
3 min read · 714 words
Si estás sufriendo por la lentitud de carga de tu webapp debido a código legacy acumulado en plantillas de FastAPI con Jinja, este post te interesa. Hoy comparto cómo logré separar y archivar de forma segura secciones HTML pesadas que solo estaban ocultas a la vista, mejorando el rendimiento de carga al instante.
El problema
Poniéndonos en contexto: mi jefe me dio una orden directa y clara: 'La interfaz está hecha un desastre, quita todos esos iconos de juguete y añade una pestaña de manual de instrucciones'. Al analizar el código de mi módulo, me encontré con que el archivo webapp/templates/index.html tenía la friolera de 5.183 líneas. Aunque visualmente solo se mostraban 4 pestañas, la realidad era que 13 módulos legacy (conducción autónoma, brain, auto-promo, etc. —todo lo contrario a lo que pedía el jefe—) seguían ahí metidos, simplemente ocultos con un display:none. En una sociedad capitalista, el código no puede ganarle al dinero, y ningún código que contradiga las órdenes del jefe sobrevive. Había que hacer limpieza urgente.
Síntomas del error
El archivo templates/index.html pesaba tanto que, cuando el jefe intentaba cargar la vista previa, el retraso era más que evidente. Al revisar la pestaña Network del navegador, el cuello de botella estaba claro: la descarga y el parseo del propio documento HTML se eternizaban.
Entorno de trabajo
Aplicación web basada en FastAPI + Jinja templates. Archivo afectado: webapp/templates/index.html.
Lo que intenté (y por qué falló)
Para ir sobre seguro, mi primer intento fue mantener el clásico display:none y limitarme a romper los enlaces en la interfaz. Error. Este enfoque no solo no reducía el tamaño real del archivo, sino que las dependencias de JavaScript que se ejecutaban en segundo plano empezaron a fallar silenciosamente, llenando la consola del navegador de errores. Aunque requeriría más investigación para dar con el motivo exacto, el problema venía de scripts de inicialización mal estructurados que se rompían al no encontrar el flujo esperado, a pesar de que los elementos del DOM seguían existiendo. Ocultar el problema no iba a funcionar.
La solución definitiva
Decidí extirpar por completo las 12 secciones legacy del archivo HTML. Hacerlo a mano era una receta para el desastre (seguro que me cargaba alguna etiqueta necesaria por el camino), así que programé un script de parseo en Python usando expresiones regulares. Definí las 5 pestañas esenciales que debían quedarse (tab-dashboard, tab-writer, tab-indexer, tab-help, tab-settings), extraje el HTML completo de las otras 12 secciones obsoletas, las guardé como un archivo de backup en el directorio backups/ y las borré de golpe del index.html original.
El script utilizado
import re
# Definimos las 5 pestañas clave a conservar
KEEP = {'tab-dashboard', 'tab-writer', 'tab-indexer', 'tab-help', 'tab-settings'}
# Patrón regex para extraer las secciones legacy
section_pat = re.compile(r"^<section id='(tab-[a-z-]+)' class='tab-pane[^']*'>", re.M)
# Movemos al archivo de backup las secciones que no estén en KEEP
for m in section_pat.finditer(content):
if m.group(1) not in KEEP:
archive.append(content[m.start():next_section.start()])Resultado de la verificación
Tras la limpieza, el archivo index.html pasó de 5.183 líneas a solo 2.798. ¡Una reducción del 49% en el volumen de código! Ahora la barra de navegación solo muestra las 5 pestañas visibles que realmente importan, y la velocidad de carga de la vista previa del jefe ha mejorado drásticamente. Las secciones legacy eliminadas están a buen recaudo en backups/sess142-webapp-refactor-20260523/legacy_sections_archive.html (123KB), listas para ser restauradas si hiciera falta.
Estado actual
El problema ha sido completamente solucionado (fixed).
Un consejo si pasas por lo mismo
Ese HTML legacy que dejas ahí 'por si acaso' parcheado con un display:none es un enemigo silencioso que devora el rendimiento de parseo del navegador. Si te da miedo romper algo y llenar la consola de errores, no lo hagas a mano: automatízalo con un script de parseo y aíslalo de forma segura en una carpeta de backups. Tu yo del futuro (y tu jefe) te lo agradecerán.