Performance

The tab at a glance

Open the FrontTailor panel in DevTools (F12) or the side panel and choose the Performance tab. The measurement options are at the top; after the first measurement the report follows below. Nothing runs in the page until you click Start measurement.

1. Reload page measures the full start of the app (recommended). Current page without reload evaluates what happened since the last load.
2. Without browser cache (cold start) reloads bypassing the HTTP cache; the theme cache is not rated then.
3. UI5 measurements (sap-ui-measure) reloads with sap-ui-measure=true and gives the rendering time per control type from UI5 itself.
4. Deep profile (CPU, Chrome debugger): CPU time per UI5 library and app function, see below.
5. Start measurement.

Start a measurement

1. Open the app in the browser and choose the Performance tab in the panel.
2. Keep Reload page selected. For a cold start also tick Without browser cache (cold start).
3. Click Start measurement. The profiler reloads the page and waits until it is quiet: 1.5 seconds without new requests, at most 18 seconds.
4. The report appears and is saved as a measurement. Give it a name in the Name of the measurement field, for example “before preload fix”.

If the page does not become quiet in time, the report says “The page did not become quiet within the wait limit; late requests may be missing.” The address is stored without its query string.

The report

1. Name of the measurement – shown in the list of saved measurements and in the export. Next to it the summary of the ratings: critical, check, good.
2. Copy as Markdown, Download Markdown and Print view (see export).
3. The budget verdict: “Budget kept.” or which budgets are exceeded.
4. Edit budget opens the limits of this app (see budgets).
5. Where the budget comes from: Default budget, Own budget or Team budget.

The report sections follow below:

1. Time to interactive is an approximation: the moment from which the page was quiet.
2. The timeline shows the order in which the app loads and where long tasks block the main thread.

Below the key figures sits the Performance tips card: local checks over the measurement, the OData log and load findings – without AI. With your own key the AI can also explain the measurement, see AI assistant.

Best-practice check

Every rule gets a rating: Good, Check, Critical or Info. For Check and Critical the line next to the light bulb says what to change. Critical findings come first.

1. Rule, rating and measured value.
2. The recommendation, here: work through the other findings, because preload bundles, asynchronous loading, fewer requests and $batch shorten the start most.

The limits are FrontTailor rules of thumb, not SAP limits:

Rules without a threshold come on top: a missing Component preload is critical, and so is a synchronous loader (Asynchronous loading) or synchronous routing (Asynchronous routing). You get a warning when the manifest arrives only after the component code (Manifest first), when more than twelve libraries are declared without lazy (Lazy loading), when the theme CSS does not come from the cache (Theme cache) and when Debug mode is on.

Performance budgets per app

A budget sets limits for one app. Every measurement of that app is checked against them, and the verdict sits at the top of the report. FrontTailor recognises the app by sap.app.id and the version by applicationVersion in the manifest.

1. Measure the app once so FrontTailor knows the app ID and version.
2. In the Performance budget card, click Edit budget.
3. Adjust the limits or switch metrics off; switched-off metrics are not monitored. Use Note to record where a value comes from, for example the release review.
4. Click Save. The card now shows Own budget; Reset to defaults brings back the default values.

The card’s table shows Measured, Budget and Status for each metric (Within, Exceeded, Not monitored, Not measured). Clicking a metric shows its Trend across the saved measurements with the app version; the dashed line is the budget. The trend appears from two saved measurements of the app. That is how the verdict can say, for example, “Start time (TTI) +38 % since version 1.4.0”.

Export writes the budgets of all apps as JSON, also for CI scripts; Import reads them back. With from Team, team sync hands the budgets to everyone in the team (Team sync). If an administrator sets a budget, it cannot be changed in the panel.

Save and compare measurements

Every measurement goes to the Saved measurements card: per app the latest ten plus one from each older app version. They are stored locally in the browser, without query strings. Show brings back an old report, Delete measurement removes it.

1. Measure before the change and give the measurement a name.
2. Change the app – for example build preload bundles – and measure again.
3. In Saved measurements, pick the measurements for Before and After and click Compare.
4. The Comparison card shows every key figure with before, after and Change (better, worse, unchanged), and below it every check with both ratings. Close comparison returns to the report.

1. Key figure with before, after and the change in time and percent.
2. Close comparison.

Export and print view

FrontTailor sends no report anywhere: all three stay in your browser.

Deep profile with the Profiler Companion

The deep profile records CPU time per UI5 library and app function plus all network requests over the Chrome debugger. It needs the free add-on extension FrontTailor Profiler Companion: it holds the Chrome permission debugger, so FrontTailor itself does not need it.

1. If the companion is not installed, a note below the option offers Install the Profiler Companion. After installing it, click Check again.
2. Tick Deep profile (CPU, Chrome debugger) and click Start measurement.
3. While measuring, Chrome shows the bar “FrontTailor Profiler Companion started debugging this browser”. It disappears when the measurement ends; closing it cancels the deep profile – the base report stays complete.
4. The report then contains the CPU (deep profile) section with self time per group, library and function.

The deep profile ends after 90 seconds at the latest. It is not available in Firefox, because it needs the Chrome debugger.

Typical problems