Nuestra portada, cincuenta veces más ligera en palabras

PageToVid habla cuatro idiomas, y los textos de su interfaz viven en 56 grupos de traducciones: errores, navegación, precios, el editor, la biblioteca de animaciones y muchos más. La primera versión del sitio, cuando solo había una docena de grupos, se los daba todos a cada página. A ese tamaño era una opción sensata.

El sitio siguió creciendo, y cada función nueva añadía su grupo. La portada acabó cargando 139 KB de traducciones, casi todas para el editor, el panel y otras pantallas que un visitante nuevo nunca abre. Nada parecía estar mal; las páginas simplemente pesaban más de lo necesario.

Ahora cada parte del sitio recibe solo lo que lee. La capa común lleva una lista corta, como los errores, la navegación y la barra de direcciones, que suma 2,6 KB. Cada sección del sitio, del editor a las páginas de animaciones, añade los grupos que necesita con un pequeño envoltorio ClientMessages.

Hay un matiz. En la librería de traducción que usamos, la lista de una sección sustituye a la común en vez de sumarse, así que cada lista debe incluir todo lo que lee su sección. Mantener eso a mano sería frágil, así que un test nuevo recorre los imports de cada ruta y falla en dos casos: un componente que lee palabras que su ruta no envía, y una ruta que envía palabras que nadie lee.

La misma revisión encontró un archivo más grande que viajaba más lejos de lo necesario. Nuestra biblioteca de animaciones tiene un catálogo completo de plantillas, de unos 1,5 MB. Una pequeña función del editor y de las páginas de animación solo necesitaba unas líneas de ejemplo, pero al importarlo se llevaba el catálogo entero al navegador.

Ahora la función lee un pequeño archivo generado con solo esas líneas, que se reconstruye cada vez que cambia el catálogo. La página de detalle de una animación carga su reproductor solo cuando hace falta, y solo llega el texto de tu idioma a las páginas de animaciones. Un test sobre el código que va al navegador impide que el catálogo vuelva. Con la misma idea, el código de compra se carga ahora solo en las páginas donde compras.

El resto del trabajo consistió en hacer menos en cada petición:

• mientras se hace tu vídeo, su página consulta un resumen ligero (etapa, tiempo estimado, número de escenas) en vez del proyecto entero, y consulta con menos frecuencia pasado un minuto o con la pestaña en segundo plano;
• la página de reproducción de un vídeo lo lee una vez por visita, no una vez por componente;
• la galería y el escaparate de la portada se mantienen listos durante diez minutos;
• las miniaturas de la galería se cargan directamente del almacenamiento, con su tamaño conocido de antemano, a medida que bajas;
• iconos, sonidos e imágenes del escaparate se guardan en caché un día;
• las conexiones de asistentes inactivas se cierran a los 20 segundos en vez de quedarse abiertas;
• las consultas más lentas a la base de datos ganaron índices.

Los clips de vídeo con IA también se quedan en la versión rápida de su modelo cuando necesitan un segundo intento, y una llamada que agota su tiempo una vez simplemente se repite.

Nada de esto cambia un solo fotograma de tu vídeo. Lo notas en otros sitios: la galería de vídeos y la portada se abren más rápido en el móvil, la página del vídeo sigue siendo ligera mientras esperas y cada visita pide menos a los servidores que hay detrás.

En un sitio donde cada página se genera de nuevo para cada visitante, eso importa más de lo que parece. Páginas más ligeras significan menos arranques en frío, respuestas más rápidas y una primera impresión más fluida.

No era un problema difícil. Era un valor por defecto elegido cuando la aplicación era pequeña, que nadie tuvo motivo para revisar mientras pasaba de una docena de grupos de palabras a 56.

La lección que nos quedamos es que un presupuesto de tamaño necesita un test, no buena memoria. Las dos suites de tests nuevas rompen la compilación el día que alguien importe un archivo grande en un botón pequeño, u olvide enviar a una sección las palabras que necesita.