diff --git a/containers/libreportal/frontend/index.html b/containers/libreportal/frontend/index.html
index 9948151..5940e03 100755
--- a/containers/libreportal/frontend/index.html
+++ b/containers/libreportal/frontend/index.html
@@ -97,13 +97,14 @@
   <script src="/js/system/setup-wizard.js"></script>
   <script src="/js/system/setup-completion-watcher.js"></script>
   <script src="/js/system/system-orchestrator.js"></script>
-  <script src="/js/components/backup/backup-page.js"></script>
-  <script src="/js/components/backup/backup-app-card.js"></script>
-  <script src="/js/components/ssh/ssh-page.js"></script>
-  <script src="/js/components/peers/peers-page.js"></script>
-  <script src="/js/components/admin/charts.js"></script>
-  <script src="/js/components/admin/admin-overview.js"></script>
-  <script src="/js/components/admin/admin-system.js"></script>
+  <!--
+    Page-specific controllers are loaded on demand by spa.js / config-manager.js
+    when the user navigates to the relevant route. Keeping them out of the
+    initial <script> block trims ~200 KB raw (~50 KB gzipped) off the cold-load
+    cost AND avoids parsing them up front on the dashboard, which most users
+    land on. Each handler's loadScript() call is idempotent — subsequent
+    navigations to the same route are free.
+  -->
   <script src="/js/spa.js"></script>
 </body>
 </html>
diff --git a/containers/libreportal/frontend/js/components/config/config-manager.js b/containers/libreportal/frontend/js/components/config/config-manager.js
index e1f2ca5..7028904 100755
--- a/containers/libreportal/frontend/js/components/config/config-manager.js
+++ b/containers/libreportal/frontend/js/components/config/config-manager.js
@@ -32,9 +32,21 @@ if (typeof window.ConfigManager === 'undefined') {
       // the first call, so the config-category path below is a cache hit.
       try { await this.core.loadConfig(category); } catch (e) {}
 
+      // Tool controllers are loaded on demand — they're not in index.html's
+      // initial <script> block (Phase B of the WebUI lazy-load work). Falls
+      // back gracefully if window.spaClean isn't around for some reason
+      // (e.g. legacy bootstrap path).
+      const lazyLoad = (src) =>
+        window.spaClean?.loadScript ? window.spaClean.loadScript(src) : Promise.resolve();
+
       // Overview is the Admin landing — an ops/health board, not a config form.
       if (category === 'overview') {
         try { this.sidebar.populateSidebar(); } catch (e) {}
+        // charts.js is the chart-rendering helper admin-overview pulls in.
+        await Promise.all([
+          lazyLoad('/js/components/admin/admin-overview.js'),
+          lazyLoad('/js/components/admin/charts.js')
+        ]);
         if (typeof AdminOverview !== 'undefined') {
           window.adminOverview = new AdminOverview('config-section');
           await window.adminOverview.init();
@@ -48,6 +60,7 @@ if (typeof window.ConfigManager === 'undefined') {
       // a config category — render its own controller into the main pane.
       if (category === 'ssh-access') {
         try { this.sidebar.populateSidebar(); } catch (e) {}
+        await lazyLoad('/js/components/ssh/ssh-page.js');
         if (typeof SshPage !== 'undefined') {
           window.sshPage = new SshPage('config-section');
           await window.sshPage.init();
@@ -63,6 +76,7 @@ if (typeof window.ConfigManager === 'undefined') {
       // we inject its content template, then init PeersPage.
       if (category === 'peers') {
         try { this.sidebar.populateSidebar(); } catch (e) {}
+        await lazyLoad('/js/components/peers/peers-page.js');
         try {
           const html = await fetch('/html/peers-content.html').then(r => r.text());
           configSection.innerHTML = html;
@@ -83,6 +97,7 @@ if (typeof window.ConfigManager === 'undefined') {
       // own controller, like SSH Access above.
       if (category === 'system') {
         try { this.sidebar.populateSidebar(); } catch (e) {}
+        await lazyLoad('/js/components/admin/admin-system.js');
         if (typeof AdminSystem !== 'undefined') {
           window.adminSystem = new AdminSystem('config-section');
           await window.adminSystem.init();
diff --git a/containers/libreportal/frontend/js/spa.js b/containers/libreportal/frontend/js/spa.js
index b31935c..d605cd0 100755
--- a/containers/libreportal/frontend/js/spa.js
+++ b/containers/libreportal/frontend/js/spa.js
@@ -260,6 +260,12 @@ class LibrePortalSPAClean {
 
   async handleBackup() {
     try {
+      // backup-page.js + backup-app-card.js are loaded on first navigation.
+      // loadScript is idempotent — subsequent /backup navigations are no-ops.
+      await Promise.all([
+        this.loadScript('/js/components/backup/backup-page.js'),
+        this.loadScript('/js/components/backup/backup-app-card.js')
+      ]);
       const html = await this.fetchContent('/html/backup-content.html');
       this.loadContent(html, 'Backups');
       if (typeof BackupPage !== 'undefined') {