Lovable-Monitoring: das Tempo deiner App nach jeder Änderung direkt im Lovable-Chat prüfen

Was du einrichtest

Eine Schleife mit vier Schritten: Du baust in Lovable, du veröffentlichst, du bittest Lovable, Relvatos Core-Web-Vitals-Monitor auf der veröffentlichten App laufen zu lassen, und Lovable liest das Ergebnis und behebt, was schlechter wurde. Die Zahlen stammen daraus, dass Relvato deine Seite in einem echten Chrome lädt, auf einem gedrosselten Smartphone und am Desktop — nicht aus einer Schätzung von Lovable.

Du brauchst ein Relvato-Konto (der Free-Tarif reicht: Läufe, die du aus dem Chat startest, sind manuelle Läufe, und Free enthält 100 im Monat), ein Lovable-Konto in einem beliebigen Tarif (eigene MCP-Server gibt es in allen Lovable-Tarifen, auch Free) und eine veröffentlichte App. Relvato misst die veröffentlichte Adresse — die lovable.app-Subdomain oder deine eigene Domain —, nie die Vorschau im Editor, denn die veröffentlichte Adresse laden deine Besucher.

Ist „MCP server“ in Schritt 2 ausgegraut, hat ein Workspace-Admin eigene MCP-Server für deinen Lovable-Workspace abgeschaltet; bitte ihn, sie zu erlauben.

Schritt 1 — Einen Relvato-API-Schlüssel für Lovable erstellen

Öffne in Relvato das Kontomenü → API access. Gib dem Schlüssel einen Namen, den du später wiedererkennst, etwa „Lovable“. Wähle unter What the key may do die Option Full access: Ein Read-only-Schlüssel kann Ergebnisse lesen, aber keinen Monitor starten — und genau darum geht es hier.

Klicke auf + Create API key und kopiere den Schlüssel sofort — Relvato zeigt ihn nur einmal. Er beginnt mit rlv_. Auf derselben Seite kannst du ihn jederzeit widerrufen; damit ist Lovable getrennt, ohne dass sich sonst etwas ändert.

Schritt 2 — Relvato in Lovable als Chat-Connector hinzufügen

Öffne in Lovable Connectors (in der Seitenleiste des Dashboards oder in einem Projekt), klicke oben rechts im Katalog auf + und wähle MCP server. Trage bei Server name „Relvato“ ein und bei Server URL die Adresse unten. Wähle als Authentifizierung Bearer token or API key, füge deinen rlv_-Schlüssel ein und klicke auf Add server.

Die Verbindung ist persönlich: Du hast dich mit deinem eigenen Schlüssel angemeldet, nur du kannst sie nutzen, und sie wird nie Teil der App, die du veröffentlichst — deine Besucher erreichen Relvato darüber nicht. Teammitglieder, die dieselbe Schleife wollen, fügen Relvato selbst hinzu, mit ihrem eigenen Schlüssel.

https://app.relvato.com/api/mcp

Schritt 3 — Deine App aus demselben Chat zu Relvato hinzufügen

Ist die App schon in Relvato, überspring diesen Schritt. Sonst musst du Lovable nicht verlassen. Schreib: „Füge mit Relvato meine App https://deine-app.lovable.app als Website hinzu (Plattform: other).“ Relvato antwortet mit einem Verifizierungs-Tag, das belegt, dass die Website dir gehört — wie die Zeile unten.

Bitte Lovable, das Tag in den head der Seite zu setzen (in index.html bei Apps von vor Mai 2026, im Root-Layout bei neueren), veröffentliche mit Publish → Publish changes und schreib dann „Verifiziere meine Website in Relvato.“ Sobald Relvato das Tag findet, ist die Website bereit. Hat die App eine eigene Domain, füge diese Adresse statt der lovable.app-Adresse hinzu: Die nutzen deine Besucher, und Lovable leitet die anderen nur vorübergehend dorthin weiter.

<meta name="relvato-site-verification" content="…">

Schritt 4 — Den Core-Web-Vitals-Monitor hinzufügen

Schreib: „Füge Relvatos Core-Web-Vitals-Monitor zu meiner Website hinzu.“ Lovable ruft Relvatos Tool add_checks mit dem Monitor web-vitals auf. Er misst eine Seite — die Startseite, sofern du in den Einstellungen des Monitors in Relvato keine andere wählst.

