From 46e4050ee97b41355966aae609bc499e609611ca Mon Sep 17 00:00:00 2001
From: Derek Cofausper <256792747+decofe@users.noreply.github.com>
Date: Wed, 8 Apr 2026 17:29:07 +0000
Subject: [PATCH] perf: defer PostHog and Google Analytics init behind
 requestIdleCallback

Co-authored-by: Brendan Ryan <1572504+brendanjryan@users.noreply.github.com>
Amp-Thread-ID: https://ampcode.com/threads/T-019d6e1a-2a8e-7257-a027-d6c2cb562b8b
---
 src/components/GoogleAnalytics.tsx | 28 +++++++++++++++---------
 src/components/PostHogSetup.tsx    | 35 ++++++++++++++++++------------
 2 files changed, 39 insertions(+), 24 deletions(-)

diff --git a/src/components/GoogleAnalytics.tsx b/src/components/GoogleAnalytics.tsx
index fd12f674..7a498dc3 100644
--- a/src/components/GoogleAnalytics.tsx
+++ b/src/components/GoogleAnalytics.tsx
@@ -13,18 +13,26 @@ function GoogleAnalyticsInit({ id }: { id: string }) {
   useEffect(() => {
     if (typeof window.gtag !== 'undefined') return
 
-    window.dataLayer = window.dataLayer || []
-    window.gtag = function gtag() {
-      // biome-ignore lint/complexity/noArguments: gtag API requires arguments object
-      window.dataLayer.push(arguments)
+    const init = () => {
+      window.dataLayer = window.dataLayer || []
+      window.gtag = function gtag() {
+        // biome-ignore lint/complexity/noArguments: gtag API requires arguments object
+        window.dataLayer.push(arguments)
+      }
+      window.gtag('js', new Date())
+      window.gtag('config', id)
+
+      const script = document.createElement('script')
+      script.async = true
+      script.src = `https://www.googletagmanager.com/gtag/js?id=${id}`
+      document.head.appendChild(script)
     }
-    window.gtag('js', new Date())
-    window.gtag('config', id)
 
-    const script = document.createElement('script')
-    script.async = true
-    script.src = `https://www.googletagmanager.com/gtag/js?id=${id}`
-    document.head.appendChild(script)
+    if ('requestIdleCallback' in window) {
+      window.requestIdleCallback(init)
+    } else {
+      setTimeout(init, 1)
+    }
   }, [id])
 
   return null
diff --git a/src/components/PostHogSetup.tsx b/src/components/PostHogSetup.tsx
index ce17135b..89cb48b0 100644
--- a/src/components/PostHogSetup.tsx
+++ b/src/components/PostHogSetup.tsx
@@ -10,21 +10,28 @@ function PostHogInitializer() {
 
     if (!posthogKey || !posthogHost) return
 
-    posthog.init(posthogKey, {
-      api_host: '/ingest',
-      ui_host: posthogHost,
-      defaults: '2025-11-30',
-      capture_exceptions: true,
-      debug: import.meta.env.MODE === 'development',
-      session_recording: {
-        maskAllInputs: false,
-        maskInputOptions: {
-          password: true,
+    const init = () => {
+      posthog.init(posthogKey, {
+        api_host: '/ingest',
+        ui_host: posthogHost,
+        defaults: '2025-11-30',
+        capture_exceptions: true,
+        debug: import.meta.env.MODE === 'development',
+        session_recording: {
+          maskAllInputs: false,
+          maskInputOptions: {
+            password: true,
+          },
         },
-      },
-    })
-
-    posthog.register({ site: 'docs' })
+      })
+      posthog.register({ site: 'docs' })
+    }
+
+    if ('requestIdleCallback' in window) {
+      window.requestIdleCallback(init)
+    } else {
+      setTimeout(init, 1)
+    }
   }, [])
 
   return null