From 38bd728393e438798142f8b78fe4e53f1b081979 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Sun, 21 Jun 2026 12:23:58 +0200
Subject: [PATCH] fix(perf): defer hero video loading and lazy load massive
 markdown images

---
 components/blocks/HeroVideo.tsx | 15 ++++++++++++---
 content/de/home.mdx             |  2 +-
 content/en/home.mdx             |  2 +-
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/components/blocks/HeroVideo.tsx b/components/blocks/HeroVideo.tsx
index d8c2281dd..5dc96b6b0 100644
--- a/components/blocks/HeroVideo.tsx
+++ b/components/blocks/HeroVideo.tsx
@@ -41,6 +41,15 @@ export function HeroVideo(props: HeroVideoProps) {
   const secondaryCtaLabel = props.secondaryCtaLabel || data?.secondaryCtaLabel || (currentLocale === 'de' ? 'Projekt anfragen' : 'Inquire Project');
   const secondaryCtaHref = props.secondaryCtaHref || data?.secondaryCtaHref || `/${currentLocale}/contact`;
 
+  const [videoSrcLoaded, setVideoSrcLoaded] = useState(false);
+  useEffect(() => {
+    // Delay loading the video until after the page has visually painted the LCP image
+    const timer = setTimeout(() => {
+      setVideoSrcLoaded(true);
+    }, 500);
+    return () => clearTimeout(timer);
+  }, []);
+
   return (
     <div className="relative w-full h-[85svh] md:h-[100svh] flex items-center justify-center overflow-hidden bg-neutral-dark">
       {/* Background color while video loads */}
@@ -57,17 +66,17 @@ export function HeroVideo(props: HeroVideoProps) {
         priority
       />
 
-      {/* Render video on top if available, but don't force aggressive preload */}
+      {/* Render video on top if available, but defer src to avoid blocking LCP */}
       {videoUrl && (
         <video
           key={`${pathname}-${videoUrl}`}
           className="absolute inset-0 w-full h-full object-cover z-[2] pointer-events-none filter contrast-125 saturate-110 brightness-90"
-          src={videoUrl}
+          src={videoSrcLoaded ? videoUrl : undefined}
           autoPlay
           muted
           loop
           playsInline
-          preload="metadata"
+          preload="none"
         />
       )}
       
diff --git a/content/de/home.mdx b/content/de/home.mdx
index 08767c3f5..02ddc8c31 100644
--- a/content/de/home.mdx
+++ b/content/de/home.mdx
@@ -88,7 +88,7 @@ description: "Die E-TIB GmbH ist Ihr zuverlässiger Partner für komplexe Kabelt
       {/* Right Column: Imagery & Mission */}
       <div className="lg:col-span-7 relative">
         <div className="aspect-[4/3] md:aspect-[16/9] lg:aspect-[4/3] rounded-3xl overflow-hidden shadow-2xl relative border border-neutral-200/50">
-          <img src="/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-100.jpg" alt="E-TIB im Einsatz" className="w-full h-full object-cover" />
+          <img src="/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-100.jpg" alt="E-TIB im Einsatz" className="w-full h-full object-cover" loading="lazy" decoding="async" />
           <div className="absolute inset-0 bg-gradient-to-t from-neutral-dark/95 via-neutral-dark/40 to-transparent"></div>
           
           <div className="absolute bottom-0 left-0 w-full p-8 md:p-12">
diff --git a/content/en/home.mdx b/content/en/home.mdx
index 8522f6ad9..91adea99a 100644
--- a/content/en/home.mdx
+++ b/content/en/home.mdx
@@ -88,7 +88,7 @@ description: "E-TIB GmbH is your reliable partner for complex cable routes, hori
       {/* Right Column: Imagery & Mission */}
       <div className="lg:col-span-7 relative">
         <div className="aspect-[4/3] md:aspect-[16/9] lg:aspect-[4/3] rounded-3xl overflow-hidden shadow-2xl relative border border-neutral-200/50">
-          <img src="/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-100.jpg" alt="E-TIB in action" className="w-full h-full object-cover" />
+          <img src="/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-100.jpg" alt="E-TIB in action" className="w-full h-full object-cover" loading="lazy" decoding="async" />
           <div className="absolute inset-0 bg-gradient-to-t from-neutral-dark/95 via-neutral-dark/40 to-transparent"></div>
           
           <div className="absolute bottom-0 left-0 w-full p-8 md:p-12">