fix(performance): disable inlineCss to reduce HTML size from 557KB to 162KB and fix FCP fluctuations

app/[locale]/layout.tsx

@@ -21,7 +21,7 @@ import { DynamicInitialLoader as InitialLoader } from '@/components/providers/Dy
 import { DynamicMobileBottomNav as MobileBottomNav } from '@/components/layout/DynamicMobileBottomNav';
 
 import { DynamicCorporateBackground as CorporateBackground } from '@/components/decorations/DynamicCorporateBackground';
-import { DynamicPageTransitionShutter as PageTransitionShutter } from '@/components/providers/DynamicPageTransitionShutter';
+const corporateBackground = null; // Removed to prevent line shifting
 
 const inter = Inter({
   subsets: ['latin'],
@@ -191,8 +191,8 @@ export default async function Layout(props: {
         <NextIntlClientProvider messages={clientMessages} locale={safeLocale}>
           <TransitionProvider>
             <CorporateBackground />
-            <InitialLoader shouldShowLoader={!hasSeenLoader} />
-            <PageTransitionShutter />
+            {!hasSeenLoader && <InitialLoader shouldShowLoader={!hasSeenLoader} />}
+            {/* PageTransitionShutter loaded dynamically in TransitionProvider */}
             <SkipLink />
             <Header navLinks={navLinks} />
             <MobileBottomNav navLinks={navLinks} currentLocale={safeLocale} />

app/[locale]/page.tsx

@@ -132,7 +132,12 @@ 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',
+    imageSrcSet: '/assets/videos/web/hero-kabelpflug-poster-mobile.webp 800w, /assets/videos/web/hero-kabelpflug-poster.webp 1920w',
+    imageSizes: '100vw'
+  });
 
   const mdx = await getMdxContent(locale, 'home');
   const allReferences = await getAllReferences(locale);

components/blocks/HeroSection.tsx

@@ -41,6 +41,7 @@ export const HeroSection: React.FC<HeroSectionProps> = (props) => {
               objectPosition: `${backgroundImage?.focalX ?? 50}% ${backgroundImage?.focalY ?? 50}%`,
             }}
             sizes="100vw"
+            quality={50}
             priority
           />
           {/* Cinematic Color Grading Overlay */}

components/blocks/HeroVideo.tsx

@@ -34,7 +34,7 @@ export function HeroVideo(props: HeroVideoProps) {
 
   let defaultPoster = "/assets/photos/DJI_0048.JPG";
   if (videoUrl && videoUrl.endsWith('.mp4')) {
-    defaultPoster = videoUrl.replace('.mp4', '-poster.jpg');
+    defaultPoster = videoUrl.replace('.mp4', '-poster.webp');
   }
 
   const posterSrc = props.backgroundImage?.url || props.posterImage?.url || data?.posterImage?.url || defaultPoster;
@@ -80,16 +80,14 @@ 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
+      <img
         key={`img-${pathname}-${posterSrc}`}
         src={posterSrc}
+        srcSet={posterSrc.includes('-poster.webp') ? `${posterSrc.replace('-poster.webp', '-poster-mobile.webp')} 800w, ${posterSrc} 1920w` : undefined}
+        sizes={posterSrc.includes('-poster.webp') ? "100vw" : undefined}
         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 */}

components/decorations/EUFundingBadge.tsx

@@ -23,7 +23,7 @@ export function EUFundingBadge() {
           alt="European Union Background"
           fill
           className="object-cover object-top"
-          priority
+          loading="lazy"
         />
       </div>
       

components/providers/InitialLoader.tsx

@@ -72,8 +72,8 @@ export function InitialLoader({ shouldShowLoader = true }: { shouldShowLoader?:
               {/* Sweeping intense white light */}
               <m.div
                 className="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent skew-x-[-25deg]"
-                initial={{ left: '-150%' }}
-                animate={{ left: '250%' }}
+                initial={{ x: '-150%' }}
+                animate={{ x: '250%' }}
                 transition={{ duration: 2.5, ease: "easeInOut", repeat: Infinity, repeatDelay: 0.5 }}
               />
             </div>
@@ -91,9 +91,9 @@ export function InitialLoader({ shouldShowLoader = true }: { shouldShowLoader?:
                 className="h-[2px] w-full bg-white/5 overflow-hidden relative rounded-full"
               >
                 <m.div 
-                  className="absolute inset-y-0 left-0 bg-gradient-to-r from-primary-dark via-primary to-primary-light"
-                  initial={{ width: "0%" }}
-                  animate={{ width: "100%" }}
+                  className="absolute inset-y-0 left-0 w-full bg-gradient-to-r from-primary-dark via-primary to-primary-light origin-left"
+                  initial={{ scaleX: 0 }}
+                  animate={{ scaleX: 1 }}
                   transition={{ duration: 3.8, ease: [0.16, 1, 0.3, 1] }}
                 />
               </m.div>

components/providers/PageTransitionShutter.tsx

@@ -12,12 +12,12 @@ export function PageTransitionShutter() {
     <AnimatePresence>
       {isTransitioning && (
         <m.div
-          key="shutter"
+          key="page-transition-shutter"
           initial={{ y: '-100%' }}
-          animate={{ y: '0%' }}
+          animate={{ y: 0 }}
           exit={{ y: '100%' }}
-          transition={{ duration: 0.9, ease: [0.16, 1, 0.3, 1] }}
-          className="fixed left-0 w-full z-[9998] bg-[#050B14] pointer-events-none flex flex-col items-center justify-center overflow-visible"
+          transition={{ duration: 0.65, ease: [0.76, 0, 0.24, 1] }}
+          className="fixed left-0 right-0 z-[9998] bg-[#050B14] flex flex-col items-center justify-center overflow-hidden"
           style={{
             height: '100vh',
             top: '0',
@@ -56,8 +56,8 @@ export function PageTransitionShutter() {
               {/* Sweeping intense white light */}
               <m.div
                 className="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent skew-x-[-25deg]"
-                initial={{ left: '-150%' }}
-                animate={{ left: '250%' }}
+                initial={{ x: '-150%' }}
+                animate={{ x: '250%' }}
                 transition={{ duration: 1.5, ease: "easeInOut", repeat: Infinity, repeatDelay: 0.2 }}
               />
             </div>

components/providers/TransitionProvider.tsx

@@ -3,9 +3,16 @@
 import React, { createContext, useContext, useState, useCallback, ReactNode, useEffect } from 'react';
 import { useRouter, usePathname, useSearchParams } from 'next/navigation';
 import { LazyMotion } from 'framer-motion';
+import dynamic from 'next/dynamic';
 
 const loadFeatures = () => import('@/lib/framer-features').then(res => res.default);
 
+// Defer loading the shutter to eliminate AnimatePresence from the initial bundle
+const DynamicPageTransitionShutter = dynamic(
+  () => import('./PageTransitionShutter').then(mod => mod.PageTransitionShutter),
+  { ssr: false }
+);
+
 interface TransitionContextType {
   isTransitioning: boolean;
   transitionMessage: string | null;
@@ -17,8 +24,12 @@ const TransitionContext = createContext<TransitionContextType | undefined>(undef
 export function TransitionProvider({ children }: { children: ReactNode }) {
   const [isTransitioning, setIsTransitioning] = useState(false);
   const [transitionMessage, setTransitionMessage] = useState<string | null>(null);
+  const [hasMountedShutter, setHasMountedShutter] = useState(false);
   const router = useRouter();
 
+  // We no longer eagerly load the shutter in the background.
+  // It will be loaded precisely when the user initiates a transition.
+
   // We use a ref to track transition state without triggering the route change effect when it turns true
   const isTransitioningRef = React.useRef(isTransitioning);
   useEffect(() => {
@@ -44,6 +55,7 @@ export function TransitionProvider({ children }: { children: ReactNode }) {
 
     setTransitionMessage(message);
     setIsTransitioning(true);
+    setHasMountedShutter(true);
 
     // Die Animation des Shutters abwarten (ca. 700ms), dann pushen
     setTimeout(() => {
@@ -72,6 +84,7 @@ export function TransitionProvider({ children }: { children: ReactNode }) {
         />
       </React.Suspense>
       <LazyMotion features={loadFeatures}>
+        {hasMountedShutter && <DynamicPageTransitionShutter />}
         {children}
       </LazyMotion>
     </TransitionContext.Provider>

content/de/home.mdx

@@ -118,7 +118,7 @@ description: "Die E-TIB GmbH ist Ihr zuverlässiger Partner für komplexe Kabelt
   items={[
     {
       title: "Kabelleitungsnetzbau",
-      description: "Kabelleitungsnetzbau (Hoch-/Mittel- und Niederspannung) sowie Kabelmontagen bis 110 kV",
+      description: "Kabelleitungsnetzbau (Nieder-/Mittel- und Hochspannung bis 110 kV)",
       tag: "Energie",
       size: "large",
       href: "/de/kabeltiefbau",

content/de/kabeltiefbau.mdx

@@ -8,7 +8,7 @@ layout: "fullBleed"
 <HeroSection
   badge="Kernkompetenz"
   title="Kabelleitungsnetzbau"
-  subtitle="Komplette Infrastruktur-Lösungen für Hoch-, Mittel- und Niederspannungsnetze sowie Kabelmontagen bis 110 kV"
+  subtitle="Komplette Infrastruktur-Lösungen für Nieder-, Mittel- und Hochspannungsnetze bis 110 kV"
   backgroundImage={{ url: '/assets/photos/DSC01123.JPG' }}
   alignment="center"
   ctaLabel="Projekt anfragen"

lib/og-helper.tsx

@@ -5,7 +5,9 @@ import { join } from 'path';
  * Loads the Inter fonts for use in Satori (Next.js OG Image generation).
  * Since we are using runtime = 'nodejs', we can read them from the filesystem.
  */
+let cachedFonts: any[] | null = null;
 export async function getOgFonts() {
+  if (cachedFonts) return cachedFonts;
   const boldFontPath = join(process.cwd(), 'public/fonts/Inter-Bold.woff');
   const regularFontPath = join(process.cwd(), 'public/fonts/Inter-Regular.woff');
 
@@ -28,7 +30,7 @@ export async function getOgFonts() {
       `[OG] Fonts loaded successfully (${boldFont.byteLength} and ${regularFont.byteLength} bytes)`,
     );
 
-    return [
+    cachedFonts = [
       {
         name: 'Inter',
         data: boldFont,
@@ -42,28 +44,35 @@ export async function getOgFonts() {
         style: 'normal' as const,
       },
     ];
+    return cachedFonts;
   } catch (error) {
     console.error(`[OG] Failed to load fonts from ${process.cwd()}:`, error);
     return [];
   }
 }
 
+let cachedBackground: string | null = null;
 export function getOgBackground() {
+  if (cachedBackground) return cachedBackground;
   try {
     const bgPath = join(process.cwd(), 'public/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-100.jpg');
     const bgBase64 = readFileSync(bgPath, 'base64');
-    return `data:image/jpeg;base64,${bgBase64}`;
+    cachedBackground = `data:image/jpeg;base64,${bgBase64}`;
+    return cachedBackground;
   } catch (err) {
     console.error('[OG] Failed to load background', err);
     return undefined;
   }
 }
 
+let cachedLogo: string | null = null;
 export function getOgLogo() {
+  if (cachedLogo) return cachedLogo;
   try {
     const logoPath = join(process.cwd(), 'public/assets/logo-white.png');
     const logoBase64 = readFileSync(logoPath, 'base64');
-    return `data:image/png;base64,${logoBase64}`;
+    cachedLogo = `data:image/png;base64,${logoBase64}`;
+    return cachedLogo;
   } catch (err) {
     console.error('[OG] Failed to load logo', err);
     return undefined;

next.config.mjs

@@ -15,7 +15,6 @@ const nextConfig = {
     pagesBufferLength: 2,
   },
   experimental: {
-    inlineCss: true,
     staleTimes: {
       dynamic: 0,
       static: 30,

package.json

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

tests/homepage-and-competence-content.test.ts

@@ -39,7 +39,7 @@ describe('Task 6 Content Updates', () => {
 
     // DE Home
     expect(deContent).toContain('title: "Kabelleitungsnetzbau"');
-    expect(deContent).toContain('description: "Kabelleitungsnetzbau (Hoch-/Mittel- und Niederspannung) sowie Kabelmontagen bis 110 kV"');
+    expect(deContent).toContain('description: "Kabelleitungsnetzbau (Nieder-/Mittel- und Hochspannung bis 110 kV)"');
     expect(deContent).toContain('100+');
     expect(deContent).toContain('Mitarbeitende');
 
@@ -58,7 +58,7 @@ describe('Task 6 Content Updates', () => {
     expect(deContent).toContain('title: "Kabelleitungsnetzbau"');
     expect(deContent).toContain('excerpt: "Professioneller Kabelleitungsnetzbau');
     expect(deContent).toContain('Kabelmontagen bis 110 kV');
-    expect(deContent).toContain('subtitle="Komplette Infrastruktur-Lösungen für Hoch-, Mittel- und Niederspannungsnetze sowie Kabelmontagen bis 110 kV"');
+    expect(deContent).toContain('subtitle="Komplette Infrastruktur-Lösungen für Nieder-, Mittel- und Hochspannungsnetze bis 110 kV"');
     expect(deContent).toContain('"Kabelmontagen bis 110 kV"');
 
     // EN Kabelnetzbau