Improve frontend performance and caching behavior

hdyc-svelte/src/routes/+layout.svelte

@@ -252,6 +252,13 @@
       },
     },
   ];
+  const matomoContainerSrc = 'https://matomo.howdoyouconvert.com/js/container_B3r877Kn.js';
+
+  type WindowWithAnalytics = Window & {
+    _mtm?: Array<Record<string, unknown>>;
+    requestIdleCallback?: (callback: () => void, options?: { timeout: number }) => number;
+    cancelIdleCallback?: (handle: number) => void;
+  };
 
   let sidebarOpen = false;
   let headerSearchOpen = false;
@@ -303,6 +310,22 @@
     }
   };
 
+  const loadMatomoContainer = () => {
+    if (!browser) return;
+    if (document.querySelector(`script[src="${matomoContainerSrc}"]`)) return;
+
+    const appWindow = window as WindowWithAnalytics;
+    const queue = appWindow._mtm ?? [];
+    appWindow._mtm = queue;
+    queue.push({ 'mtm.startTime': Date.now(), event: 'mtm.Start' });
+
+    const script = document.createElement('script');
+    script.async = true;
+    script.src = matomoContainerSrc;
+    script.setAttribute('data-cfasync', 'false');
+    document.head.appendChild(script);
+  };
+
   afterNavigate(() => {
     sidebarOpen = false;
     headerSearchOpen = false;
@@ -310,6 +333,9 @@
 
   onMount(() => {
     if (!browser) return;
+    const appWindow = window as WindowWithAnalytics;
+    let idleCallbackId: number | null = null;
+    let fallbackTimeoutId: number | null = null;
 
     const savedTheme = window.localStorage.getItem('theme') as ThemeMode | null;
     const savedPalette = window.localStorage.getItem('palette');
@@ -356,6 +382,11 @@
       sidebarOpen = false;
     }
     updateHeaderBreakpoint();
+    if (typeof appWindow.requestIdleCallback === 'function') {
+      idleCallbackId = appWindow.requestIdleCallback(loadMatomoContainer, { timeout: 3000 });
+    } else {
+      fallbackTimeoutId = window.setTimeout(loadMatomoContainer, 1200);
+    }
 
     const cleanup = () => {
       if ('removeEventListener' in mediaQuery) {
@@ -373,6 +404,12 @@
       } else {
         headerBreakpoint.removeListener(handleHeaderBreakpoint);
       }
+      if (idleCallbackId !== null && typeof appWindow.cancelIdleCallback === 'function') {
+        appWindow.cancelIdleCallback(idleCallbackId);
+      }
+      if (fallbackTimeoutId !== null) {
+        window.clearTimeout(fallbackTimeoutId);
+      }
       window.removeEventListener('keydown', handleEscape);
     };
 
@@ -400,16 +437,6 @@
 <svelte:head>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <link rel="icon" type="image/svg+xml" href="/favicon.svg?v=2" />
-  <!-- Matomo Tag Manager -->
-  <script>
-    var _mtm = window._mtm = window._mtm || [];
-    _mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
-    (function() {
-      var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-      g.async=true; g.src='https://matomo.howdoyouconvert.com/js/container_B3r877Kn.js'; s.parentNode.insertBefore(g,s);
-    })();
-  </script>
-  <!-- End Matomo Tag Manager -->
 </svelte:head>
 
 <a href="#main-content" class="skip-link">Skip to main content</a>