Performance

Der Tab im Überblick

Öffne in den DevTools (F12) das Panel FrontTailor oder das Side-Panel und wähle den Tab Performance. Oben stehen die Optionen der Messung, darunter nach der ersten Messung der Bericht. In der Seite läuft nichts, bevor du Messung starten klickst.

1. Seite neu laden misst den vollständigen Start der App (empfohlen). Aktuelle Seite ohne Neuladen wertet aus, was seit dem letzten Laden passiert ist.
2. Ohne Browser-Cache (Kaltstart) lädt am HTTP-Cache vorbei neu; der Theme-Cache wird dann nicht bewertet.
3. UI5-Messungen (sap-ui-measure) lädt mit sap-ui-measure=true neu und liefert die Renderzeit je Control-Typ direkt aus UI5.
4. Tiefenprofil (CPU, Chrome-Debugger): CPU-Zeit je UI5-Bibliothek und App-Funktion, siehe unten.
5. Messung starten.

Eine Messung starten

1. Öffne die App im Browser und wähle im Panel den Tab Performance.
2. Lass Seite neu laden gewählt. Für einen Kaltstart setze zusätzlich Ohne Browser-Cache (Kaltstart).
3. Klicke Messung starten. Der Profiler lädt die Seite neu und wartet, bis sie ruhig ist: 1,5 Sekunden ohne neue Requests, höchstens 18 Sekunden.
4. Der Bericht erscheint und wird als Messung gespeichert. Gib ihr im Feld Name der Messung einen Namen, etwa „vor Preload-Fix“.

Wird die Seite in der Wartezeit nicht ruhig, steht über dem Bericht „Die Seite wurde innerhalb der Wartezeit nicht ruhig; späte Requests können fehlen.“ Gespeichert wird die Adresse ohne Query-String.

Der Bericht

1. Name der Messung – erscheint in der Liste der gespeicherten Messungen und im Export. Daneben die Zusammenfassung der Ampeln: kritisch, prüfen, gut.
2. Als Markdown kopieren, Markdown herunterladen und Druckansicht (siehe Export).
3. Das Urteil des Budgets: „Budget eingehalten.“ oder welche Budgets überschritten sind.
4. Budget bearbeiten öffnet die Grenzwerte dieser App (siehe Budgets).
5. Woher das Budget stammt: Standardbudget, Eigenes Budget oder Team-Budget.

Darunter folgen die Abschnitte des Berichts:

1. Zeit bis interaktiv ist eine Näherung: der Zeitpunkt, ab dem die Seite ruhig war.
2. Die Zeitachse zeigt, in welcher Reihenfolge die App lädt und wo lange Tasks den Main-Thread blockieren.

Unter den Kennzahlen steht die Karte Performance-Tipps: lokale Prüfungen über Messung, OData-Log und Lade-Befunde – ohne KI. Mit eigenem Schlüssel kann die KI die Messung zusätzlich erklären, siehe KI-Assistent.

Best-Practice-Prüfung

Jede Regel bekommt eine Bewertung: Gut, Prüfen, Kritisch oder Info. Bei Prüfen und Kritisch steht neben der Glühbirne, was du ändern solltest. Die kritischen Befunde stehen oben.

1. Regel, Ampel und Messwert.
2. Die Empfehlung, hier: die übrigen Befunde abarbeiten, weil Preload-Bundles, asynchrones Laden, weniger Requests und $batch den Start am meisten verkürzen.

Die Grenzen sind Faustregeln von FrontTailor, keine Grenzwerte von SAP:

Dazu kommen Regeln ohne Schwelle: Ein fehlender Component-Preload ist kritisch, ebenso ein synchroner Loader (Asynchrones Laden) oder synchrones Routing (Asynchrones Routing). Eine Warnung gibt es, wenn das Manifest erst nach dem Komponenten-Code kommt (Manifest first), wenn mehr als zwölf Bibliotheken ohne lazy deklariert sind (Lazy Loading), wenn das Theme-CSS nicht aus dem Cache kommt (Theme-Cache) und wenn der Debug-Modus an ist.

