Fiori Performance Part 1: Measuring and Improving App Start-Up

📌 KEY POINTS
✅ Measure start-up with the browser network and performance tabs and UI5 support tools.
✅ Component preload bundles reduce hundreds of small file requests to a few.
✅ Asynchronous loading (async in manifest and bootstrap) avoids blocking the browser.
✅ Load libraries lazily if they are not needed on the first screen.
⚠️ Optimising without measuring usually targets the wrong problem.

━━━━━━━━━━━━━━━━━━━━
▶ WHERE WE ARE
This series covers performance. Part 1 focuses on how fast an app becomes usable.

━━━━━━━━━━━━━━━━━━━━
▶ 1. MEASURE FIRST
Open the app with developer tools: the network tab shows request count, sizes and waterfalls; the performance tab shows script execution. UI5's support assistant and diagnostics report common issues such as missing preload or synchronous requests. Record a baseline before changing anything.

━━━━━━━━━━━━━━━━━━━━
▶ 2. PRELOAD AND BUNDLING
A built UI5 app contains a Component-preload.js bundle with all its modules and views. Without it, the browser loads each file separately, which is slow, especially over long distances. Make sure the build produces the preload and that the deployed app uses it.

━━━━━━━━━━━━━━━━━━━━
▶ 3. ASYNCHRONOUS LOADING
Set async: true for the root view and routing in the manifest and bootstrap UI5 with async options. Synchronous XHRs block the browser and are deprecated. Most modern templates do this already; older apps often don't.

━━━━━━━━━━━━━━━━━━━━
▶ 4. LIBRARIES AND DEPENDENCIES
Declare only libraries the app needs and mark rarely used ones as lazy in the manifest, loading them when a feature needs them. Large third-party libraries should also be loaded on demand.

━━━━━━━━━━━━━━━━━━━━
▶ 5. LAUNCHPAD OVERHEAD
The launchpad itself loads plugins, theme and user data. Too many tiles, heavy dynamic tiles and custom plugins slow the shell. Keep pages focused and review plugins.

━━━━━━━━━━━━━━━━━━━━
▶ STEP BY STEP

1. Record a baseline load time and request count.
2. Check that Component-preload.js is loaded.
3. Run the UI5 support assistant and fix findings.
4. Mark a rarely used library as lazy and remeasure.

✅ CHECKPOINT: start-up time improved against the baseline with each change measured.

A custom app took twelve seconds to start for users in another region. The network tab showed over 300 separate file requests because the deployment skipped the build step and uploaded source files. Deploying the built app with preload reduced start-up to about three seconds.

• Deploying unbuilt sources.
• Synchronous loading in old apps.
• Loading all libraries upfront.
• Changing code without baseline measurement.

• Measure before and after.
• Always deploy built preload bundles.
• Async bootstrap and routing.
• Lazy libraries and lean launchpad pages.

Interviewers ask how you analyse slow app start-up and which UI5 techniques — preload, async, lazy loading — address it.