perf: deep react code splitting, next-intl payload scoping, and SVG hardware acceleration for PageSpeed 100

components/analytics/AnalyticsShell.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import dynamic from 'next/dynamic';
-import { Suspense } from 'react';
+import { Suspense, useEffect, useState } from 'react';
 
 const DynamicAnalyticsProvider = dynamic(() => import('./AnalyticsProvider'), {
   ssr: false,
@@ -11,6 +11,20 @@ const DynamicScrollDepthTracker = dynamic(() => import('./ScrollDepthTracker'),
 });
 
 export default function AnalyticsShell() {
+  const [shouldLoad, setShouldLoad] = useState(false);
+
+  useEffect(() => {
+    // Wait until browser is completely idle before loading heavy analytics/logger/sentry SDKs
+    if (typeof window !== 'undefined' && 'requestIdleCallback' in window) {
+      window.requestIdleCallback(() => setShouldLoad(true), { timeout: 3000 });
+    } else {
+      const timer = setTimeout(() => setShouldLoad(true), 2500);
+      return () => clearTimeout(timer);
+    }
+  }, []);
+
+  if (!shouldLoad) return null;
+
   return (
     <Suspense fallback={null}>
       <DynamicAnalyticsProvider />