release: v2.4.0

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);

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 */}

package.json

@@ -139,7 +139,7 @@
     "prepare": "husky",
     "preinstall": "npx only-allow pnpm"
   },
-  "version": "2.2.95",
+  "version": "2.4.0",
   "pnpm": {
     "onlyBuiltDependencies": [
       "@parcel/watcher",