Performance-Budgets je App

Ein Budget legt für eine App Grenzwerte fest. Jede Messung dieser App wird dagegen geprüft, das Urteil steht oben im Bericht. Die App erkennt FrontTailor an sap.app.id, die Version an applicationVersion im Manifest.

1. Miss die App einmal, damit FrontTailor App-ID und Version kennt.
2. Klicke in der Karte Performance-Budget auf Budget bearbeiten.
3. Passe die Grenzwerte an oder schalte Kennzahlen aus; ausgeschaltete werden nicht überwacht. Unter Notiz hältst du fest, woher der Wert kommt, etwa aus dem Release-Review.
4. Klicke Speichern. Die Karte zeigt jetzt Eigenes Budget; Auf Standard zurücksetzen holt die Standardwerte zurück.

Die Tabelle der Karte zeigt je Kennzahl Gemessen, Budget und Status (Im Budget, Überschritten, Nicht überwacht, Nicht gemessen). Ein Klick auf eine Kennzahl zeigt ihren Verlauf über die gespeicherten Messungen mit App-Version; die gestrichelte Linie ist das Budget. Der Verlauf erscheint ab zwei gespeicherten Messungen der App. So steht im Urteil etwa „Startzeit (TTI) +38 % seit Version 1.4.0“.

Exportieren schreibt die Budgets aller Apps als JSON, auch für CI-Skripte; Importieren liest sie wieder ein. Mit ab Team verteilt Team-Sync die Budgets an alle im Team (Team-Sync). Gibt eine Administration ein Budget vor, lässt es sich im Panel nicht ändern.

Messungen speichern und vergleichen

Jede Messung landet in der Karte Gespeicherte Messungen: je App die letzten zehn plus je eine aus älteren App-Versionen. Gespeichert wird lokal im Browser, ohne Query-Strings. Anzeigen holt einen alten Bericht zurück, Messung löschen entfernt ihn.

1. Miss vor der Änderung und gib der Messung einen Namen.
2. Ändere die App – etwa Preload-Bundles bauen – und miss erneut.
3. Wähle in Gespeicherte Messungen die Messungen für Vorher und Nachher und klicke Vergleichen.
4. Die Karte Vergleich zeigt jede Kennzahl mit Vorher, Nachher und Änderung (besser, schlechter, unverändert), darunter jede Prüfung mit beiden Ampeln. Vergleich schließen kehrt zum Bericht zurück.

1. Kennzahl mit Vorher, Nachher und Änderung in Zeit und Prozent.
2. Vergleich schließen.

Export und Druckansicht

FrontTailor schickt keinen Bericht irgendwohin: Alle drei Wege bleiben in deinem Browser.

Tiefenprofil mit dem Profiler Companion

Das Tiefenprofil zeichnet CPU-Zeit je UI5-Bibliothek und App-Funktion sowie alle Netzwerk-Requests über den Chrome-Debugger auf. Dafür braucht es die kostenlose Zusatz-Extension FrontTailor Profiler Companion: Sie hält die Chrome-Berechtigung debugger, FrontTailor selbst braucht sie deshalb nicht.

1. Ist der Companion nicht installiert, steht unter der Option ein Hinweis mit Profiler Companion installieren. Nach der Installation klicke Erneut prüfen.
2. Setze Tiefenprofil (CPU, Chrome-Debugger) und klicke Messung starten.
3. Während der Messung zeigt Chrome die Leiste „FrontTailor Profiler Companion hat mit dem Debuggen dieses Browsers begonnen“. Sie verschwindet am Ende der Messung; wer sie schließt, bricht das Tiefenprofil ab – der Basisbericht bleibt vollständig.
4. Der Bericht enthält dann den Abschnitt CPU (Tiefenprofil) mit Eigenzeit je Gruppe, Bibliothek und Funktion.

Das Tiefenprofil endet spätestens nach 90 Sekunden. In Firefox gibt es es nicht, weil es den Chrome-Debugger braucht.

Typische Probleme