diff --git a/vscode/webviews/App.tsx b/vscode/webviews/App.tsx
index 95d11ebb9b8e..4c1227dc9a32 100644
--- a/vscode/webviews/App.tsx
+++ b/vscode/webviews/App.tsx
@@ -163,6 +163,28 @@ export const App: React.FunctionComponent<{ vscodeAPI: VSCodeWrapper }> = ({ vsc
         [vscodeAPI, telemetryRecorder, config]
     )
 
+    useEffect(() => {
+        const observePerformance = (entryType: string, eventName: string) => {
+            const observer = new PerformanceObserver(list => {
+                for (const entry of list.getEntries()) {
+                    telemetryRecorder.recordEvent(`cody.webview.${eventName}`, 'performance', {
+                        metadata: { duration: entry.duration },
+                    })
+                }
+            })
+            observer.observe({ entryTypes: [entryType] })
+            return observer
+        }
+
+        const longTaskObserver = observePerformance('longtask', 'longTask')
+        const loafObserver = observePerformance('frame', 'longAnimationFrame')
+
+        return () => {
+            longTaskObserver.disconnect()
+            loafObserver.disconnect()
+        }
+    }, [telemetryRecorder])
+
     // Wait for all the data to be loaded before rendering Chat View
     if (!view || !config) {
         return <LoadingPage />