Jeder Lauf lädt die Seite dreimal auf einem Smartphone mit gedrosseltem Netz und gedrosselter CPU (dasselbe Profil mit Slow 4G und 4× CPU wie PageSpeed) und dreimal am Desktop und behält den Median: Largest Contentful Paint, Cumulative Layout Shift, Time to First Byte, First Contentful Paint, Total Blocking Time und eine Laborschätzung von Interaction to Next Paint, dazu einen Wert von 0–100 pro Gerät.

Schritt 5 — Nach jeder Veröffentlichung einen Lauf anfordern

Mach es zur Gewohnheit: zuerst veröffentlichen (Publish → Publish changes), dann einen Prompt wie „Starte Relvatos Core-Web-Vitals-Monitor auf meiner Website, warte, bis er fertig ist, und vergleiche LCP, CLS und TTFB auf dem Smartphone mit dem vorherigen Lauf.“ Lovable startet den Lauf mit trigger_scan und liest ihn mit get_run, bis er fertig ist — meist nach etwa einer Minute.

Lovable fragt, bevor es ein MCP-Tool nutzt, es sei denn, der Server kennzeichnet das Tool als schreibgeschützt. Relvato kennzeichnet seine lesenden Tools so (site_overview, list_runs, get_run, get_fix_prompt); nur das Starten eines Laufs oder eine Änderung fragt vorher nach. Wähle für trigger_scan Always allow, wenn du die Rückfrage nicht jedes Mal willst.

Jeder Lauf zählt zu den monatlichen Läufen deines Relvato-Tarifs, und Lovable rechnet Tool-Aufrufe wie bei jedem anderen Connector auf deine Credits an.

Schritt 6 — Lovable reparieren lassen, was langsamer wurde

Die Details eines Laufs sagen Lovable, warum sich eine Zahl verändert hat, nicht nur, dass sie es tat: welches Element der Largest Contentful Paint war und wie lange jede Phase dauerte, welche Elemente das Layout verschoben haben, welche Skripte das Rendern blockiert haben, zu große Bilder und wie viel JavaScript ungenutzt blieb. Damit ändert Lovable die richtige Zeile, statt zu raten.

Probier: „Nutze die Details dieses Relvato-Laufs, um die Verschlechterung des LCP auf dem Smartphone zu beheben, veröffentliche dann und starte den Monitor erneut.“ Für einen fehlgeschlagenen Lauf liefert „Hol Relvatos Fix-Briefing für diesen Lauf“ dasselbe Briefing, das Relvatos Suggest a fix nutzt. Prüfe Lovables Änderung wie jede andere, veröffentliche, und der nächste Lauf bestätigt den Fix.

Ältere Lovable-Apps: worauf der Browser wirklich wartet

Lovable-Apps, die ab dem 13. Mai 2026 erstellt wurden, rendern auf dem Server. Ältere sind clientseitig gerenderte Single-Page-Apps: Der Browser bekommt eine fast leere Seite und wartet auf das JavaScript-Bundle, bevor er den Hauptinhalt zeichnen kann. Eine vorgerenderte Kopie liefert Lovable nur an verifizierte Such-Crawler, deshalb sehen Scanner, die nur das HTML abrufen, womöglich eine leere Seite.

Relvato ruft nicht nur das HTML ab — es lädt die Seite in Chrome wie ein Besucher, also enthält sein LCP genau dieses Warten auf das Bundle. Ist der LCP einer älteren App auf dem Smartphone hoch und erscheint das LCP-Element erst nach dem JavaScript, ist das Bundle das, was kleiner werden muss — und es aufzuteilen ist eine Änderung, die Lovable für dich machen kann.

Ohne Nachfragen laufen lassen (optional)

Läufe aus dem Chat passieren, wenn du sie anforderst. Damit Relvato bei jeder Code-Änderung von selbst alle aktiven Monitore erneut ausführt, verbinde das GitHub-Repository, mit dem Lovable synchronisiert — siehe Website mit GitHub verbinden. Dieser Auslöser braucht Relvatos Pro-Tarif oder höher.

Ein Hinweis: Lovable pusht zu GitHub, während du bearbeitest — womöglich bevor du veröffentlichst. Ein durch den Push ausgelöster Lauf misst dann eventuell die Version, die noch live ist. Der Lauf, den du nach Publish changes aus dem Chat startest, misst genau das, was du veröffentlicht hast.