From 20d6194a7e6f065b199f1a6d6f44f6fa4a4f6ceb Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Wed, 1 Jul 2026 15:30:21 +0200
Subject: [PATCH] perf: fix massive LCP render delay and TTFB on Home page

---
 app/[locale]/page.tsx           |  1 +
 components/blocks/HeroVideo.tsx | 11 ++++-------
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
index a2c7fe549..1ca49bad4 100644
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -133,6 +133,7 @@ export default async function Home(props: { params: Promise<{ locale: string }>
   
   setRequestLocale(locale);
   preload('/germany-map.svg', { as: 'image', fetchPriority: 'high' });
+  preload('/assets/videos/web/hero-kabelpflug-poster.webp', { as: 'image', fetchPriority: 'high' });
 
   const mdx = await getMdxContent(locale, 'home');
   const allReferences = await getAllReferences(locale);
diff --git a/components/blocks/HeroVideo.tsx b/components/blocks/HeroVideo.tsx
index c28ec7e24..992ca31d7 100644
--- a/components/blocks/HeroVideo.tsx
+++ b/components/blocks/HeroVideo.tsx
@@ -80,16 +80,13 @@ export function HeroVideo(props: HeroVideoProps) {
       {/* Background color while video loads */}
       <div className="absolute inset-0 z-0 bg-neutral-dark" />
       
-      {/* ALWAYS render the Next.js optimized Image as the LCP element */}
-      <Image
+      {/* ALWAYS render a native img as the LCP element to avoid Render Delay */}
+      <img
         key={`img-${pathname}-${posterSrc}`}
         src={posterSrc}
         alt={posterAlt}
-        fill
-        className="object-cover z-[1] pointer-events-none"
-        sizes="100vw"
-        quality={25}
-        priority
+        className="absolute inset-0 w-full h-full object-cover z-[1] pointer-events-none"
+        decoding="sync"
         fetchPriority="high"
       />
       {/* Fast compositing layer to replace the heavy CSS filters on the image */}