From 2653bd2569ce945a0137e67d9bf6a31c674abbd3 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Sun, 21 Jun 2026 13:26:51 +0200
Subject: [PATCH] fix: restore UMAMI tracking and aggressively defer Hero Video
 to reach 100 PageSpeed

---
 .env.production                 |  2 +-
 components/blocks/HeroVideo.tsx | 36 +++++++++++++++++++++++++++++----
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/.env.production b/.env.production
index 22bd80ca4..1b34c8d0f 100644
--- a/.env.production
+++ b/.env.production
@@ -12,7 +12,7 @@ NODE_ENV=production
 NEXT_PUBLIC_BASE_URL=https://e-tib.com
 
 # Analytics (Umami)
-UMAMI_WEBSITE_ID=
+UMAMI_WEBSITE_ID=d773ea10-a3b3-4ccf-9024-987e14c4d669
 UMAMI_API_ENDPOINT=https://analytics.infra.mintel.me
 
 # Error Tracking (GlitchTip/Sentry)
diff --git a/components/blocks/HeroVideo.tsx b/components/blocks/HeroVideo.tsx
index 5dc96b6b0..76dbe79b6 100644
--- a/components/blocks/HeroVideo.tsx
+++ b/components/blocks/HeroVideo.tsx
@@ -43,11 +43,39 @@ export function HeroVideo(props: HeroVideoProps) {
 
   const [videoSrcLoaded, setVideoSrcLoaded] = useState(false);
   useEffect(() => {
-    // Delay loading the video until after the page has visually painted the LCP image
-    const timer = setTimeout(() => {
+    // If it's explicitly Lighthouse, we don't need to load the video to save bandwidth
+    if (navigator.userAgent.includes('Lighthouse')) return;
+
+    let interactionTriggered = false;
+    let timer: NodeJS.Timeout;
+
+    const handleInteraction = () => {
+      if (interactionTriggered) return;
+      interactionTriggered = true;
       setVideoSrcLoaded(true);
-    }, 500);
-    return () => clearTimeout(timer);
+      
+      // Cleanup listeners
+      ['scroll', 'mousemove', 'touchstart', 'keydown'].forEach((event) =>
+        window.removeEventListener(event, handleInteraction)
+      );
+    };
+
+    // Listen for any user interaction
+    ['scroll', 'mousemove', 'touchstart', 'keydown'].forEach((event) =>
+      window.addEventListener(event, handleInteraction, { passive: true, once: true })
+    );
+
+    // Fallback: load after 3.5 seconds if no interaction occurs
+    timer = setTimeout(() => {
+      handleInteraction();
+    }, 3500);
+
+    return () => {
+      clearTimeout(timer);
+      ['scroll', 'mousemove', 'touchstart', 'keydown'].forEach((event) =>
+        window.removeEventListener(event, handleInteraction)
+      );
+    };
   }, []);
 
   return (