Monitorización de Lovable: revisa la velocidad de tu app desde el chat de Lovable tras cada cambio
Lovable reescribe tu app cada vez que envías un prompt, y un prompt que añade un vídeo de portada, una segunda fuente o una librería grande puede volver más lenta la app publicada sin que nada parezca roto. Añade el servidor MCP de Relvato a Lovable como conector de chat y, en el mismo chat donde construyes, podrás pedir una ejecución de Core Web Vitals en un navegador real sobre la app publicada, leer qué empeoró y hacer que Lovable lo arregle. Esta guía monta ese ciclo en unos diez minutos.
Qué vas a montar
Un ciclo de cuatro pasos: construyes en Lovable, publicas, pides a Lovable que ejecute el monitor de Core Web Vitals de Relvato sobre la app publicada, y Lovable lee el resultado y arregla lo que empeoró. Los números salen de Relvato cargando tu página en un Chrome real, en un móvil con conexión limitada y en escritorio — no de una estimación de Lovable.
Necesitas una cuenta de Relvato (el plan gratuito sirve: las ejecuciones que lanzas desde el chat son manuales y el plan gratuito incluye 100 al mes), una cuenta de Lovable en cualquier plan (los servidores MCP propios están en todos los planes de Lovable, también el gratuito) y una app publicada. Relvato mide la dirección publicada — el subdominio lovable.app o tu dominio propio —, nunca la vista previa del editor, porque es la que cargan tus visitantes.
Si «MCP server» aparece en gris al llegar al paso 2, un administrador del workspace ha desactivado los servidores MCP propios en tu workspace de Lovable; pídele que los permita.
Paso 1 — Crea una clave de API de Relvato para Lovable
En Relvato, abre el menú de la cuenta → API access. Ponle a la clave un nombre que reconozcas después, por ejemplo «Lovable». En What the key may do, elige Full access: una clave Read-only puede leer resultados pero no ejecutar un monitor, y ejecutarlo es justo lo que buscas aquí.
Haz clic en + Create API key y copia la clave en ese momento: Relvato solo la muestra una vez. Empieza por rlv_. Puedes revocarla desde la misma página cuando quieras, lo que desconecta a Lovable sin tocar nada más.
Paso 2 — Añade Relvato como conector de chat en Lovable
En Lovable, abre Connectors (desde la barra lateral del panel o dentro de un proyecto), pulsa el botón + arriba a la derecha del catálogo y elige MCP server. En Server name escribe «Relvato» y en Server URL la dirección de abajo. Como autenticación, elige Bearer token or API key, pega tu clave rlv_ y pulsa Add server.
La conexión es personal: has entrado con tu propia clave, solo tú puedes usarla y nunca pasa a formar parte de la app que publicas — tus visitantes no pueden llegar a Relvato a través de ella. Los compañeros que quieran el mismo ciclo añaden Relvato por su cuenta, con su propia clave.
https://app.relvato.com/api/mcp
Paso 3 — Añade tu app a Relvato desde el mismo chat
Si la app ya está en Relvato, salta este paso. Si no, no hace falta salir de Lovable. Pide: «Usa Relvato para añadir mi app https://tu-app.lovable.app como sitio (plataforma: other).» Relvato responde con una etiqueta de verificación que demuestra que el sitio es tuyo, como la línea de abajo.
Pide a Lovable que ponga esa etiqueta en el head de la página (en index.html en las apps creadas antes de mayo de 2026, o en el layout raíz en las más nuevas), publica con Publish → Publish changes y luego pide «Verifica mi sitio en Relvato.» En cuanto Relvato encuentra la etiqueta, el sitio está listo. Si la app tiene dominio propio, añade esa dirección en lugar de la de lovable.app: es la que usan tus visitantes, y Lovable solo redirige las demás a ella de forma temporal.
<meta name="relvato-site-verification" content="…">
Paso 4 — Añade el monitor de Core Web Vitals
Pide: «Añade el monitor de Core Web Vitals de Relvato a mi sitio.» Lovable llama a la herramienta add_checks de Relvato con el monitor web-vitals. Mide una página: la de inicio, salvo que elijas otra en los ajustes del monitor en Relvato.
Cada ejecución carga la página tres veces en un móvil con red y CPU limitadas (el mismo perfil Slow 4G y 4× CPU que usa PageSpeed) y tres veces en escritorio, y se queda con la mediana: Largest Contentful Paint, Cumulative Layout Shift, Time to First Byte, First Contentful Paint, Total Blocking Time y una estimación de laboratorio de Interaction to Next Paint, más una puntuación de 0 a 100 por dispositivo.
Paso 5 — Tras cada publicación, pide una ejecución
Conviértelo en costumbre: primero publica (Publish → Publish changes) y luego envía un prompt como «Ejecuta el monitor de Core Web Vitals de Relvato en mi sitio, espera a que termine y compara LCP, CLS y TTFB en móvil con la ejecución anterior.» Lovable lanza la ejecución con trigger_scan y la lee con get_run hasta que termina, normalmente en un minuto.
Lovable pregunta antes de usar una herramienta MCP, salvo que el servidor la marque como de solo lectura. Relvato marca así sus herramientas de lectura (site_overview, list_runs, get_run, get_fix_prompt), de modo que solo lanzar una ejecución o cambiar algo pide confirmación. Elige Always allow para trigger_scan si no quieres la pregunta cada vez.
Cada ejecución cuenta para las ejecuciones mensuales de tu plan de Relvato, y Lovable descuenta las llamadas a herramientas de tus créditos como con cualquier otro conector.
Paso 6 — Deja que Lovable arregle lo que se volvió más lento
Los detalles de la ejecución le dicen a Lovable por qué cambió un número, no solo que cambió: qué elemento fue el Largest Contentful Paint y cuánto tardó cada fase, qué elementos desplazaron el diseño, qué scripts bloquearon el renderizado, las imágenes demasiado grandes y cuánto JavaScript quedó sin usar. Con eso Lovable cambia la línea correcta en lugar de adivinar.
Prueba: «Usa los detalles de esa ejecución de Relvato para arreglar el empeoramiento del LCP en móvil, luego publica y vuelve a ejecutar el monitor.» Para una ejecución que falló del todo, «Obtén el informe de arreglo de Relvato para esta ejecución» devuelve el mismo informe que usa Suggest a fix en Relvato. Revisa el cambio de Lovable como cualquier otro, publica y deja que la siguiente ejecución confirme el arreglo.
Apps de Lovable más antiguas: qué espera de verdad el navegador
Las apps de Lovable creadas desde el 13 de mayo de 2026 se renderizan en el servidor. Las anteriores son apps de una sola página renderizadas en el cliente: el navegador recibe una página casi vacía y espera al paquete de JavaScript antes de pintar el contenido principal. Lovable sirve una copia prerenderizada solo a los rastreadores verificados de buscadores, así que los escáneres que solo descargan el HTML pueden ver una página vacía.
Relvato no se limita a descargar el HTML: carga la página en Chrome como un visitante, así que su LCP incluye esa espera al paquete. Si el LCP en móvil de una app antigua es alto y el elemento LCP solo aparece después de ejecutarse el JavaScript, lo que hay que reducir es el paquete, y dividirlo es un cambio que Lovable puede hacer por ti.
Que se ejecute sin pedirlo (opcional)
Las ejecuciones desde el chat ocurren cuando las pides. Para que Relvato vuelva a ejecutar por sí solo todos los monitores activos con cada cambio de código, conecta el repositorio de GitHub con el que se sincroniza Lovable: consulta conecta tu sitio a GitHub. Ese disparador necesita el plan Pro de Relvato o superior.
Un matiz: Lovable hace push a GitHub mientras editas, a veces antes de que publiques, así que una ejecución disparada por el push puede medir la versión que sigue en vivo. La ejecución que lanzas desde el chat tras Publish changes mide exactamente lo que publicaste.
Qué pedirle a Lovable y qué ocurre
| Le pides a Lovable | Herramienta de Relvato | ¿Lovable pregunta antes? |
|---|---|---|
| Añade mi app a Relvato | add_site | Sí |
| Verifica mi sitio en Relvato | verify_site | Sí |
| Añade el monitor de Core Web Vitals | add_checks | Sí |
| Mide las Core Web Vitals ahora | trigger_scan | Sí, salvo que hayas elegido Always allow |
| ¿Qué midió la última ejecución? | list_runs, get_run | No — solo lectura |
| ¿Cómo arreglo esta ejecución? | get_fix_prompt | No — solo lectura |
| ¿Cómo va mi sitio en general? | site_overview | No — solo lectura |
Preguntas frecuentes
¿El conector de Relvato acaba en mi app publicada?
No. Un conector de chat solo se usa mientras construyes, en el chat del proyecto y en los Chats de Lovable. No forma parte de la app que publicas y tus visitantes no pueden llegar a Relvato a través de él.
¿Qué plan de Lovable necesito?
Cualquiera: los servidores MCP propios están en todos los planes de Lovable, también el gratuito. Un administrador del workspace puede desactivarlos; si «MCP server» aparece en gris, es por eso.
¿Por qué Relvato no puede medir la vista previa del editor?
La vista previa no es lo que cargan tus visitantes, y Relvato solo trabaja sobre una dirección pública cuya propiedad has demostrado. Mide la app publicada y mantén su visibilidad pública: una app restringida a tu workspace de Lovable pide iniciar sesión en Lovable, y Relvato no puede pasar de ahí.
¿Consume ejecuciones de Relvato o créditos de Lovable?
Ambas cosas. Cada ejecución de Core Web Vitals cuenta para las ejecuciones mensuales de tu plan de Relvato (el gratuito incluye 100), y Lovable descuenta las llamadas a herramientas de tus créditos. Leer resultados no lanza ninguna ejecución.
¿Mis compañeros pueden usar mi conexión?
No. Las conexiones de chat de Lovable son personales. Cada compañero añade Relvato con su propia clave: crea una por persona en Relvato → API access y podrás revocarlas una a una.