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

app/[locale]/page.tsx

@@ -136,7 +136,7 @@ export default async function Home(props: { params: Promise<{ locale: string }>
     as: 'image', 
     fetchPriority: 'high',
     imageSrcSet: '/assets/videos/web/hero-kabelpflug-poster-mobile.webp 800w, /assets/videos/web/hero-kabelpflug-poster.webp 1920w',
-    imageSizes: '(max-width: 768px) 800px, 1920px'
+    imageSizes: '100vw'
   });
 
   const mdx = await getMdxContent(locale, 'home');

components/blocks/HeroVideo.tsx

@@ -84,7 +84,7 @@ export function HeroVideo(props: HeroVideoProps) {
         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') ? "(max-width: 768px) 800px, 1920px" : undefined}
+        sizes={posterSrc.includes('-poster.webp') ? "100vw" : undefined}
         alt={posterAlt}
         className="absolute inset-0 w-full h-full object-cover z-[1] pointer-events-none"
         decoding="sync"

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%' }}
+                initial={{ x: '-150%' }}
-                animate={{ left: '250%' }}
+                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"
+                  className="absolute inset-y-0 left-0 w-full bg-gradient-to-r from-primary-dark via-primary to-primary-light origin-left"
-                  initial={{ width: "0%" }}
+                  initial={{ scaleX: 0 }}
-                  animate={{ width: "100%" }}
+                  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] }}
+          transition={{ duration: 0.65, ease: [0.76, 0, 0.24, 1] }}
-          className="fixed left-0 w-full z-[9998] bg-[#050B14] pointer-events-none flex flex-col items-center justify-center overflow-visible"
+          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%' }}
+                initial={{ x: '-150%' }}
-                animate={{ left: '250%' }}
+                animate={{ x: '250%' }}
                 transition={{ duration: 1.5, ease: "easeInOut", repeat: Infinity, repeatDelay: 0.2 }}
               />
             </div>

components/providers/TransitionProvider.tsx

@@ -27,14 +27,8 @@ export function TransitionProvider({ children }: { children: ReactNode }) {
   const [hasMountedShutter, setHasMountedShutter] = useState(false);
   const router = useRouter();
 
-  // Load the heavy shutter chunk in the background when the main thread is idle
+  // We no longer eagerly load the shutter in the background.
-  useEffect(() => {
+  // It will be loaded precisely when the user initiates a transition.
-    if (typeof window !== 'undefined' && 'requestIdleCallback' in window) {
-      window.requestIdleCallback(() => setHasMountedShutter(true));
-    } else {
-      setTimeout(() => setHasMountedShutter(true), 2000);
-    }
-  }, []);
 
   // We use a ref to track transition state without triggering the route change effect when it turns true
   const isTransitioningRef = React.useRef(isTransitioning);

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.4.3",
+  "version": "2.4.5",
   "pnpm": {
     "onlyBuiltDependencies": [
       "@parcel/watcher",