perf: completely lazy load framer-motion core via DynamicFramerMotion wrapper

perf(server): aggressively cache OG image assets in memory to prevent synchronous file I/O from blocking the Node event loop
2026-06-30 23:05:31 +02:00 · 2026-06-30 23:02:12 +02:00
6 changed files with 53 additions and 28 deletions
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -22,6 +22,7 @@ import { DynamicMobileBottomNav as MobileBottomNav } from '@/components/layout/D

 import { DynamicCorporateBackground as CorporateBackground } from '@/components/decorations/DynamicCorporateBackground';
 import { DynamicPageTransitionShutter as PageTransitionShutter } from '@/components/providers/DynamicPageTransitionShutter';
+import { DynamicFramerMotion as FramerMotionProvider } from '@/components/providers/DynamicFramerMotion';

 const inter = Inter({
  subsets: ['latin'],
@@ -190,26 +191,28 @@ export default async function Layout(props: {
      <body className="relative flex flex-col min-h-screen font-sans antialiased overflow-x-hidden selection:bg-primary/90 selection:text-white" suppressHydrationWarning>
        <NextIntlClientProvider messages={clientMessages} locale={safeLocale}>
          <TransitionProvider>
-            <CorporateBackground />
-            <InitialLoader shouldShowLoader={!hasSeenLoader} />
-            <PageTransitionShutter />
-            <SkipLink />
-            <Header navLinks={navLinks} />
-            <MobileBottomNav navLinks={navLinks} currentLocale={safeLocale} />
-            
-            <main
-              id="main-content"
-              className="flex-grow overflow-visible"
-              tabIndex={-1}
-            >
-              {children}
-            </main>
+            <FramerMotionProvider>
+              <CorporateBackground />
+              <InitialLoader shouldShowLoader={!hasSeenLoader} />
+              <PageTransitionShutter />
+              <SkipLink />
+              <Header navLinks={navLinks} />
+              <MobileBottomNav navLinks={navLinks} currentLocale={safeLocale} />
+              
+              <main
+                id="main-content"
+                className="flex-grow overflow-visible"
+                tabIndex={-1}
+              >
+                {children}
+              </main>

-            <Footer companyInfo={companyInfo} />
-            <JsonLd />
-            <AnalyticsShell />
+              <Footer companyInfo={companyInfo} />
+              <JsonLd />
+              <AnalyticsShell />

-            <FeedbackClientWrapper />
+              <FeedbackClientWrapper />
+            </FramerMotionProvider>
          </TransitionProvider>
        </NextIntlClientProvider>
      </body>
--- a/components/providers/DynamicFramerMotion.tsx
+++ b/components/providers/DynamicFramerMotion.tsx
@@ -0,0 +1,7 @@
+'use client';
+import dynamic from 'next/dynamic';
+
+export const DynamicFramerMotion = dynamic(
+  () => import('./FramerMotionProvider').then((mod) => mod.FramerMotionProvider),
+  { ssr: true }
+);
--- a/components/providers/FramerMotionProvider.tsx
+++ b/components/providers/FramerMotionProvider.tsx
@@ -0,0 +1,11 @@
+'use client';
+import { LazyMotion } from 'framer-motion';
+const loadFeatures = () => import('@/lib/framer-features').then(res => res.default);
+
+export function FramerMotionProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <LazyMotion features={loadFeatures} strict>
+      {children}
+    </LazyMotion>
+  );
+}
--- a/components/providers/TransitionProvider.tsx
+++ b/components/providers/TransitionProvider.tsx
@@ -2,9 +2,6 @@

 import React, { createContext, useContext, useState, useCallback, ReactNode, useEffect } from 'react';
 import { useRouter, usePathname, useSearchParams } from 'next/navigation';
-import { LazyMotion } from 'framer-motion';
-
-const loadFeatures = () => import('@/lib/framer-features').then(res => res.default);

 interface TransitionContextType {
  isTransitioning: boolean;
@@ -71,9 +68,7 @@ export function TransitionProvider({ children }: { children: ReactNode }) {
          setTransitionMessage={setTransitionMessage}
        />
      </React.Suspense>
-      <LazyMotion features={loadFeatures}>
-        {children}
-      </LazyMotion>
+      {children}
    </TransitionContext.Provider>
  );
 }
--- a/lib/og-helper.tsx
+++ b/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;
--- a/package.json
+++ b/package.json
@@ -139,7 +139,7 @@
    "prepare": "husky",
    "preinstall": "npx only-allow pnpm"
  },
-  "version": "2.2.93",
+  "version": "2.2.94",
  "pnpm": {
    "onlyBuiltDependencies": [
      "@parcel/watcher",
Author	SHA1	Message	Date
Marc Mintel	73886406a4	perf: completely lazy load framer-motion core via DynamicFramerMotion wrapper All checks were successful Build & Deploy / 🔍 Prepare (push) Successful in 29s Details Build & Deploy / 🧪 Post-Deploy Verification (push) Successful in 1m11s Details Build & Deploy / 🧪 QA (push) Successful in 1m48s Details Build & Deploy / 🏗️ Build (push) Successful in 3m25s Details Build & Deploy / 🚀 Deploy (push) Successful in 35s Details Build & Deploy / 🔔 Notify (push) Successful in 3s Details	2026-06-30 23:05:31 +02:00
Marc Mintel	b2701d6bcd	perf(server): aggressively cache OG image assets in memory to prevent synchronous file I/O from blocking the Node event loop All checks were successful Build & Deploy / 🔍 Prepare (push) Successful in 29s Details Build & Deploy / 🧪 QA (push) Successful in 1m53s Details Build & Deploy / 🏗️ Build (push) Successful in 3m25s Details Build & Deploy / 🚀 Deploy (push) Successful in 36s Details Build & Deploy / 🧪 Post-Deploy Verification (push) Successful in 1m14s Details Build & Deploy / 🔔 Notify (push) Successful in 3s Details	2026-06-30 23:02:12 +02:00