perf: fix massive LCP render delay and TTFB on Home page
Some checks failed
Build & Deploy / 🧪 QA (push) Has been cancelled
Build & Deploy / 🏗️ Build (push) Has been cancelled
Build & Deploy / 🚀 Deploy (push) Has been cancelled
Build & Deploy / 🧪 Post-Deploy Verification (push) Has been cancelled
Build & Deploy / 🔔 Notify (push) Has been cancelled
Build & Deploy / 🔍 Prepare (push) Has been cancelled

This commit is contained in:
2026-07-01 15:30:21 +02:00
parent 86e2fd7097
commit 20d6194a7e
2 changed files with 5 additions and 7 deletions

View File

@@ -133,6 +133,7 @@ export default async function Home(props: { params: Promise<{ locale: string }>
setRequestLocale(locale); setRequestLocale(locale);
preload('/germany-map.svg', { as: 'image', fetchPriority: 'high' }); 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 mdx = await getMdxContent(locale, 'home');
const allReferences = await getAllReferences(locale); const allReferences = await getAllReferences(locale);

View File

@@ -80,16 +80,13 @@ export function HeroVideo(props: HeroVideoProps) {
{/* Background color while video loads */} {/* Background color while video loads */}
<div className="absolute inset-0 z-0 bg-neutral-dark" /> <div className="absolute inset-0 z-0 bg-neutral-dark" />
{/* ALWAYS render the Next.js optimized Image as the LCP element */} {/* ALWAYS render a native img as the LCP element to avoid Render Delay */}
<Image <img
key={`img-${pathname}-${posterSrc}`} key={`img-${pathname}-${posterSrc}`}
src={posterSrc} src={posterSrc}
alt={posterAlt} alt={posterAlt}
fill className="absolute inset-0 w-full h-full object-cover z-[1] pointer-events-none"
className="object-cover z-[1] pointer-events-none" decoding="sync"
sizes="100vw"
quality={25}
priority
fetchPriority="high" fetchPriority="high"
/> />
{/* Fast compositing layer to replace the heavy CSS filters on the image */} {/* Fast compositing layer to replace the heavy CSS filters on the image */}