diff --git a/apps/web-roo-code/src/components/providers/providers.tsx b/apps/web-roo-code/src/components/providers/providers.tsx
index a0e77b38e23..69772f3f996 100644
--- a/apps/web-roo-code/src/components/providers/providers.tsx
+++ b/apps/web-roo-code/src/components/providers/providers.tsx
@@ -3,18 +3,27 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { ThemeProvider } from "next-themes"
 
-import { PostHogProvider } from "./posthog-provider"
+// Lazily load PostHog on the client only so its ~40-60 KB bundle is
+// split into a separate chunk that is fetched *after* the critical UI.
+// This keeps the main bundle lean and improves First Contentful Paint.
+import dynamic from "next/dynamic"
+
+const PostHogProvider = dynamic(() => import("./posthog-provider").then((m) => m.PostHogProvider), {
+    // Disable SSR – analytics only runs in the browser.
+    ssr: false,
+})
 
 const queryClient = new QueryClient()
 
 export const Providers = ({ children }: { children: React.ReactNode }) => {
-	return (
-		<QueryClientProvider client={queryClient}>
-			<PostHogProvider>
-				<ThemeProvider attribute="class" defaultTheme="dark" enableSystem={false}>
-					{children}
-				</ThemeProvider>
-			</PostHogProvider>
-		</QueryClientProvider>
-	)
+    return (
+        <QueryClientProvider client={queryClient}>
+            {/* PostHog loads on demand in a separate chunk */}
+            <PostHogProvider>
+                <ThemeProvider attribute="class" defaultTheme="dark" enableSystem={false}>
+                    {children}
+                </ThemeProvider>
+            </PostHogProvider>
+        </QueryClientProvider>
+    )
 }