¿Por qué tu app de Lovable va lenta y cómo acelerarla?
Por qué una app de Lovable se pone lenta al crecer (muchas consultas, sin índices, imágenes pesadas, instancia chica) y cómo medir cada causa antes de actuar.
Read in English →
Una app de Lovable casi siempre se pone lenta por la forma en que pide los datos, no por el lugar donde está alojada. Las causas más comunes son páginas que hacen decenas de consultas separadas a la base de datos, listas que cargan todas las filas de una vez, filtros sobre columnas sin índice e imágenes pesadas. Una instancia de backend demasiado chica existe como causa, pero va al final de la lista. Mide primero qué parte es la lenta: cada causa tiene un arreglo distinto, y adivinar gasta créditos.
A continuación: cómo saber qué tipo de lentitud tienes, las herramientas que muestran la causa (algunas dentro de Lovable), el arreglo para cada caso y cómo confirmar que mejoró.
¿Qué tipo de lentitud tengo?
"La app va lenta" puede ser cosas muy distintas. Primero ubica cuál es la tuya:
- La primera visita tarda en mostrar algo. Es la carga: tamaño del código, imágenes, fuentes.
- Una página siempre se queda cargando varios segundos. Casi siempre son las consultas de esa página.
- Antes era rápida y se fue poniendo lenta con los usuarios. Son consultas que crecen con los datos: sin paginación, sin índices.
- Todo se pone lento en horas pico. Puede ser la instancia de la base de datos.
- Escribir o hacer scroll se siente trabado. El navegador está trabajando de más, muchas veces por componentes que se vuelven a dibujar sin necesidad.
Anota la página y la acción exactas, y mide cuánto tarda. Vas a necesitar ese número para saber si el arreglo sirvió.
¿Cómo lo mido?
Para la velocidad de carga
Pasa la página por PageSpeed Insights de Google. Te da las Core Web Vitals y la lista de los recursos más pesados. Si lo más grande son imágenes de varios megabytes, empieza por ahí. La guía de Core Web Vitals en tu app explica qué significa cada métrica.
Para páginas lentas
Abre las herramientas de desarrollo del navegador, entra a la pestaña Network y recarga la página lenta. Fíjate en dos cosas: cuántas peticiones van a tu backend (direcciones con /rest/v1/) y cuánto espera cada una. Cuarenta peticiones en una sola página, o peticiones que arrancan recién cuando termina la anterior, son la señal a buscar.
Dentro de Lovable
Lovable tiene dos herramientas que conviene usar antes de cambiar código, las dos en Plan mode para que nada se modifique:
La app funciona pero se siente lenta. Analiza el proyecto en busca de cuellos de botella y entrega un informe sin cambiar código.Mi app se siente lenta. Encuentra las consultas más lentas de la base de datos y optimiza las peores.La segunda lee las estadísticas de consultas de tu base y las ordena por tiempo total. Necesita tráfico real para tener algo que mostrar, así que en una app recién creada aporta poco.
En el backend integrado, More → Cloud → Overview → Advanced settings muestra las tarjetas CPU, Memory y Disk de las últimas 24 horas, con las horas en que la base estuvo cerca de su límite resaltadas.
¿Cómo arreglo cada causa?
| Lo que encontraste | Causa | Arreglo |
|---|---|---|
| Decenas de peticiones por página, una por elemento | Una consulta por fila (el patrón "N+1") | Traer los datos relacionados en una sola consulta |
| Las listas se ponen lentas a medida que crecen | Se cargan todas las filas | Paginar |
| Filtros y búsquedas lentos | No hay índice en las columnas filtradas | Agregar índices |
| Primera visita lenta, archivos grandes en Network | Imágenes o código pesados | Reducir y comprimir imágenes, dividir rutas |
| Presión en las tarjetas de CPU o memoria | Instancia chica, o una consulta mala | Primero arreglar consultas, después agrandar |
Una consulta en lugar de cincuenta
El código generado con IA muchas veces carga una lista, la recorre y pide los detalles de cada elemento por separado. Con el cliente de Supabase, las tablas relacionadas pueden venir en una sola petición:
const { data } = await supabase
.from("pedidos")
.select("id, total, created_at, cliente:clientes(nombre, email)")
.order("created_at", { ascending: false })
.range(0, 49);Esa única petición reemplaza una para los pedidos más una por cada cliente.
Pagina las listas
La API de Supabase devuelve como máximo 1.000 filas por petición por defecto (es un ajuste del proyecto), así que una app que "carga todo" es lenta y, pasado ese número, además queda incompleta sin avisar. Carga 25 o 50 por vez con .range() y agrega un botón de "cargar más" o páginas.
Agrega índices donde filtras
Un filtro sobre una columna sin índice obliga a la base a leer la tabla entera. Con 200 filas no se nota; con 200.000, duele. La guía de row level security de Supabase recomienda un índice en cada columna que filtran tus políticas de seguridad, normalmente user_id u organization_id, y escribir (select auth.uid()) en lugar de auth.uid() en las políticas para que el valor se calcule una vez por consulta y no una vez por fila. Son cambios baratos con mucho efecto en tablas grandes. Para entender la idea sin tecnicismos, lee consultas lentas e índices en la base de datos.
Achica las imágenes
Una foto de 4.000 píxeles mostrada en una tarjeta de 400 es el problema de carga más común en paneles y páginas de inicio. Reduce el tamaño al subir, usa formatos modernos y carga en diferido las imágenes que quedan más abajo. La guía para optimizar las imágenes de tu app tiene los detalles.
Agranda la instancia al final
Si las tarjetas de CPU o memoria muestran presión y las consultas ya están arregladas, una instancia más grande ayuda. En Advanced settings, Database size → Manage permite a los planes pagos elegir desde Tiny hasta X-Large, con el costo mensual estimado en créditos de cada tamaño. El cambio tarda unos minutos, con un corte breve mientras la instancia se reinicia. La propia documentación de Lovable lo aconseja: revisa si la causa son consultas lentas antes de agrandar, porque una instancia más grande solo hace que una consulta mala falle más despacio.
¿Cómo confirmo que ahora va más rápido?
Repite la medición del principio: misma página, misma cuenta, misma red. Compara la cantidad de peticiones, el tiempo de la más lenta y el puntaje de PageSpeed. Si el número no se movió, el arreglo apuntó a la causa equivocada, y es mejor revertir que quedarte con código que suma complejidad sin beneficio.
¿Cómo la mantengo rápida a medida que crece?
- Pagina todas las listas desde el principio, aunque tengas diez filas.
- Indexa las columnas por las que filtras, ordenas y unes tablas, sobre todo en las políticas de seguridad.
- Pide en una sola petición los datos que necesita cada página, y nada más.
- Revisa las consultas más lentas una vez al mes o después de una función grande.
El panorama completo de qué se rompe al crecer está en escalar de 100 a 10.000 usuarios.
Respuestas rápidas
¿El hosting de Lovable es lento? Rara vez es el cuello de botella. Mide primero: casi toda la lentitud viene de las consultas y las imágenes.
¿Conviene agrandar la instancia de Cloud? Solo después de revisar las consultas. Si las tarjetas siguen en rojo tras arreglarlas, entonces sí.
¿Por qué se puso lenta recién ahora? Casi siempre porque crecieron los datos. Las consultas sin paginación ni índices se vuelven más lentas con cada fila nueva.
¿Quieres que alguien la analice?
Si ya mediste y la causa sigue sin estar clara, una revisión del código suele encontrar los dos o tres cambios que más importan. Haz el chequeo gratuito de tu app, mira cómo arreglamos apps de Lovable o dinos qué página va lenta.
