gambeta.ai

El cliente

Gambeta.ai es una plataforma gratuita de pronósticos deportivos generados con inteligencia artificial. Cubre más de 38 ligas de fútbol, además de tenis, béisbol, básquet y otros deportes en beta. Su propuesta es la transparencia: cada pick se publica antes del partido y queda en un historial público, con aciertos y fallos.

El proyecto

El producto había crecido muy rápido y estaba en producción, con miles de usuarios y cambios varias veces por día. Ese ritmo tuvo un costo. El sitio cargaba lento en el celular, la interfaz había acumulado secciones y estilos que no conversaban entre sí, y había riesgos de seguridad que en una plataforma con historial público podían afectar la confianza en la marca.

Nuestro trabajo se apoyó en tres pilares: que el sitio fuera rápido, que se viera y se usara mejor, y que fuera seguro. Todo sin frenar la operación diaria.

El desafío

Rendimiento muy bajo en el celular

PageSpeed daba 37 puntos en móvil, con un LCP de 12,4 s y 3,8 s de bloqueo del hilo principal. Para un sitio que se consulta desde el teléfono justo antes del partido, era un problema crítico.

Recursos pesados

Había más de 900 escudos de equipos que sumaban 65 MB, un video de portada de más de 3 MB con carga prioritaria y diccionarios de 18 idiomas que se descargaban siempre, aunque el usuario usa uno solo.

Una interfaz saturada

La home tenía secciones redundantes y las fichas de los pronósticos eran poco claras, sobre todo en mobile.

Superficie de ataque expuesta

Había credenciales de administración con valores por defecto, endpoints internos sin una autenticación robusta y código fuente con comentarios internos publicado en producción.

Optimización de rendimiento

Hicimos una auditoría completa con Lighthouse y PageSpeed, y de ahí salió un plan de 10 tareas independientes, priorizadas por impacto y riesgo.

Imágenes

Reprocesamos los más de 900 escudos sin tocar el código. Pasaron de 65 MB a 16 MB (−75 %) y conservaron la nitidez en pantallas de alta densidad.

Video de portada

Lo recodificamos de 3,25 MB a 743 KB y le cambiamos la estrategia de carga.

Carga por idioma

Cada usuario descarga solo su idioma, en lugar de 820 KB de diccionarios.

JavaScript

Pasamos el JS inline a archivos que se pueden cachear, diferimos los scripts de terceros (Google, analytics, Supabase) y reorganizamos la inicialización. La tarea más larga del hilo principal bajó de 5 s a 0,45 s.

Datos

La home pasó a descargar 4 veces menos datos para mostrar picks y resultados.

Estabilidad visual

Corregimos el CSS crítico que provocaba saltos de layout en desktop (CLS de 0,377).

Rediseño UX/UI

Fichas de pronóstico

Las rediseñamos con una estructura de 4 bloques, más clara y pensada primero para el celular.

Previa de cada partido

El pick en el hero, paneles con estadísticas, gráficos de cuotas y H2H, y opción para compartir.

Una home más simple

Sacamos 6 secciones redundantes y el HTML principal pasó de 397 KB a 262 KB.

Navegación mobile

Corregimos la navegación, el scroll horizontal y las tablas de resultados, siempre reacomodando el contenido para pantallas chicas en lugar de ocultarlo.

Accesibilidad

El puntaje de Lighthouse llegó a 97.

Seguridad y hardening

Autenticación de administración

Sacamos las credenciales por defecto. Los endpoints internos ahora fallan en forma cerrada si falta la configuración, el token viaja por header y no por la URL, y rotamos los secretos.

Panel de admin

Las acciones desde el navegador se validan contra la sesión real del administrador en Supabase, en lugar de usar un secreto compartido.

Base de datos

Revisamos las políticas de acceso por fila (RLS) y la configuración de las vistas, y quitamos permisos de escritura donde no correspondían.

Integridad del historial

Aislamos y bloqueamos los registros alterados por un acceso indebido, para que el historial público siga siendo confiable.

Producción limpia

El pipeline elimina comentarios internos, sourcemaps y logs de depuración, y frena el deploy si algo de eso se cuela.

Content Security Policy

La implementamos con los orígenes verificados en tiempo real, y sumamos reglas de WAF para bloquear las rutas internas.

Cómo trabajamos

Trabajamos en forma sincrónica con el equipo del cliente, en la misma zona horaria. Cada optimización fue en una rama propia con su pull request. Antes de cada deploy corren validaciones automáticas, y después un script verifica producción. Así el sitio mejoró mientras seguía publicando pronósticos todos los días.

Los resultados

PageSpeed móvil de 37 a 58

Con un LCP de 12,4 s a 5,3 s y un bloqueo del hilo principal (TBT) de 3.870 ms a 920 ms.

Menos de un tercio del peso

En imágenes y video.

Accesibilidad 97, buenas prácticas 96 y SEO 92

En Lighthouse.

Una interfaz más clara y coherente

Pensada para el celular.

Superficie de ataque reducida

Sin credenciales por defecto, con autenticación real y sin código interno en producción.

Una base sólida para crecer

Más de 5.000 usuarios registrados, más de 1.200 picks en un historial auditable y más de 70 % de acierto en los pronósticos de máxima confianza.

Conclusión

En un producto cuyo valor es la confianza, el rendimiento, el diseño y la seguridad son parte de la propuesta, no detalles. Con Gambeta.ai mostramos que se puede transformar una plataforma en plena operación sin detenerla: con mediciones antes y después, cambios incrementales y verificación automática en cada paso.